前言

微信推出小程序平臺以來，國內(nèi)各大公司陸續(xù)跟進(jìn)，帶來了小程序的繁榮。從開發(fā)者的視角，我們看到小程序開發(fā)者變多，各種小程序技術(shù)方案不斷出現(xiàn)。

• 小程序增強(qiáng)型開發(fā)框架的出現(xiàn)
• 小程序原生框架能力擴(kuò)充，典型的有 wepy/mpvue
• 小程序跨端開發(fā)框架的出現(xiàn)
  * 通過編寫一套代碼，實(shí)現(xiàn)多個小程序平臺運(yùn)行，典型的有 taro/uniapp
• 小程序與 web/native（app）融合的技術(shù)需求出現(xiàn)
  * 因 小程序/web/native 平臺差異較大，雖然有許多框架進(jìn)行了嘗試，但還處于蠻荒時代，未出現(xiàn)得到一致認(rèn)可的方案

而這繁榮的背后也顯得雜亂，影響開發(fā)者選擇適合的技術(shù)方案。基于此，我們做了一次小程序跨平臺開發(fā)方向的調(diào)研，并得出如下建議：

 

原生小程序如何實(shí)現(xiàn)多平臺投放？

從我們的了解來看，目前小程序市場，大部分還是微信小程序應(yīng)用，其次是支付寶小程序，百度小程序。對這幾端的融合也是目前比較切合需求場景的需求。基于此，我們調(diào)研了從微信小程序到其它端的轉(zhuǎn)換的情況，幫助大家了解如何快速實(shí)現(xiàn)微信小程序到其它小程序的遷徙。

說明： 以下測試結(jié)果基于微信官方微信小程序 demo 調(diào)研而得

Antmove 小程序轉(zhuǎn)換器

• 官網(wǎng)：ant-move.github.io/guide/
• Github：github.com/ant-move/An…

Antmove 是目前小程序轉(zhuǎn)換開源解決方案里成熟度最高的，通過 Antmove 轉(zhuǎn)換器，可以一鍵將微信小程序轉(zhuǎn)換為其它平臺小程序，也可以將支付寶小程序轉(zhuǎn)換為其它平臺小程序，目前還在持續(xù)維護(hù)更新。

基于 Antmove 的多端開發(fā)相關(guān)介紹可以從這里了解

taro

介紹：Taro 是一套遵循 React 語法規(guī)范的 多端開發(fā) 解決方案。

Github: github.com/NervJS/taro…

Taro 本質(zhì)上是一套自定義語法的跨端開發(fā)方案，但官方提供了微信小程序轉(zhuǎn)換為 taro 代碼的工具，基于此，用戶可以借助于 taro 將微信小程序轉(zhuǎn)換為 taro 代碼，然后再將其轉(zhuǎn)換為對應(yīng)平臺的小程序代碼。

不足

• 需要進(jìn)行兩次轉(zhuǎn)換才能可以得到對應(yīng)平臺的代碼

• 功能支持情況不是很理想，如下為將微信小程序官方 demo 轉(zhuǎn)換為 taro，再轉(zhuǎn)換其它平臺的測試情況

• 轉(zhuǎn)支付寶：

  • 目前轉(zhuǎn)碼后點(diǎn)擊事件失效，轉(zhuǎn)碼后框架上函數(shù)有報錯，邏輯需要重新寫
  • setData函數(shù)運(yùn)行失敗，項(xiàng)目沒辦法使用

• 轉(zhuǎn)百度小程序

  • 界面（不支持，需要修改的）
    • flex相關(guān)樣式設(shè)置失敗
    • button報錯，getLaunchOptionsSync沒有處理
    • map
    • 顯示隱藏指南針
    • 開啟俯視功能
  • 接口（不支持，需要修改的）
    • 登陸
    • 支付
    • 客服消息
    • 生物認(rèn)證
    • 藍(lán)牙
    • iBeacon
    • 搜索WIFI
    • 上傳視頻和圖片
    • 動態(tài)加載字體
    • 儲存數(shù)據(jù)報錯
    • 多線程計算

• 轉(zhuǎn)頭條小程序

  • 目前轉(zhuǎn)碼后點(diǎn)擊事件失效，轉(zhuǎn)碼后框架上函數(shù)有報錯，邏輯需要重新寫
  • setData函數(shù)運(yùn)行失敗，項(xiàng)目沒辦法使用

注： 目前轉(zhuǎn)碼工具初始化微信小程到taro代碼會有圖片路徑處理錯誤，需要手動修改一下

總結(jié)

• 工具整體體驗(yàn)流暢，其設(shè)計核心是用react語法使用工具提供的API和組件完成項(xiàng)目開發(fā)，然后一鍵生成多端小程序
• 目前對原生小程序（微信）轉(zhuǎn)到taro的問題比較多，但是整體能夠完成轉(zhuǎn)碼，只是轉(zhuǎn)碼后需要花費(fèi)一定的精力重新處理各種問題

uniapp

介紹： uni-app 是一個使用 Vue.js 開發(fā)所有前端應(yīng)用的框架，開發(fā)者編寫一套代碼，可發(fā)布到iOS、Android、H5、以及各種小程序（微信/支付寶/百度/頭條/QQ/釘釘）等多個平臺

Github： github.com/dcloudio/un…

微信小程序轉(zhuǎn)換 uniapp 代碼指南

總結(jié)

• 需要手工將微信小程序改造成 uniapp 應(yīng)用
• 非官方版本有一個轉(zhuǎn)換工具，但轉(zhuǎn)換不理想，測試微信官方 demo 轉(zhuǎn)換報錯
• 單純開發(fā)多端小程序這個框架還是比較好用的，但是轉(zhuǎn)碼微信小程序沒有一鍵轉(zhuǎn)碼功能，需要手動配置大量的文件，其開發(fā)成本比較高

mpx

介紹：相同風(fēng)格的語言開發(fā)開發(fā)多端小程序的開發(fā)框架，語言風(fēng)格類似小程序，支持雙向數(shù)據(jù)綁定 Github：github.com/didi/mpx.gi…

結(jié)論

• 不同的小程序需要搭建不同的開發(fā)環(huán)境，并做好相應(yīng)的配置，
• 不支持原生小程序轉(zhuǎn)換，但支持使用原生小程序組件/頁面，對于完整的小程序轉(zhuǎn)換成本較高

說明：除了 Antmove 轉(zhuǎn)換器外，其它方案解決方案的初衷是基于 react/vue 或自定義語法的角度來實(shí)現(xiàn)多端，所以微信小程序轉(zhuǎn)換到多端這一轉(zhuǎn)換流程并不包含來這些框架的所有能力和優(yōu)勢，對于原生小程序遷移到其它平臺本文調(diào)研結(jié)果可以參考。

非小程序語法多端方案對比

這里主要指采用非小程序語法開發(fā)小程序應(yīng)用。 非小程序語法開發(fā)業(yè)務(wù)代碼方案已有諸多的調(diào)研和說明，可參考如下鏈接：

• 小程序開發(fā)：用原生還是選框架（wepy/mpvue/uni-app/taro）？
• Chameleon
• 深入測試一周，主流多端框架大比武~by DCloud

關(guān)于小程序跨平臺開發(fā)的看法

存在的問題

從上面我們可以看到隨著小程序的繁榮，跨端融合這個概念被提得越來越多，也出現(xiàn)了許多解決該問題的框架。但這真的代表著跨端開發(fā)的繁榮嗎？

我覺得還不是，小程序和 web，小程序和 native app存在著天然的差異化，這是很難彌補(bǔ)的，雖然社區(qū)上有出現(xiàn)了很多的方案，但都還不能說成熟。

只考慮小程序這一平臺，差異性會小一點(diǎn)，但想做到完全的一套代碼，多個小程序平臺運(yùn)行還是很難。這里有以下幾個原因：

• 各大廠商采用自己的小程序技術(shù)框架，難以進(jìn)行標(biāo)準(zhǔn)化
• 小程序會自帶廠商基因，能力差異化

雖然有如上的差異，但依然小程序間的跨平臺還是看到了一定的可能性，這也是目前小程序跨端方案出現(xiàn)這么多的原因。

展望未來

雖然上面提及了跨平臺開發(fā)的不足，但其優(yōu)勢依然存在，一套代碼多處運(yùn)行充滿了誘惑。當(dāng)我們將全端的要求降低，只考慮某些平臺的情況下，已經(jīng)出現(xiàn)了較為成熟的方案。

大多數(shù)情況下其實(shí)我們需要的只是某一端或是幾端的融合，在 taro 的統(tǒng)計示例中我們可以發(fā)現(xiàn)，微信小程序應(yīng)用占比達(dá) 90%，即大多數(shù)的應(yīng)用只用 taro 開發(fā)了微信小程序。uniapp 也提到絕大多數(shù)應(yīng)用只用其來開發(fā)其中一端的應(yīng)用。在 Antmove 的統(tǒng)計中，絕大部分的用戶也只是微信小程序和支付寶小程序兩端的融合要求。

在小程序之前，多端融合就已經(jīng)被提及推出，在前端領(lǐng)域中，react 在這方面做得比較成功。在 react 學(xué)習(xí)一遍，即可多處編寫的理念下，較低成本的實(shí)現(xiàn)了多端的需求，如 react-web/react-native/react-sketch 等，也因此構(gòu)建了豐富的 react 生態(tài)。

除了 react 體系外，如下的方案則切實(shí)的實(shí)現(xiàn)了某些平臺的跨端

• flutter - 高性能移動端跨平臺框架
• electron - PC 應(yīng)用跨平臺開發(fā)工具
• QT
• 小程序
  • taro/uniapp/Antmove/rax/mpx/cml

暢想未來，設(shè)備復(fù)雜化是個必然的趨勢，而這也更考驗(yàn)著跨端技術(shù)方案是否足夠成熟。