開源｜wwto：小程序跨端遷移解決方案——微信轉其他小程序

2020-09-05 58技術

開源項目專題系列

（二）

1.開源項目名稱：wwto

2.github地址：

https://github.com/wuba/wwto

3.簡介：wwto是58同城推出的一種小程序跨端遷移解決方案，可以近乎零成本將微信小程序轉為其他小程序，提升開發效率、降低維護成本。目前已經投入了我們的生產環境中使用，包括微聊、雲帳號。


wwto於2020年3月份開源，具備以下特點：

  • 轉換鏈路為「微信小程序 —> 其他小程序」（支付寶小程序、百度小程序、頭條小程序）；
  • 編譯時轉換syntax語法：wwto會在編譯時將語法結構等集中處理，轉換為目標小程序的語法結構。
  • 運行時轉換API：目標小程序運行時加載API適配器，抹平小程序間差異。
  • linter檢查工具：提供檢驗規則，發現目標小程序不支持的語法或特性，提醒兼容性問題。
  • 支持插件轉換：在支持小程序轉換的同時，支持插件轉換；
  • CLI功能：支持命令行CLI，方便易用；
  • 命令行執行進程顯示日誌。


為什麼需要wwto

在微信小程序的大火大熱背景下，各大網際網路公司相繼加入小程序流量混戰，陸續推出了自己的小程序平臺。但目前開發者面臨了困境：各個大廠的小程序均有自己的語法結構、API體系等，開發者需要把同一個應用分別開發N次，效率低下，在不同平臺間迭代功能繁瑣。

為了提升開發效率、改善開發體驗，以58 TEG技術實力，開發了一整套小程序遷移解決方案， 取名wwto( wuba wechat mini-program to other mini-program)。一套代碼、多端適用，為業務方賦能，用技術手段造福小程序開發者。

對比業界現有微信轉其他小程序的工具antmove，wwto不僅支持小程序的轉換，還支持插件的遷移。對比多端統一開發框架taro，wwto無需引入框架和框架帶來的風險，比如更新維護比原生小程序團隊滯後甚至停滯、框架支持不了但原生小程序能支持的功能、性能肯定也會有損耗、額外的學習成本等。


項目架構

wwto分為3層結構：編譯層、運行層和集成層，架構圖如下所示：

1. 編譯層

編譯層：將微信小程序語法結構集中處理，編譯成目標小程序的語法體系。

流程圖如下：

2. 運行層

運行層：以微信小程序的API為基準分別適配目標平臺的API，抹平不同小程序之間的差異。

適配規則：

1. 微信擁有的API，但其他平臺沒有對應的情況：由於平臺之間的不兼容，降級為空方法；

2. 其他平臺和微信接受的參數名不同，做參數映射；

3. 其他平臺和微信API的返回值不同，做結果封裝或結果映射；

4. 一樣的API不作處理。

適配過程：

首先，小程序內部全局對象替換為對應平臺的全局對象；其次，設立一個平臺的特定標識，如has_ali_hook_flag，用於辨別目標平臺；最後編寫兼容。

3. 集成層

集成層：包括集成了CLI工具、日誌logger工具、檢測器linter。

其中linter較為複雜，包括規則總結，規則包裝，按照規則掃描兩遍（行檢測，文件整體檢測），輸出總結。如有些場景中平臺功能缺失，是wwto不能處理的，比如頭條暫不支持的selectComponent，只能從原始碼層面規避。對於這類工具解決不了的問題，我們除了在文檔中有說明之外，也會在轉換之前，通過linter警告的方式告知開發者，指明源碼存在的兼容問題及對應處理方案。


幾種典型的問題

1. 組件化實現程度差異

支付寶小程序的組件化是不徹底的，父組件的樣式會影響子組件的樣式。這個問題從原始碼層面可以規避，父子組件不要使用相同的類名，但這個顯然是不友好解決辦法。本解決方案是：通過postcss對樣式文件做模塊化處理，對模板則先通過xmldom進行DOMParser，然後遍歷DOM節點進行類名的替換，模板與模塊化以後的樣式文件一一對應則通過頁面/組件的路徑所計算的hash進行綁定。轉換前後對比如下：

（樣式文件模塊化前後）

（模板文件模塊化前後）


2. 接口/屬性不一一對應

支付寶小程序組件的生命周期函數與微信小程序完全不一樣，也沒有一一對應的關係。這種情況無法使用簡單的方法名正則替換，本方案是注入支付寶小程序組件的生命周期函數，在這些生命周期函數中在調用微信小程序的生命周期函數，這樣以來就避免了方法名替換無法一一對應的問題，也能更方便地書寫適配代碼。

（模板文件模塊化前後）

除此之外，本方案還解決了像生命周期函數/事件回調函數入參不一致，組件不支持triggerEvent方法等一系列問題。


核心優勢

  • 跨端遷移：一套微信小程序代碼，其他多個小程序端適用，降低研發成本
  • 快速接入：幾乎不需要對微信小程序做任何改動，可以接近零成本獲得其他小程序。
  • 簡單易用：CLI命令行一鍵轉換，輕鬆易用，無學習成本
  • 擴展開發：wwto輸出的目標小程序可讀性強，可二次擴展
  • 覆蓋率廣：可從微信小程序/插件轉為主流的其他小程序/插件：百度、支付寶、頭條小程序。


開源意義&未來規劃

開源意義：目前小程序生態日漸繁榮和完善，很多公司都推出了各個平臺的小程序，多端小程序的開發和維護都耗時耗力，此項目可以幫助開發者快速從微信小程序生成其他平臺的小程序。

未來規劃：wwto會進一步的提高轉換平臺的支持力度，保證轉換功能穩定可用。同時在社區的共同建設下，會提供更多平臺的轉換支持，更多新特性&API的轉換支持，完善小程序的開發者社區生態。


如何貢獻&問題反饋

在小程序標準化統一落實之前，wwto繼續履行著跨端遷移的使命。而開源則只是wwto貢獻社區的一小步，我們現向廣大開發者發出誠摯的邀請，與我們一道共同建設，為小程序開發的效率提升與優雅遷移不斷努力。

您可以在 https://github.com/wuba/wwto 了解項目源碼、使用方法、啟動方式等。歡迎提交 PR 或者 Issue，向我們反饋建議和問題。


作者簡介

李中秋，58同城 基礎體驗技術部 前端資深開發工程師，主要負責前端工具鏈建設、通用中臺系統的開發。


想了解更多開源項目信息？

與項目成員零距離交流？

掃碼加小秘書微信

一切應有盡有


微信號 : jishu-58

添加小秘書微信後由小秘書拉您進項目交流群

相關焦點

  • 小程序時代：如何跨多小程序開發協作？
    小程序端越來越多，跨平臺開發框架逐漸成為開發小程序的主流，目前跨平臺開發有較多的開源解決方案，本文介紹一種簡單而有效的方法，解決複雜小程序的跨團隊開發協作，希望對你有所幫助。背景目前市面上小程序端越來越多，跨平臺開發框架逐漸成為開發小程序的主流。
  • Taro 3 正式版發布:開放式跨端跨框架解決方案
    以下是 Taro 3 的一些新增特性：跨框架：React、Nerv、Vue 2、Vue 3、jQuery在舊版本的 Taro，我們以微信小程序的開發規範為基準，使用 React/JSX 的方式來進行開發。
  • APICloud微信小程序解決方案
    9月初的騰訊數字生態大會上，微信團隊向我們展示了微信小程序的商業化表現和關鍵能力，小程序正在加速完善自身的商業閉環能力，而整個小程序的生態也將進入到一個全新的階段，為平臺商家帶來新的流量增長點，小程序適合多數行業。
  • 小程序搬家:微信小程序轉化為百度小程序
    一、工具介紹百度網盤『一鍵搬家（wx2）』產品是百度為開發者提供的便捷代碼轉化工具，能夠幫助開發者快速實現把微信小程序的部分代碼遷移到百度智能小程序上，降低開發成本，提升運營效率。（1）什麼樣的開發者需要『一鍵搬家』已經有微信小程序，利用現有代碼快速開發或者生成百度智能小程序。
  • 微信酒店小程序運營解決方案
    在小程序這一賽道，微信小程序處於領先地位，2020年日活躍帳戶數達到4億，小程序相關從業者多達536萬。 同時微信官方也大力支持小程序發展，將開放兩項重要功能。
  • 服裝小程序開發需要多少錢｜服裝小程序開發解決方案
    近年來隨著人們的生活水平的提高，對服裝的需求越來越大，加上服裝行業的投資門檻較低，許多投資者們都做起了服裝生意，而一部分服裝企業為了從競爭激烈的市場中脫穎而出，另闢銷售渠道，紛紛做起了服裝小程序，微信小程序的開發也給服裝行業帶來新機遇。
  • 360 小程序正式開啟公測,為什麼在 PC 端做小程序是必要的?
    不過，不用過多考慮其他小程序面臨的 iOS 虛擬支付等問題，加之 360 在 PC 上非常強的變現和商業化能力，活躍在 PC 端的 360 小程序的變現方式幾乎是不受限的。激勵視頻、廣告橫幅等只是最簡單的廣告形態，未來，打賞、知識付費等都會是更好的變現手段。原因探究：為什麼在這個時刻推出小程序？
  • 如何運營一個微信小程序商城？
    小程序從提出到現在已經風雨3載，據調查現在只微信小程序的數量已達上百萬個，還不算頭條系等其他大廠的小程序，數量固然龐大，但需求是永無止境的，仍然還有很多公司不斷的想要入局小程序。隨著小程序開發市場的不斷成熟，開發小程序商城已經不是什麼難事，CRMEB一直在致力做的一件事就是不讓小程序商城系統成為奢侈品，我們開源了非常優秀的商城系統，打通H5端和小程序端，共用後臺管理數據，開源供大家使用，CRMEB的開源系統還獲得了碼雲GVP-最具價值倉庫榮譽，功能齊全，界面美觀，系統性能穩定，持續3年的不斷迭代更新，目的就是要用技術助力企業發展，也非常歡迎各位安裝體驗
  • 微信小程序開源項目庫匯總，學習開發必備
    - 專為微信小程序開發的插件wecos ★64 - 微信小程序 COS 瘦身解決方案服務端m-mall-admin ★137 - 創建REST API的樣板應用NAMI ★79 - 專為小程序而生的服務端開發容器weapp-node-server-demo
  • 企業微信與微信互通能力升級;微盟接入QQ小程序;有贊小程序打通...
    企業微信2020年度大會如期舉行，企業微信與微信互通的能力再次升級：客戶群人數上限提升至500人，並支持發放客戶群紅包，離職、在職繼承和互通開放能力進一步優化。微盟微商城和智慧零售兩大解決方案正式接入QQ小程序，並開放首批商家內測。有贊小程序已全鏈路打通微信視頻號，視頻號可無縫跳轉進入有贊商家的小程序，實現從內容到電商的變現。目前有贊商家可報名參與內測。
  • 滴滴開源小程序框架 Mpx ,致力於提高小程序開發體驗
    滴滴 WebApp 團隊近日宣布開源 Mpx ，這是一款致力於提高小程序開發體驗的增強型小程序框架。
  • 妙健康攜手360小程序，打開跨屏健康管理新姿勢
    隨著移動網際網路的發展,小程序在手機端的體驗已經非常流暢了,成為「去APP化」趨勢下BATJ等巨頭們重點布局的賽道,攫取了大量的鮮活流量。然而,近年來移動端小程序的發展已趨於穩定,其紅利不復從前,對於開發者來說,PC端小程序的崛起將打開流量新藍海。 近日,國內領先的數字健康管理平臺妙健康宣布正式入駐360小程序生態,成為首批來自健康行業的360小程序。
  • 微信小程序定製開發解決方案 - CSDN
    微信小程序開發需要注意哪些情況？如果您想要定製開發小程序，需要注意哪幾點呢？1、增加社交屬性微信是一款強關係的社交軟體，小程序獲取到更多的用戶量的話，用戶主動分享到群、好友等永遠是最好的裂變方法。
  • 微慕小程序開源版A標籤優化說明
    但，對於A標籤的解析，一直不夠完善，比如不能很好跳轉小程序裡的任意頁面，不能跳轉到其他小程序，不能打開包含業務域名的連結。，在小程序卻比較困難，因為小程序的頁面和pc端的頁面路徑不是一樣的。微慕小程序原來的解決方案-wordpress的固定連結設置成如下格式：
  • 這些開發微信小程序的UI組件和框架，你們都知道嗎？
    現在微信小程序是非常火爆的，所以各個大廠都推出了自己特色的小程序應用，如:百度智能小程序、頭條小程序、支付寶小程序、QQ小程序、釘釘小程序等。如果完成從0開始開發的話，成本還是蠻高的，所以我們需要藉助現成的UI組件和框架來為我們節省一些時間。
  • Vant Weapp - 有贊出品的免費開源微信小程序組件庫
    輕量可靠的小程序UI組件庫，主流移動組件庫 Vant 的微信小程序版本。Vant Weapp 和 Vant 的區別之前推薦過的移動端web組件庫 Vant 是 Vue.js 版本的，其對內承載了有贊所有核心業務，對外有十多萬開發者在使用，一直是業界主流的移動端組件庫之一。微信小程序的開發和基於Vue.js的web開發有較大的區別，而 Vant Weapp 則是小程序版本，同樣繼承了 Vant 所有的優點，可以用來快速開發電商類的小程序。
  • 脫離微信,在硬體設備運行小程序?小程序硬體框架大揭秘!
    在今年的微信公開課上，微信推出全新小程序硬體框架（WeChat Mini-Program Framework，簡稱 WMPF），實現可脫離微信客戶端的環境下運行小程序，支持小程序運行在各行各業的安卓系統平板電腦、大屏設備等硬體上。這可謂是跨時代的發展。這是一項怎樣的黑科技？開發者是否要重新編寫一套新代碼來適配？未來小程序又如何賦能 IoT設備？
  • 小程序多端框架全面測評
    這類框架最大優點和創造的最大原因就是小程序，因為第一第二種框架其實除了可以跨系統平臺之外，也都能編譯運行在瀏覽器中。（移動端、H5、微信小程序、百度小程序、支付寶小程序、頭條小程序），chameleon少了頭條小程序緊隨其後。
  • 微信小程序授權/提交審核失敗的解決方案
    授權失敗情況1：若錯誤授權給公眾號帳號解決辦法：選擇【重新授權】，使用微信小程序帳號的管理員微信掃碼。在掃碼後，您的手機會跳轉到如下頁面，點擊對應的微信小程序（請特別注意不是公眾號！）完成授權。授權失敗情況2：該小程序帳號已經授權給了其他上線了小程序解決辦法1：註冊一個新的小程序帳號後重新授權。
  • 外賣點餐微信小程序的詳細解決方案
    而這對於許多餐飲企業來說，就完全具備了通過長沙小程序開發，打造外賣點餐小程序的條件。那麼接下來，創研科技就給大家談談，關於外賣點餐微信小程序的詳細解決方案。後臺管理：前面所說的功能，都屬於用戶端，那麼用戶下單後，商家需要能夠接單，處理訂單，所以還需要有商家管理端。甚至還有配送員端，以便更新訂單狀態。以上便是一款外賣點餐小程序所要具備的基本功能，具備這些後，用戶才能夠真正在其中實現點餐，而商家也能夠及時處理。