一套代碼搞定微信、支付寶、百度三端小程序（跨端調研）

前言

　　微信、支付寶、百度三端的小程序，使用傳統的開發方式，需要分別開發三套代碼；而此次調研的目的是為了追求一套代碼跨平台開發三端小程序的方案。

  

附

　　微信小程序-開發者平台官網：　　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可以作為小程序跨端開發的首選！