Comparison of multi-end integration framework of mini program

[mominger]

The upper part is the English version, and the lower part is the Chinese version, with the same content. If there are any wrong, or you have anything hard to understand, especially in the English version(it is modifications based on Google Translate), pls feel free to let me know.many thx.

Why do you need multi-end integration

• The cost of customized research and development for different end is very high. At present, the mini program platforms with large traffic include WeChat, Alipay, Toutiao, Baidu... They have their own API and compatible features.
• The current mainstream front-end technology stack is Vue/React. The native development of mini program is quite different from these two.
• Embedded webview and running H5's general solution will greatly reduce the operational fluency (especially calling device functions) and performance optimization (reducing http requests, front-end cache...), and it does not support all the functions of the mini program. For example, JS and UI threads are mutually exclusive in H5's web platform, while small programs are parallel. For example, a small program can obtain device informationn (Bluetooth, battery, NFC...), H5 does not directly support it. The embedded H5 and the mini program cannot communicate friendly at present. To call the mini program api, such as payment, needs to jump back to the mini program.

Conclusion: Need a framework that adopts mainstream technology stack (Vue/React), supports use in multi-end, can be compiled into small program native language, and is convenient for programmers to develop efficiently

Comparison of integration frameworks on the market

1. Popularity

popularity	Taro	Kbone	Uni-app	MpVue	Wepy
github starts	28k	3.7k	28.9k	20.2k	21k

Statistics data in 2021.1.2
Github starts below 10K are not considered
Additional inspect the Kbone released by Tencent in 2020

2. R&D team

Type	Company	Official Website	Details
Taro	Jingdong aotu Lab	https://Taro.aotu.io/
Kbone	Tencent official	https://developers.weixin.qq.com/community/minihome/mixflow/1213301129006825473	2020-02-26 Launched in open source form
Uni-app	Dloud	https://uniapp.dcloud.io/	In September 2014, Zhongguancun Xingye invested 12 million RMB in A round of financing. Now it has B2 round
MpVue	Front-end of Meituan Wine & Tourism Division	http://MpVue.com/
Wepy	Tencent team (unofficial)	https://Wepyjs.gitee.io/Wepy-docs/

3. Multi-end use

Platform	Taro	Kbone	Uni-app	MpVue	Wepy
WeChat Mini Program	✔	✔	✔	✔	✔
Alipay Mini Program	✔		✔	✔
Baidu Mini Program	✔		✔	✔
Toutiao Mini Program	✔		✔	✔
H5	✔		✔	✔

4. Use case

Type	Case	Case Address
Taro	京东购物(微信) 淘票票(微信、百度) 猫眼电影(H5) 货拉拉(支付宝)	https://github.com/NervJS/Taro
Kbone	————	https://github.com/Tencent/Kbone
Uni-app	腾讯全民模拟炒股大赛(微信、H5) 华为荣耀亲选商城(微信、H5) 开源中国(微信、百度)、vivo商城官方(支付宝) 联想集团(微信)	https://uniapp.dcloud.io/case
MpVue	uscore足球(微信) 搞怪小圈圈(微信)	https://github.com/Meituan-Dianping/MpVue
Wepy	腾讯疫苗查询小程序、 腾讯翻译君小程序、 腾讯地图小程序、 玩转故宫小程序、 手机充值+、 手机余额查询、 手机流量充值优惠、 友福图书馆（开源）、 素洁商城（开源）	https://github.com/Tencent/Wepy

All of them are the first few on the display case. For more cases, please open the case address and check
Kbone may be unstable due to the new launch in 2020, no case has been announced yet
Taro uses more than Uni-app in large Internet companies
MpVue is very strange, the first QR code has been disabled, the first few are small companies, very simple mini programs
Wepy are all WeChat mini program

5. Language Features

Type	Language	IDE
Taro	React, compatible with Vue, etc.
Wepy	Vue
Uni-app	Vue	HBuilderX
Kbone	Vue, compatible with React

Only Uni-app has a customized IDE. Others can only use general IDE tools (such as VSCode WebStorm, etc.)

6. Releases log

Type	Recent releases
WeChat Mini Program Basic Library	v2.14.3 (2021-01-05) v2.14.1 (2020-12-05) v2.14.0 (2020-10-23)
Taro	(2020-10-21) 1.3.45 (2020-06-15) 1.3.44 (2020-05-19)
Kbone	2021-1.22 released every week
Uni-app	3.0.5.20210107 3.0.4.20201231 2.9.8.20201110
MpVue	2018.8.10 2018.7.30 2018.7.24
Wepy	2.1.0 (2020-07-04) 2.1.0-alpha.11 (2020-06-21)

WeChat Mini Program release log https://developers.weixin.qq.com/miniprogram/dev/framework/release/
Taro release log https://github.com/NervJS/Taro/blob/master/CHANGELOG.md
Kbone release log https://github.com/Tencent/Kbone/releases
Uni-app release log https://uniapp.dcloud.io/release
MpVue release log http://MpVue.com/change-log/
MpVue is no longer updated from 2018
Wepy release log https://github.com/Tencent/Wepy/releases

7. Conclusion

• From the release log, MpVue has stalled

• Wepy official website is in free gitee website, and only supports WeChat mini program

• Tencent's official Kbone have launched in 2020, no use cases have been seen

• Taro and Uni-app are still quite active, and the cases are also quite rich. Both support multi-end, and also come with an official ui library (uni-ui、Taro-ui) adapted to multi-end

• Based on our company is a foreign company, foreign companies generally use React technology stack, and our company is currently also React technology stack,and considering that React(React-native) is also one of the best choices for developing apps,so Taro(React) is the most suitable.

The following is the Chinese version, the same content as above.

为何需要多端合一

• 针对不同端定制研发的成本非常高昂，目前流量大的小程序平台有微信、支付宝、头条、百度....它们有各自的API和兼容特性。
• 目前主流的前端技术栈是vue react两种。小程序的原生开发与这两种差异较大。
• 嵌入webView，运行H5的通用方案，则在流畅性上(尤其调用设备功能)以及性能优化(减少http请求、缓存...)大打折扣，且不支持小程序的所有功能。如H5 的web平台JS和UI线程互斥，而小程序是并行。如小程序获取设备信息(蓝牙、电量、NFC..)，H5不直支持。 内嵌的H5和小程序目前无法友好地通信，调用小程序的能力，比如支付，需跳回小程序。

结论: 需要一种采用主流技术栈(Vue/React)，支持将来可以扩展到多端，能编译成小程序原生语言，方便程序员高效研发的框架

市面上各融合框架对比

1. 热门程度

热门	taro	kbone	uni-app	mpvue	wepy
github starts	28k	3.7k	28.9k	20.2k	21k

截止到2021.1.22
starts低于10K的不考虑
额外考虑腾讯官方2020年推出 的kbone

2. 研发团队

类型	公司	官网	详述
taro	京东凹凸实验室	https://taro.aotu.io/
kbone	腾讯官方	https://developers.weixin.qq.com/community/minihome/mixflow/1213301129006825473	2020-02-26开源形式推出
uni-app	Dloud	https://uniapp.dcloud.io/	2014年9月获中关村兴业投资1200万人民币A轮融资 目前已B2轮
mpvue	美团酒旅事业部前端	http://mpvue.com/
wepy	腾讯团队(非官方)	https://wepyjs.gitee.io/wepy-docs/

3. 多端复用

平台	taro	kbone	uni-app	mpvue	wepy
微信小程序	✔	✔	✔	✔	✔
支付宝小程序	✔		✔	✔
百度小程序	✔		✔	✔
头条小程序	✔		✔	✔
H5	✔		✔	✔

4. 使用案例

类型	案例	案例地址
taro	京东购物(微信) 淘票票(微信、百度) 猫眼电影(H5) 货拉拉(支付宝)	https://github.com/NervJS/taro
kbone	————	https://github.com/Tencent/kbone
uni-app	腾讯全民模拟炒股大赛(微信、H5) 华为荣耀亲选商城(微信、H5) 开源中国(微信、百度)、vivo商城官方(支付宝) 联想集团(微信)	https://uniapp.dcloud.io/case
mpvue	uscore足球(微信) 搞怪小圈圈(微信)	https://github.com/Meituan-Dianping/mpvue
wepy	腾讯疫苗查询小程序、 腾讯翻译君小程序、 腾讯地图小程序、 玩转故宫小程序、 手机充值+、 手机余额查询、 手机流量充值优惠、 友福图书馆（开源）、 素洁商城（开源）	https://github.com/Tencent/wepy

都是取其展示案例上的前几个，更多案例可以去案例地址查询
kbone 可能由于2020新推出，不稳定，还未公布案例
taro 在互联网大企业的使用上明显强于 uni-app
mpvue 很奇怪，第一个二维码已停用了，前几个均是小公司，极简陋的小程序
wepy 都是微信小程序

5. 语言特征

类型	语言	IDE
taro	taro3 React,兼容Vue等
wepy	Vue
uni-app	Vue	HBuilderX
kbone	Vue,兼容React

仅uni-app 有定制的IDE。其他只能采用通用的IDE工具(如 VSCode WebStorm等)

6. 现状

类型	最近几次发版
微信小程序基础库	v2.14.3 (2021-01-05) v2.14.1 (2020-12-05) v2.14.0 (2020-10-23)
taro	(2020-10-21) 1.3.45 (2020-06-15) 1.3.44 (2020-05-19)
kbone	2021-1.22 每周均有发版
uni-app	3.0.5.20210107 3.0.4.20201231 2.9.8.20201110
mpvue	2018.8.10 2018.7.30 2018.7.24
wepy	2.1.0 (2020-07-04) 2.1.0-alpha.11 (2020-06-21)

微信小程序发版日志 https://developers.weixin.qq.com/miniprogram/dev/framework/release/
taro 发版日志 https://github.com/NervJS/taro/blob/master/CHANGELOG.md
kbone 发版日志 https://github.com/Tencent/kbone/releases
uni-app 发版日志 https://uniapp.dcloud.io/release
mpvue 发版日志 http://mpvue.com/change-log/
mpvue 从2018开始不再更新版本
wepy 发版日志 https://github.com/Tencent/wepy/releases

7. 结论

• 从发版本来看 mpvue 已陷入停滞

• wepy 官网在免费的gitee，且仅支持微信小程序

• 腾讯官方的kbone 2020年推出，目前出于密集(每周)发版的状态，还未看到使用案例

• taro uni-app 仍很活跃，案例也非常丰富。两者支持多端，还自带适配多端的官方ui库(uni-ui taro-ui)

• 基于我司是外企，外企(海外)普遍都是React技术栈，且公司目前也是React技术栈。以及考虑到将来做app会采用React.因此，taro(react)最合适。