開源|wwto：小程序跨端遷移解決方案——微信轉(zhuǎn)其他小程序！今天長(zhǎng)沙小程序開發(fā)公司帶來一次小程序跨端遷移解決方案，也是小程序開發(fā)最新的技術(shù)介紹，供更多的小程序開發(fā)人員使用學(xué)習(xí)。

　　1.開源項(xiàng)目名稱：wwto

　　2.github地址：https://github.com/wuba/wwto

　　3.簡(jiǎn)介：wwto是58同城推出的一種小程序跨端遷移解決方案，可以近乎零成本將微信小程序轉(zhuǎn)為其他小程序，提升開發(fā)效率、降低維護(hù)成本。目前已經(jīng)投入了我們的生產(chǎn)環(huán)境中使用，包括微聊、云賬號(hào)。

　　wwto于2020年3月份開源，具備以下特點(diǎn)：

　　轉(zhuǎn)換鏈路為“微信小程序 —> 其他小程序”(支付寶小程序、百度小程序、頭條小程序);

　　編譯時(shí)轉(zhuǎn)換syntax語法：wwto會(huì)在編譯時(shí)將語法結(jié)構(gòu)等集中處理，轉(zhuǎn)換為目標(biāo)小程序的語法結(jié)構(gòu)。

　　運(yùn)行時(shí)轉(zhuǎn)換API：目標(biāo)小程序運(yùn)行時(shí)加載API適配器，抹平小程序間差異。

　　linter檢查工具：提供檢驗(yàn)規(guī)則，發(fā)現(xiàn)目標(biāo)小程序不支持的語法或特性，提醒兼容性問題。

　　支持插件轉(zhuǎn)換：在支持小程序轉(zhuǎn)換的同時(shí)，支持插件轉(zhuǎn)換;

　　CLI功能：支持命令行CLI，方便易用;

　　命令行執(zhí)行進(jìn)程顯示日志。

　　為什么需要wwto

　　在微信小程序的大火大熱背景下，各大互聯(lián)網(wǎng)公司相繼加入小程序流量混戰(zhàn)，陸續(xù)推出了自己的小程序平臺(tái)。但目前開發(fā)者面臨了困境：各個(gè)大廠的小程序均有自己的語法結(jié)構(gòu)、API體系等，開發(fā)者需要把同一個(gè)應(yīng)用分別開發(fā)N次，效率低下，在不同平臺(tái)間迭代功能繁瑣。

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

　　對(duì)比業(yè)界現(xiàn)有微信轉(zhuǎn)其他小程序的工具antmove，wwto不僅支持小程序的轉(zhuǎn)換，還支持插件的遷移。對(duì)比多端統(tǒng)一開發(fā)框架taro，wwto無需引入框架和框架帶來的風(fēng)險(xiǎn)，比如更新維護(hù)比原生小程序團(tuán)隊(duì)滯后甚至停滯、框架支持不了但原生小程序能支持的功能、性能肯定也會(huì)有損耗、額外的學(xué)習(xí)成本等。

　　項(xiàng)目架構(gòu)

　　wwto分為3層結(jié)構(gòu)：編譯層、運(yùn)行層和集成層，架構(gòu)圖如下所示：

　　1. 編譯層

　　編譯層：將微信小程序語法結(jié)構(gòu)集中處理，編譯成目標(biāo)小程序的語法體系。

　　流程圖如下：

　　2. 運(yùn)行層

　　運(yùn)行層：以微信小程序的API為基準(zhǔn)分別適配目標(biāo)平臺(tái)的API，抹平不同小程序之間的差異。

　　適配規(guī)則：

　　1. 微信擁有的API，但其他平臺(tái)沒有對(duì)應(yīng)的情況：由于平臺(tái)之間的不兼容，降級(jí)為空方法;

　　2. 其他平臺(tái)和微信接受的參數(shù)名不同，做參數(shù)映射;

　　3. 其他平臺(tái)和微信API的返回值不同，做結(jié)果封裝或結(jié)果映射;

　　4. 一樣的API不作處理。

　　適配過程：

　　首先，小程序內(nèi)部全局對(duì)象替換為對(duì)應(yīng)平臺(tái)的全局對(duì)象;其次，設(shè)立一個(gè)平臺(tái)的特定標(biāo)識(shí)，如has_ali_hook_flag，用于辨別目標(biāo)平臺(tái);最后編寫兼容。

　　3. 集成層

　　集成層：包括集成了CLI工具、日志logger工具、檢測(cè)器linter。

　　其中l(wèi)inter較為復(fù)雜，包括規(guī)則總結(jié)，規(guī)則包裝，按照規(guī)則掃描兩遍(行檢測(cè)，文件整體檢測(cè))，輸出總結(jié)。如有些場(chǎng)景中平臺(tái)功能缺失，是wwto不能處理的，比如頭條暫不支持的selectComponent，只能從源代碼層面規(guī)避。對(duì)于這類工具解決不了的問題，我們除了在文檔中有說明之外，也會(huì)在轉(zhuǎn)換之前，通過linter警告的方式告知開發(fā)者，指明源碼存在的兼容問題及對(duì)應(yīng)處理方案。

　　幾種典型的問題

　　1. 組件化實(shí)現(xiàn)程度差異

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

　　(樣式文件模塊化前后)

　　(模板文件模塊化前后)

　　2. 接口/屬性不一一對(duì)應(yīng)

　　支付寶小程序組件的生命周期函數(shù)與微信小程序完全不一樣，也沒有一一對(duì)應(yīng)的關(guān)系。這種情況無法使用簡(jiǎn)單的方法名正則替換，本方案是注入支付寶小程序組件的生命周期函數(shù)，在這些生命周期函數(shù)中在調(diào)用微信小程序的生命周期函數(shù)，這樣以來就避免了方法名替換無法一一對(duì)應(yīng)的問題，也能更方便地書寫適配代碼。

　　(模板文件模塊化前后)

　　除此之外，本方案還解決了像生命周期函數(shù)/事件回調(diào)函數(shù)入?yún)⒉灰恢?，組件不支持triggerEvent方法等一系列問題。

　　核心優(yōu)勢(shì)

　　跨端遷移：一套微信小程序代碼，其他多個(gè)小程序端適用，降低研發(fā)成本

　　快速接入：幾乎不需要對(duì)微信小程序做任何改動(dòng)，可以接近零成本獲得其他小程序。

　　簡(jiǎn)單易用：CLI命令行一鍵轉(zhuǎn)換，輕松易用，無學(xué)習(xí)成本

　　擴(kuò)展開發(fā)：wwto輸出的目標(biāo)小程序可讀性強(qiáng)，可二次擴(kuò)展

　　覆蓋率廣：可從微信小程序/插件轉(zhuǎn)為主流的其他小程序/插件：百度、支付寶、頭條小程序。

　　開源意義&未來規(guī)劃

　　開源意義：目前小程序生態(tài)日漸繁榮和完善，很多公司都推出了各個(gè)平臺(tái)的小程序，多端小程序的開發(fā)和維護(hù)都耗時(shí)耗力，此項(xiàng)目可以幫助開發(fā)者快速從微信小程序生成其他平臺(tái)的小程序。

　　未來規(guī)劃：wwto會(huì)進(jìn)一步的提高轉(zhuǎn)換平臺(tái)的支持力度，保證轉(zhuǎn)換功能穩(wěn)定可用。同時(shí)在社區(qū)的共同建設(shè)下，會(huì)提供更多平臺(tái)的轉(zhuǎn)換支持，更多新特性&API的轉(zhuǎn)換支持，完善小程序的開發(fā)者社區(qū)生態(tài)。

　　如何貢獻(xiàn)&問題反饋

　　以上長(zhǎng)沙小程序開發(fā)公司智企云帶來的小程序開發(fā)最新的技術(shù)介紹，在小程序標(biāo)準(zhǔn)化統(tǒng)一落實(shí)之前，wwto繼續(xù)履行著跨端遷移的使命。而開源則只是wwto貢獻(xiàn)社區(qū)的一小步，我們現(xiàn)向廣大開發(fā)者發(fā)出誠摯的邀請(qǐng)，與我們一道共同建設(shè)，為小程序開發(fā)的效率提升與優(yōu)雅遷移不斷努力。您可以在 https://github.com/wuba/wwto 了解項(xiàng)目源碼、使用方法、啟動(dòng)方式等。歡迎提交 PR 或者 Issue，向我們反饋建議和問題。