前言
由于公司业务需要，近期将要进行微信小程序的开发。本次调研主要目的是确认小程序的开发框架，网上一顿乱搜，最后筛选出比较主流的两个框架 Taro 和 uni-app，这两个框架的出现让开发者可以使用前端的框架（React / Vue）开发多端应用（小程序、H5、移动端），但由于参与开发的有 IOS 和 前端 的同事，本文将对比下 Taro 、 uniapp、微信小程序原生开发三种方案。
是否有跨端需求？
当前的业务需求是开发一个联合办公智能管理系统，支持门禁二维码扫码、会议室预定、个人账户管理等功能的小程序，之后是否要做成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 | 丰富 | 活跃 |
| Taro | React/Vue/Nerv | 不支持 | 微信/QQ/支付宝/百度/头条小程序、H5、App端 | 基础文档完整，具体使用问题资源较少，问题搜索效果一般，示例demo只包含基础功能，仅发布了微信一端。 | 丰富 | 活跃 |
| uni-app | Vue | 支持 | 微信小程序 | 文档丰富，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。
-
工程化：
- 框架开发提供了精简的代码组织，微信原生开发，一个Page由4个文件构成，稍微有点繁琐。
- 框架开发和微信原生都支持组件式开发，也有相应的组件库。
- 框架开发和微信原生都支持模块化开发，但微信原生目前不支持直接引入 node_modules , 开发者需要使用到 node_modules 时候建议拷贝出相关的代码到小程序的目录中，或者使用小程序支持的 npm 功能。
- 框架开发和微信原生都支持引入一些好用的状态管理库（类Vuex/Redux/Mobx等），微信原生使用 globalData 也可实现基本的数据管理。
- 框架开发能灵活支持各种 Sass 等 预处理器， 小程序要使用sass的话需要在每个页面下新建.scss文件，使用Gulp构建工具将.scss文件转化成.wxss，比较麻烦。
- 框架开发和微信原生都支持Typescript，配合tsconfig.json也有较好的语法检查。
- 框架开发对Node、预编译器、webpack支持度好，有益于开发效率和工程构建流程，相反微信原生的工程化能力会比较弱。当然，小程序工程化也在不断探索阶段 - 小程序工程化探索。
总结
无论使用Taro、uni-app还是原生开发，都可以实现小程序所有的功能。各方案主要的差异在于学习成本和开发体验。
由于本次开发主要是IOS移动端的同事，框架的一些优势（React / Vue生态、前端开发工程化等）不能有很大的体现，且小程序发展了几年，技术上也逐步成熟（支持组件化、模块化），使用原生开发一个相对复杂的小程序应用也没什么大问题，最终建议使用微信原生开发小程序。关于微信小程序原生开发细节可以下一篇文章：微信小程序原生开发工程化解决方案。
