一套代码搞定微信、支付宝、百度三端小程序（跨端调研）

前言

　　微信、支付宝、百度三端的小程序，使用传统的开发方式，需要分别开发三套代码；而此次调研的目的是为了追求一套代码跨平台开发三端小程序的方案。

  

附

　　微信小程序-开发者平台官网：　　https://developers.weixin.qq.com/miniprogram/dev/framework/

　　支付宝小程序-开发者平台官网：　https://opendocs.alipay.com/mini/introduce

　　百度小程序-开发者平台官网：　　https://smartprogram.baidu.com/docs/introduction/enter_application/

 

跨端调研的步骤：

1. 收集有哪些框架支持？
2. 各个框架的了解？
3. 从不同方面比较这些框架，并得出结论，哪种更适合？

 

一、支持跨端的方案主要有以下几种

1. 滴滴跨端框架 - Chameleon
2. 京东跨端框架 - Taro
3. 极客dcloud - uni-app
4. 网易 - melago      　　//官网 https://megalojs.org 挂了
5. 百度 - okam
6. 美团 - mpvue　　// 两年没更新了，是熄火了，而且有 uni-app 它也没必要搞了

  

注释：有些只能支持一端小程序，却能支撑web/app/h5的不在此调研范围。

 

 二、框架简介

 1. Chameleon

 CML (Chameleon) 是一个跨多端开发的统一解决方案，它可以像变色龙一样适应不同的环境。一次开发，多端运行，一端所见即多端所见。

支持H5端/weex/微信小程序/支付宝小程序/百度小程序/qq小程序/字节跳动小程序/快应用。

CML 还支持类 VUE 语法，让你更快入手。

 

（1）开发文档：参考官网（https://cml.js.org/docs/）  

（2）开发工具：（详见官网起步）。

（3）编译预览及发行打包 ：（详见官网起步）。

  

2. Taro   

  Taro 是一个开放式跨端跨框架解决方案，支持使用 React/Vue/Nerv 等框架来开发 微信 / 京东 / 百度 / 支付宝 / 字节跳动 / QQ / 飞书 小程序 / H5 / RN 等应用。

 开发框架支持： React / Vue / Vue3 / Nerv 开发。

  

（1）开发文档：参考官网（https://taro-docs.jd.com/taro/docs/README） 

（2）开发工具：推荐使用 VSCode 或 WebStorm（或其它支持 Web 开发的 Jetbrains IDE）。

（3）编译预览及发行打包 

　　　　创建与预览：https://baijiahao.baidu.com/s?id=1678639764373147802&wfr=spider&for=pc 

　　　　　　（不同端之间的差异参考：https://github.com/smx5555/taro） 

　　　　打包发布流程：（与上种雷同，都是打开各自的小程序开发工具处理）

  

3. uni-app

 在2019新年到来之际，uni-app 1.4版本正式发布，可发布小程序（微信/支付宝/百度）、H5、App（iOS/Android）6大平台！

 uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台。

 

（1）开发文档：参考uni-app官网（https://uniapp.dcloud.io/quickstart?id=%E9%80%9A%E8%BF%87-hbuilderx-%E5%8F%AF%E8%A7%86%E5%8C%96%E7%95%8C%E9%9D%A2）

（2）开发工具：HBuilderX  

（3）编译预览及发行打包

　　(a) 微信小程序

　　　　创建与预览：https://jingyan.baidu.com/article/066074d684826782c31cb001.html

　　　　打包发布流程：https://blog.csdn.net/weixin_43638968/article/details/109119697 

　　(b) 支付宝小程序

　　　　创建与预览：https://baijiahao.baidu.com/s?id=1678418990422577878&wfr=spider&for=pc

　　　　打包发布流程：与微信小程序类似，编译预览之后，也可以在支付宝开发工具中发布。 

　　(c) 百度小程序 （与上两种类似，略）　　　　

 

4. okam

 一个面向小程序开发的开发框架，提供类 Vue 的开发体验。

 

（1）开发文档：参考官网（https://ecomfe.github.io/okam/#/）

（2）开发工具：推荐使用 VSCode 或 WebStorm（或其它支持 Web 开发的 Jetbrains IDE）。 

（3）编译预览及发行打包

　　编译预览：

• 下载开发者工具
• 打开开发工具，打开项目目录：开发工具 -> 打开 -> 项目Root/dist
• 等待开发工具编译，就可以看到预览效果

  

 

 三、比较与结论

 1. 亲身调研，可以淘汰okam，taro与uni-app比较突出。

 

 

2. 根据《小程序跨端框架全面测评》：https://github.com/dcloudio/test-framework

综合对比：uni-app > taro > chameleon 

但是，这本来就是dclound自己的测评，保有怀疑。

 

3. 根据博客：小程序多端框架全面测评：chameleon、Taro、uni-app、mpvue、WePY

https://www.cnblogs.com/fundebug/p/compare-wechat-app-frameworks.html

 综合对比：uni-app 和 Taro综合起来更加突出。

 

 4. 根据知乎文评：Taro 和 uni-app选型对比

https://zhuanlan.zhihu.com/p/64183231

  综合对比：uni-app 比 Taro 更加突出。

 

综上所述，uni-app可以作为小程序跨端开发的首选！