小程序技术框架方案分析

微信/支付宝小程序开发 主流框架对比

WEPY https://tencent.github.io/wepy/document.html

腾讯团队开源的一款类vue语法规范的小程序框架,借鉴了Vue的语法风格和功能特性,支持了Vue的诸多特征，比如父子组件、组件之间的通信、computed属性计算、wathcer监听器、props传值、slot槽分发，还有很多高级的特征支持：Mixin混合、拦截器等;WePY发布的第一个版本是2016年12月份，也就是小程序刚刚推出的时候，到目前为止，WePY已经发布了52个版本, 最新版本为1.7.2;

MpVue 使用手册 | mpvue.com

美团团队开源的一款使用 Vue.js 开发微信小程序的前端框架。使用此框架，开发者将得到完整的 Vue.js 开发体验，同时为 H5 和小程序提供了代码复用的能力。mpvue在发布后的几天间获得2.7k的star,上升速度飞起,截至目前为止已经有13.7k的star;

Mpvue最早诞生的目的有两点：

1. 想用Vue开发小程序
2. 希望现有的大量的H5页面可以转化成小程序代码

Taro Taro | 多端统一开发解决方案

京东凹凸实验室开源的一款使用 React.js 开发微信小程序的前端框架。它采用与 React 一致的组件化思想，组件生命周期与 React 保持一致，同时支持使用 JSX 语法，让代码具有更丰富的表现力，使用 Taro 进行开发可以获得和 React 一致的开发体验。,同时因为使用了react的原因所以除了能编译h5, 小程序外还可以编译为ReactNative;

如果是新项目且新项目需要同时支持微信小程序和支付宝小程序, 建议使用原生开发,因为目前框架的转译 支付宝小程序支持并不是很好,且出了问题不好定位修改, 但如果是小demo不涉及太多逻辑的项目都可以使用框架作为尝鲜; 但如果是涉及太多交互逻辑的则不建议使用框架转译,由于支付宝小程序在视图层基本与小程序一致所以建议手动更改替换部分方法和全局替换一些属性或文件名,如wxml替换为axml这种, 手动转换时间比大概是四比一; 当然如果人手足够一端开发一个是最好的...

Mpx https://github.com/didi/mpx

滴滴出品。滴滴是非常聪明的，Mpx诞生较晚，所以他走的路线和Taro、Mpvue不太一样。Taro和Mpvue属于编译型框架，完全使用React和Vue的生态开发。但Mpx不同，他很聪明的把Mpx定位成小程序的语法增强框架。换句话来讲，还是以原生小程序开发为主，但你可以使用Vue的一些高级特性。很聪明的做法。一是因为Mpvue在前，Mpx走同样的路线没有亮点；二是因为想去做到完美的的Vue编译小程序这要付出极高的维护成本，还不一定能完美解决。

以下摘自Mpx文档：

我们使用Vue中优秀的语法特性增强了小程序，而不是让用户直接使用vue语法来开发小程序，之所以采用这种设计主要是基于如下考虑：
转译型框架无法支持源框架的所有语法特性(如Vue模板中的动态特性或React中动态生成的jsx)，用户在使用源框架语法进行开发时可能会遇到不可预期的错误，具有不确定性
小程序本身的技术规范在不断地更新进步，许多新的技术规范在转译型框架中无法支持或需要很高的支持成本，而对于增强型框架来说只要新的技术规范不与增强特性冲突，就能够直接支持很清醒的团队，目前其他的几个框架对于小程序新特性的支持根本跟不上官方的更新速度。

Chameleon  https://github.com/didi/chameleon

滴滴跨终端解决方案。一端所见即多端所见——多端高度一致，无需关注各端文档。
跨端目标：虽然不同各端环境千变万化，但万变不离其宗的是 MVVM 架构思想，Chameleon 目标是让 MVVM 跨端环境大统一。
支持平台：web、微信小程序、支付宝小程序、百度小程序、android(weex)、ios(weex)、qq 小程序、字节跳动小程序、快应用、持续更新中

跟其他以上框架出入不大，使用人数较少，网上相关资料也比较少。
相关分析文档：小程序多端框架全面测评：chameleon、Taro、uni-app、mpvue、WePY_zhichaosong的博客-CSDN博客_多端开发

原生开发

优点：

1. 社区丰富，开发文档全面，遇到问题好查找资料，好解决；对官方API及一些开放组件调用比较契合。
2. 组件化、NPM、Promise、ES6、TypeScript微信官方均已支持。

缺点：

1. 对于一些之前没用过的朋友刚开始可能要花一段时间去了解它的语法和写法，框架结构和配置这些，但个人认为问题不大，基本上都能看得懂，只是前期开发效率快慢的问题。
2. 原生框架对第三方开发工具不太友好，对于一些熟悉之前开发工具的朋友可能要花一段时间去了解和适应，微信官方提供的微信开发者工具。
3. 不支持input双向绑定，需手动获取值赋值，不能使用 less、scss 等预编译器。

uni-app uni-app官网

优点：

1. 熟悉vue语法的话可以快速进行页面的开发和业务逻辑的书写。
2. 一套代码可在多端编译运行

缺点：

1. 开发社区没有原生的完善，一旦有坑，想解决就必须先懂原生开发，甚至回到原生开发文档，所以原生开发是绕不过的，况且踩坑工时量可能大于原生方式的学习量，所以不太推荐。
2. 文件代码要经过编译处理，性能体验上可能没有原生那么好。

个人总结：

如果要同时做微信和支付宝，考虑到开发效率和维护成本的话，建议使用uni-app，目前来说社区活跃度也还可以，对微信和支付宝部分未封装的特殊组件也可以直接调用，坑可以踩，担心的是，踩坑的同时不敢保证能够完全彻底的去解决一些疑难问题，能够快速找到相关资料和解决方案。

如果考虑稳定性和开发的丰富性，以及用户体验方面的东西，可以采用原生开发，学习成本也不会太大，支付宝和微信相似，时刻关注官方组件升级的变化，例如分享到朋友圈，长按识别二维码这些都是近期更新的。

个人回想之前在用原生开发的过程中，主要有两个不太舒服的点，熟悉了vue框架里面的less/scss语法，对于微信这种不支持的纯css书写方式感觉优点僵硬（上网查过暂不支持，后续未知）。还有就是开发工具这块，没有之前使用IDE那么流畅和熟练，但好处是集成了在线预览编译打包上传提交这些功能，还有云开发，感觉还是比较全面。所以不舒服的也就可以忽略了。