百度360必应搜狗淘宝本站头条
当前位置:网站首页 > IT知识 > 正文

开发小程序的五种方式对比,跨端?低代码?原生?还是云开发?

liuian 2024-12-22 19:35 26 浏览

目前“小程序”的开发与应用呈现“井喷”之势,作为小程序的鼻祖,2021年微信小程序开发者突破了300万,日活跃用户数(DAU)已经超过4.5亿,微信为开发者支付的广告分成接近百亿。在微信小程序火爆之后,各个互联网厂商相继推出了自己的平台小程序,比如:支付宝小程序、百度小程序、字节跳动小程序、快应用、QQ小程序、360小程序、京东小程序、快手小程序等。小程序相对于APP应用存在若干的优势:

  • 免安装,使用方便,占用更少的手机资源
  • 容易分享,小程序的内容产出容易进行社群分享传播
  • 学习的门槛低,开发成本逐步降低

我们就从开发成本逐步降低,从这一个角度来说明一下目前小程序的若干开发方法。


  • 一、原生开发
  • 二、结合UI框架开发
  • 三、跨端开发方式
  • 四、低代码开发
  • 五、云开发
  • 总结


一、原生开发

优点是:以微信小程序为例,原生开发官方的文档、视频教程、API查找都非常的规范、系统,官方的文档齐全。而且原生开发更接近手机服务底层,一旦出现问题容易定位,并解决问题。缺点是:原生开发的代码量相对比较大,组件少、样式美观度不够,语法的灵活度不够,开发效率相对较低。并且不同平台的小程序语法不同,如果小程序需要适配多个平台,开发成本非常高。

二、结合UI框架开发

为了解决原生开发的代码量大,组件少美观度不足的问题,出现了很多适配小程序的界面UI库。比较典型的有:腾讯的weui、有赞的vantUI。使用了界面UI库之后,代码量明显减少,代码更加简洁,提高了开发效率以及代码的可维护性。

这些组件UI库的文档也都非常的规范化、系统化。只需要简单的几个步骤就可以引入文件、使用组件,大部分操作只需要进行代码搬运即可。

三、跨端开发方式

正如笔者之前所说的,目前已经有非常多的厂商推出了自己的小程序,如:支付宝小程序、百度小程序、字节跳动小程序、快应用、QQ小程序、360小程序、京东小程序、快手小程序等,加上android、IOS、H5移动端页面,如果针对每一个平台开发一套小程序,那么开发成本是非常高的。于是出现了跨端开发的框架,寄希望于写一套代码,就可以自动生成适配多个平台的小程序、H5、android、IOS。这种框架目前还是很多的,大概分为两个派系

  • vue语法派系,比如uniapp、chameleon等
  • react语法派系,比如阿里的remax,京东的taro

其中由于国内的vue生态比较好,uniapp几乎是复用了vue语法,所以其学习成本相对较低。组件库以及插件非常丰富,深受vue开发者的喜爱。在这里笔者要为uniapp鸣不平,由于很多开发者一直信奉“国外的月亮比较圆”,每每提到uniapp的时候,就会有人跳出来指出“这不行、那不行”,但是笔者的团队已使用uniapp开发了多款跨端移动应用,总体来说还是不错的。只要你不是使用它开发那种和手机硬件高度结合的应用(比如连接各种手机传感器的那种应用),uniapp完全可以满足你的开发需求。之前一直为人诟病的文档不规范的问题,uniapp也在一直地不断完善。最重要的是:uniapp的用户量非常大,一旦出现了问题你可以与大量的开发者交流解决方案。

当然使用跨端开发框架的缺点就是:问题的排查成本高,遇到框架有bug或无法支持的功能时,只能期待官方更新版本。当然,笔者还是要介绍自己的经验:只要你不是使用它开发那种和手机硬件高度结合的应用,问题都不大,都能解决。 当然也不是说,不能开发与手机硬件结合的应用,就像调用手机GPS获取经纬度、拨打电话、罗盘、蓝牙等笔者团队也都开发过,性能上对比andoid、IOS、小程序原生会差一点点,但是总体也是可用的。目前uniapp支持的硬件设备API如下:

四、低代码开发

开发者总是越来越懒惰的,我觉得程序员未来一定是向低代码、人工智能去发展的,未来的开发者只需要写非常少的代码就可以完成今天不敢想象的功能。虽然“低代码”目前在很多领域还是鸡肋,但是在小程序开发的领域,低代码已经具备了相当的可行性,毕竟小程序开发重要的环节就是界面设计。所以,可视化的页面平台,通过拖拽组件、输入配置来改变组件的样式和行为,再自动生成代码。这种小程序的低代码平台应运而生,如腾讯的WeDa。

五、云开发

最后给大家说一下云开发,这种开发方式目前我只知道是“微信小程序”提供的。它解决的主要问题是:目前开发小程序的核心工作仍然是设计与前端实现,很多小程序的开发者都是前端开发者,这就会出现一个问题:前端开发者没有后台数据,无法独立完成开发。“云开发”方式应运而生!

云开发的就是不需要自己搭建后台服务,通过调用操作数据库的云函数即可获取服务端的数据。即使只会前端,也能开发出一个完整的小程序。 当然后端的这些云服务都是需要付费的!

总结

最后不管怎样,小程序开发的核心仍然是前端开发,即:开发界面、交互以及一些数据请求的业务逻辑。需要你掌握最基础的HTML+JS+CSS,虽然不完全一样,但大同小异。目前跨端开发仍然是主流的开发方式,所以最好先掌握一门前端框架,vue或者react。

相关推荐

vue是什么东西(vue是干什么的)

首先看看官方网站是怎么解释的,如下:Vue(读作/vju/,类似于view)是一个用于构建用户界面的渐进式框架。与其他单体框架不同,Vue从一开始就被设计为可逐步采用的。核心库仅专注于视图层,易于...

超赞 vue2/3 可视化打印设计VuePluginPrint

今天来给大家推荐一款非常不错的Vue可拖拽打印设计器Hiprint。引入使用//main.js中引入安装import{hiPrintPlugin}from'vue-plugin-...

使用VuePress2.X构建个人知识博客,域名部署到GitHub Pages中

使用VuePress2.X构建个人知识博客,并且用个人域名部署到GitHubPages中什么是VuePressVuePress是一个以Markdown为中心的静态网站生成器。你可以使用Mar...

尤雨溪新品Vite的魔力,详解(尤雨溪新品vite的魔力,详解解析)

上篇《尤雨溪是个恶魔,Vite三天10更》谈到了Webpack这一系列打包工具出现的原因。这些工具的出现是为了解决ESModules模块系统本身的环境兼容问题、以及零散的模块文件导致的...

什么是VUE?vue有什么作用?(vue的主要用途)

什么是vue?Vue.js是一套构建用户界面的渐进式框架,Vue采用自下向上增量开发的设计,其核心库只关注视图层,易于上手,同时vue完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复...

10个Vue开发技巧「实践」(vue开发需要掌握哪些知识)

作者:WahFung转发链接:https://juejin.im/post/5e8a9b1ae51d45470720bdfa路由参数解耦一般在组件内使用路由参数,大多数人会这样做:exportdef...

刚搭好vuecli结果官网建议升级vite,于是就升级下

从vue-cli迁移到Vite进行迁移的主要原因是速度。Vite的开发服务器速度很快。因为它使用原生浏览器支持JavaScript模块,所以服务器启动时间是即时的。该方法还意味着无论应用程...

无所不能,将 Vue 渲染到嵌入式液晶屏

该文章转载自公众号@前端时刻,https://mp.weixin.qq.com/s/WDHW36zhfNFVFVv4jO2vrA前言之前看了雪碧大佬的将React渲染到嵌入式液晶屏觉得很有意思,R...

【开源】基于 Vue 和 Gin 开发的前后端分离的开源框架

项目介绍Gin-vue-admin是一个基于vue和gin开发的全栈前后端分离的开发基础平台,旨在快速搭建中小型项目。拥有jwt鉴权,动态路由,动态菜单,casbin鉴权,表单生成器,代码生成器等功能...

Firefox正针对Vue.js进行优化,下版本响应速度将“显著提升”

IT之家9月7日消息,据Mozilla官方博客发文显示,Firefox浏览器正针对Vue.js进行优化,此前FireFox浏览器在面向Vue3时遇到了一些性能问题。▲图源...

vue:生命周期钩子函数及顺序(vue3.0生命周期函数)

一、vue的钩子相关顺序Vue实例有一个完整的生命周期,在newVue()后,会初始化数据,如下://初始化的入口,各种初始化工作initMixin(Vue);//数据绑定的核心方法,包括常用...

使用 Pinia ORM 管理 Vue 中的状态

转载说明:原创不易,未经授权,谢绝任何形式的转载状态管理是构建任何Web应用程序的重要组成部分。虽然Vue提供了管理简单状态的技术,但随着应用程序复杂性的增加,处理状态可能变得更具挑战性。这就是为什么...

搭建Trae+Vue3的AI开发环境(vue ide 开发工具)

从2024年2025年,不断的有各种AI工具会在自媒体中火起来,号称各种效率王炸,而在AI是否会替代打工人的话题中,程序员又首当其冲。作为一个后端开发,这篇文章基于Trae工具,来创建和运行一个简单的...

如何在Vue3中使用Nuxt进行服务端渲染开发?

服务端渲染SSR(Server-SideRendering)是一种在服务器端生成网页内容的技术,这种实现方式与传统的客户端渲染CSR(Client-SideRendering)有所不同。在SSR中...

一篇文章说清 webpack、vite、vue-cli、create-vue 的区别

webpack、vite、vue-cli、create-vue这些都是什么?看着有点晕,不要怕,我们一起来分辨一下。先看这个表格:脚手架vue-clicreate-vue构建项目vite打包代码we...