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

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

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

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

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

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

　　編譯時(shí)轉(zhuǎn)換syntax語法：wwto會在編譯時(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ù)推出了自己的小程序平臺,。但目前開發(fā)者面臨了困境：各個(gè)大廠的小程序均有自己的語法結(jié)構(gòu)、API體系等,，開發(fā)者需要把同一個(gè)應(yīng)用分別開發(fā)N次,，效率低下，在不同平臺間迭代功能繁瑣,。

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

　　對比業(yè)界現(xiàn)有微信轉(zhuǎn)其他小程序的工具antmove,，wwto不僅支持小程序的轉(zhuǎn)換,，還支持插件的遷移。對比多端統(tǒng)一開發(fā)框架taro,，wwto無需引入框架和框架帶來的風(fēng)險(xiǎn),，比如更新維護(hù)比原生小程序團(tuán)隊(duì)滯后甚至停滯、框架支持不了但原生小程序能支持的功能,、性能肯定也會有損耗,、額外的學(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)平臺的API，抹平不同小程序之間的差異,。

　　適配規(guī)則：

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

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

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

　　4. 一樣的API不作處理。

　　適配過程：

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

　　3. 集成層

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

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

　　幾種典型的問題

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

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

　　(樣式文件模塊化前后)

　　(模板文件模塊化前后)

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

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

　　(模板文件模塊化前后)

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

　　核心優(yōu)勢

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

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

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

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

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

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

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

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

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

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