1. 微信小程序原生开发方式的痛点
- 工程化能力弱，现代前端开发流程体验较差
- npm： 部分支持，且需要借助微信开发者工具构建
- 样式预处理器：不支持，只能用wxss
- ES6+语法：部分支持
- 状态管理：不支持
- 模板、样式和js代码分到了三个文件
- 尴尬的”四不像”语法
需要学习其特有的语法，有一定的学习成本。
- 不支持多端
一次编写，一端执行。如有其它端需求，需要多写一套代码。
- 开发工具
微信开发者工具 vs 其它专业的IDE
2. 原生开发 vs 第三方开发框架
| 微信小程序 | wepy[wepi] | mpvue | uni-app | Taro[tɑ:roʊ] | kbone | |
|---|---|---|---|---|---|---|
| 基本信息 | 微信小程序腾讯 | 小程序组件化开发框架腾讯 Github Stars：21.6k | 使用vue.js开发小程序的框架美团点评 Github Stars：20.4k | 使用 Vue.js 开发所有前端应用的框架DCloud Github Stars：34.6k | 多端统一开发解决方案京东 Github Stars：30.1k | 微信小程序和 Web 端同构的解决方案腾讯 Github Stars：4.1k |
| 特性(官方) | wxml+wxss+js小程序组件（自有）API&&组件丰富强大的能力原生体验... | 类vue.js开发风格****对微信小程序原有能力的封装和优化支持npm支持 Vue watch/computed/mixin 等特性支持less/sass等预编译... | 完整的vue.js开发体验H5代码转换编译成小程序代码的能力组件化开发能力支持npm支持状态管理vuex... | vue语法+微信小程序api条件编译性能体验优秀支持多端周边生态丰富... | 跨端跨框架(Taro3)双向转换现代前端开发流程体验与react完全一致的API和组件系统丰富的研发生态和业务生态... | 提供适配器的方式来实现同构大部分流行的前端框架都能够在 kbone 上运行，比如 Vue、React、Preact 等提供了常用的 dom/bom 接口，让用户代码无需做太大改动便可从 Web 端迁移到小程序端。 |
| 语法 | 小程序语法 | 类vue.js | vue.js | vue.js | react.js、vue.js | - |
| CLI | - | @wepy/cli | @vue/cli | @vue/cli | @tarojs/cli | kbone-cli |
| helloworld | 微信开发工具 | wepy init standard xxx | vue init mpvue/mpvue-quickstart xxx | HbuilderX 或 vue create -p dcloudio/uni-preset-vue xxx | taro init xxx | kbone init xxx |
| 多端支持 | 仅微信小程序 | 仅微信小程序 | 部分端小程序、h5 | 各端小程序、h5、web等 | 各端小程序、h5、ReactNative等 | web端、微信小程序 |
| API使用方式 | wx.request() | wx.request() | mpvue.request() | wx.request()或uni.request() | Taro.request() | wx.request() |
| 性能 | 理论上，原生开发性能最佳第三方开发框架性能有差异但不大，基本都可以满足绝大部分业务场景如遇到性能问题，可根据实际的场景，具体代码，具体分析，具体优化性能测评demo： github.com/dcloudio/te… （测评结果：微信原生开发手工优化，uni-app > 微信原生开发未手工优化，taro > wepy > mpvue） |
3. 原生开发 vs wepy
wepy是类 Vue 语法的开发框架，是对小程序原有能力的封装和优化。使用wepy框架，编译转化后最终的产出是小程序代码。原生开发和wepy的主要不同点（语法）如下：
| 模板语法 | setData | 计算属性和侦听器 | 事件 | 样式 | 组件 | |
|---|---|---|---|---|---|---|
| 微信小程序 | <view wx:if="{{ condition }}"> | this.setData({ msg: 'helloworld’ }) | 不支持 | 点击test | wxss | 小程序组件规范 |
| wepy | <view v-if="condition"> | this.msg = ''helloworld' | 支持 | <text @tap="testClick(123)">点击test | less、sass等 | 类vue组件规范 |
4. wepy vs mpvue
mpvue框架基于 Vue.js，修改了的运行时框架 runtime 和代码编译器 compiler 实现，使其可运行在小程序环境中，从而为小程序开发引入了 Vue.js 开发体验。
![]( "运配及送装系统研发部-前端 > 开发框架 > image2021-11-28_15-48-29.png")
两者都是vue语法，框架编译转换后最后产出都是小程序代码，主要不同点如下：
- wepy是类vue开发风格，而mpvue是完全的vue开发体验（mpvue支持状态管理vuex）
- wepy的设计初衷是让熟悉vue的开发者可以低成本的去开发微信小程序，而mpvue侧重于将已有的H5代码转换编译成小程序的能力
- wepy仅支持开发微信小程序，而mpvue除了可以输出h5外，还支持转换成部分端的小程序
- wepy由内建构建系统构建，而mpvue由webpack来构建
5. uni-app vs Taro
uni-app和Taro都是较为优秀的多端统一开发解决方案，支持一次编写，多端执行。
uni-app功能框架图
taro编译流程
首先是 parse，将代码 解析（Parse）成 抽象语法树（Abstract Syntex Tree），
然后对 AST 进行 遍历（traverse）和 替换(replace)（这对于前端来说其实并不陌生，可以类比 DOM 树的操作），
最后是 生成（generate），根据新的 AST 生成编译后的代码
![]( "运配及送装系统研发部-前端 > 开发框架 > image2021-11-29_0-46-57.png")
6. kbone又是啥
wechat-miniprogram.github.io/kbone/docs/…
kbone提供了一个 webpack插件，该插件在 vueLoaderPlugin处理后继续处理 chunk，添加小程序端特定方法的封装，以及 window和 document的注入，小程序端配置的注入
7. 如何选择
如果有较为苛刻的性能要求，优先选择原生开发。其它情况可按如下方式选择（仅供参考）。
8. 总结
第三方框架是使用一定的性能损耗来换取更为全面的多端特性支持
没有哪个框架能100%保证完美转译成小程序的
每个框架都有自己的优劣，不存在能够完美解决所有问题的框架
开发小程序，第三方框架要去了解，原生开发更要精通
\
