跨平台应用开发进阶(六十四):微信小程序开发技术栈原生开发 VS 跨平台开发

一、前言

说到前端开发,就不得不说到跨端开发,因为它可以提高应用程序的效率并降低开发成本。uni-app是一种跨平台开发框架,基于Vue.js,并且可以在多个平台如微信小程序、支付宝小程序、H5等上运行。对于开发人员来说,这意味着他们可以使用同一个代码库来构建多个平台的应用,而不需要开发不同的代码库。

相信大家对小程序都不陌生,在生活的方方面面中都有它的身影,比如:社区团购、商城购物、打车出行、订餐外卖、健康码、小游戏等,都是小程序的影子,小程序的普及,主要来源于他独有的优势,无需安装、随用随走、不额外占用内存,是一种功能强大轻量化的APP,用户通过扫码或多种方式,即可快速开启,深受广大开发者及用户的青睐。

那么,如果计划开发一款小程序,使用原生还是uniapp?如何开发一款小程序?下面就原生开发及跨平台开发做简要讲解。

二、原生开发

原生开发的优点如下:

  • 官方文档清晰明了,更接近手机服务的底层逻辑,开发者可以更有针对性的对小程序进行深度开发。

  • 使用原生开发可以紧随官方版本,更新响应速度快,让项目达到最优状态。

再来看一下缺点:同前端开发一样,开发不同平台下的小程序,需要不同的开发工具及语法,如微信开发者工具、阿里开发工具、字节跳动开发工具、QQ开发工具等等,如果项目只做单平台的小程序,原生无疑是最优的选择,但如果同时开发多平台小程序,同样的项目需要写多套代码,后期维护起来工作量大成本高。

三、uni-app 开发

uni-app开发的优点如下:

  • 一套代码可以打包14个不同类型的平台,能生成各种小程序H5及APP应用,开发者不需来回切换各种开发工具,使用HBuilderX一款编辑器全搞定。

  • 方便入手,使用vue的语法结合小程序api,有vue基础可以看文档直接上手,没有vue基础可以通过uni-app掌握vue开发,毕竟vue是前端开发界的扛把子。

  • uni-app多终端支持而且生态更好一些,如果项目要求不高,基本不用写太多代码,就能速成一款应用(低代码平台微搭也可以考虑)。

再来看一下缺点:

uni-app打包出来的小程序可能会存在平台兼容问题,同样的代码会在不同平台下存在差异,官方版本更新活跃,相信这些问题逐渐都会得到解决的。

下面以微信小程序原生开发与uni-app两种形式的开发,进行生态上的差异对比:

3.1 UI组件库

很多前端同学CSS普遍不大好,做出来的项目样式非常土气,UI组件库可以让我们快速构建出一款美观的应用,微信小程序和uni-app都有官方库和第三方库,uni-ui配合uView的组合功能更多更全,大家可以自己对比看看。

weUI地址

vant weapp地址

uni-ui地址

uView地址

3.2 插件市场

截止目前,微信服务市场的插件是100+款,uni-app插件市场8K+款,很明显uni-app插件市场的开发者活跃度更高。

微信服务市场

DCloud插件市场

3.3 用户体系

微信小程序依赖于微信的一键登录非常方便,uni-app不但能使用微信登录,而且还有一套自己的用户管理系统,结合uniCloud几乎不需要写太多的代码,就能集成一套多平台的,用户登录注册体系。

3.4 后台管理系统

微信小程序有自带的内容管理系统,uni-appuni-admin后台管理系统,从上手难易程度来讲,微信的内容管理系统非常简单方便,但是模块不能扩展,只能做一些简单的增删改查,uni-admin后台管理系统其实就是一个vue项目,上手有些难度,但是可以任意扩展自定义模块。

3.5 云开发

云开发可以让前端工程师转变为全栈开发工程师,让前端开发可以自己操作数据库,目前腾讯小程序依赖的腾讯云开始收费了,月费为19.9,uni-app可以使用腾讯云,也可以使用阿里云,目前阿里云免费,可以白嫖。

3.6 难易程度

如果你是新手的话,上手哪个都可以,都算是前端必备的技能 。

四、拓展阅读

相关推荐
世界哪有真情8 小时前
拿人类意识卡 AI?等于用 bug 验收正式产品
前端·人工智能·后端
Listen·Rain9 小时前
Vue3:setup详解
前端·javascript·vue.js
Patrick_Wilson9 小时前
修好 bug 只是开始:一次由监控需求反向重构日志结构的复盘
前端·监控·数据可视化
kyriewen10 小时前
面试官让我优化一个卡死的表格,我打开 Claude 五秒重写,他放下咖啡问我要不要来当组长
前端·javascript·面试
小粉粉hhh10 小时前
React(二)——dom、组件间通信、useEffect
前端·javascript·react.js
Csvn10 小时前
🤖 AI 生成前端代码的 5 个典型翻车现场及修复指南
前端
IT_陈寒11 小时前
SpringBoot自动装配坑了我一天,原来问题出在这
前端·人工智能·后端
索西引擎12 小时前
【React】key 属性:协调算法中的元素标识机制与最佳实践
前端·javascript·react.js
只会cv的前端攻城狮13 小时前
动态组件架构设计:从配置到事件驱动全链路解析
前端·vue.js
飞天狗13 小时前
Next.js 16 App Router 实战:服务端组件与流式渲染
前端·next.js