前言

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

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

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

 

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

從我們的了解來看，目前小程序市場，大部分還是微信小程序應用，其次是支付寶小程序，百度小程序。對這幾端的融合也是目前比較切合需求場景的需求?；诖耍覀冋{(diào)研了從微信小程序到其它端的轉換的情況，幫助大家了解如何快速實現(xiàn)微信小程序到其它小程序的遷徙。

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

Antmove 小程序轉換器

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

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

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

taro

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

Github: github.com/NervJS/taro…

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

不足

• 需要進行兩次轉換才能可以得到對應平臺的代碼

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

• 轉支付寶：

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

• 轉百度小程序

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

• 轉頭條小程序

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

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

總結

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

uniapp

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

Github： github.com/dcloudio/un…

微信小程序轉換 uniapp 代碼指南

總結

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

mpx

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

結論

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

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

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

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

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

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

存在的問題

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

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

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

• 各大廠商采用自己的小程序技術框架，難以進行標準化
• 小程序會自帶廠商基因，能力差異化

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

展望未來

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

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

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

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

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

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