阅读 1470

小程序框架调研

前言

由于公司业务需要,近期将要进行微信小程序的开发。本次调研主要目的是确认小程序的开发框架,网上一顿乱搜,最后筛选出比较主流的两个框架 Tarouni-app,这两个框架的出现让开发者可以使用前端的框架(React / Vue)开发多端应用(小程序、H5、移动端),但由于参与开发的有 IOS 和 前端 的同事,本文将对比下 Tarouniapp微信小程序原生开发三种方案。

是否有跨端需求?

当前的业务需求是开发一个联合办公智能管理系统,支持门禁二维码扫码、会议室预定、个人账户管理等功能的小程序,之后是否要做成App还不是很确定, 如果要做成App的话,使用Taro或uniapp 之后可能会节省不少开发成本,但还是要调研一下跨端框架的选型,毕竟现在比较成熟的解决方案方案是React Native / Flutter, 本文暂不考虑跨端问题。

方案对比

Taro和uni-app都是一个开放式跨端跨框架解决方案,支持前端框架来开发 小程序、H5和移动端App应用。下面对比下他们与原生开发的

以下内容主要参考这篇文章:小程序开发:用原生还是选框架(wepy/mpvue/taro/uni-app)

Taro vs uni-app vs 原生开发

框架技术栈wsx支持平台文档 & demo社区支持开发迭代
微信小程序原生开发微信原生的开发语法支持微信小程序文档丰富,API搜索准确,官方有示例demo丰富活跃
TaroReact/Vue/Nerv不支持微信/QQ/支付宝/百度/头条小程序、H5、App端基础文档完整,具体使用问题资源较少,问题搜索效果一般,示例demo只包含基础功能,仅发布了微信一端。丰富活跃
uni-appVue支持微信小程序文档丰富,API搜索准确,官方有示例demo丰富活跃

什么是wxs?

WXS(WeiXin Script)是小程序的一套脚本语言,结合 WXML,可以构建出页面的结构。wxs是提升性能体验的重要利器,除了微信小程序的wxs外,还有支付宝的SJS、百度的Filter,这些高级技术 uni-app 均完善支持。参考:谜之wxs,uni-app如何用它大幅提升性能

性能

以长列表为例: 微信原生,uni-app > taro 。看这里。taro长列表性能上会比较差,但官方也有提供解决方案

功能实现

  • 原生开发:直接使用微信提供的原生组件和api进行开发 - 小程序开发指南
  • taro:支持微信的所有原生组件和api,无限制。同时框架封装了自己的跨端API,使用方式类似Taro.request(),支持Taro 代码与小程序代码混写,可通过混写的方式调用框架尚未封装的小程序新增API,但需要注意的是如果引用了小程序原生的页面、组件和插件,那么该项目将不再具备多端转换的能力
  • uni-app:支持微信的所有原生组件和api,无限制。在跨端方面,即便仍然使用微信原生的组件和API,也可以直接跨端编译到App、H5、以及支付宝百度头条等小程序。但为了管理清晰,推荐使用uni封装的API,类似uni.request()。同时支持条件编译,可在条件编译代码块中,随意调用各个平台新增的API及组件

学习成本

  • 原生开发: 需要学习小程序原生语法。
  • taro:基本支持绝大多数React/Nerv/Vue语法。学过React/Nerv/Vue的开发可以直接上手,否则还需要进行框架的学习。
  • uni-app:基本支持绝大多数vue语法,学过Vue的开发可以直接上手,否则还需要进行框架的学习。

由于taro/uni-app中并非重写了微信的原生组件和api,相反的除了一些框架扩展的组件/api,大部分都直接沿用小程序自带的组件/api,所以学习上最大的区别是DSL语法的学习,对于有前端开发经验的人来说当然使用框架更友好一些,但对于没有学习过React/Vue的人来说可能会增加学习成本(如果以后没有往前端发展的打算)。

当然基础的JS、CSS还是要学习的,值得一提的是,小程序原生开发是 支持Typescript 的, 但是支持的方式仅仅是将ts文件编译成js文件,想要更好的支持还需要使用glup去构建。

开发体验 & 效率

  • IDE:

    框架开发有成熟的编译器(如vscode)提供了各种提高好用的插件,微信官方也提供了小程序专用的IDE 微信开发者工具,网上一直诟病的是语法提示不完全(但初步试了下感觉语法提示都还不错的,可能需要深入开发才能真正了解其优缺点),当然还可以结合微信开发者工具与VScode一起开发小程序。

  • 语法:

    微信定义了自己的专属语法,而框架使用的是成熟的前端语法(vue、react),就学习收益而言,学会了vue/ react全端通用,而不是只为小程序。 需要注意的是相比框架在调用setData之前自动做diff计算,每次仅传递变动的数据,原生框架在setdata上没有单独优化,还需要手动写优化代码来控制setdata

  • 工程化:

  1. 框架开发提供了精简的代码组织,微信原生开发,一个Page由4个文件构成,稍微有点繁琐。
  2. 框架开发和微信原生都支持组件式开发,也有相应的组件库。
  3. 框架开发和微信原生都支持模块化开发,但微信原生目前不支持直接引入 node_modules , 开发者需要使用到 node_modules 时候建议拷贝出相关的代码到小程序的目录中,或者使用小程序支持的 npm 功能
  4. 框架开发和微信原生都支持引入一些好用的状态管理库(类Vuex/Redux/Mobx等),微信原生使用 globalData 也可实现基本的数据管理。
  5. 框架开发能灵活支持各种 Sass 等 预处理器, 小程序要使用sass的话需要在每个页面下新建.scss文件,使用Gulp构建工具将.scss文件转化成.wxss,比较麻烦。
  6. 框架开发和微信原生都支持Typescript,配合tsconfig.json也有较好的语法检查。
  7. 框架开发对Node、预编译器、webpack支持度好,有益于开发效率和工程构建流程,相反微信原生的工程化能力会比较弱。当然,小程序工程化也在不断探索阶段 - 小程序工程化探索

总结

无论使用Taro、uni-app还是原生开发,都可以实现小程序所有的功能。各方案主要的差异在于学习成本和开发体验。

由于本次开发主要是IOS移动端的同事,框架的一些优势(React / Vue生态、前端开发工程化等)不能有很大的体现,且小程序发展了几年,技术上也逐步成熟(支持组件化、模块化),使用原生开发一个相对复杂的小程序应用也没什么大问题,最终建议使用微信原生开发小程序。关于微信小程序原生开发细节可以下一篇文章:微信小程序原生开发工程化解决方案

文章分类
前端
文章标签