原文首發： https://qianduan.group 。支付寶小程序為了兼容微信小程序，在很多的接口定義和設計上都是一樣的，方便程序的移植性，雖然初衷是好的，但是在最後的落地過程中，變化還是非常大的。

常規思路

對於大家能夠很快想到的解決辦法就是正則，通過強大的正則表達式來替換需要被替換的接口名和參數，這也是目前已經有的解決方案。這種方案有3個現象級問題，第一是開發者需要有強大的正則功底，第二是即使正則掌握度很好，對於特定的case，正則也是不能解決的（寫過複雜正則的同學應該了解），最後一點就是很難有精確的轉換日誌文件，幫助用戶查看進行了哪些修改。

落地方案

只有通過預編譯和分析得出來的結果才是真正我們需要的，所以我們必須得從AST來解決問題，分析相應的接口和參數，最終得到我們需要的結果。

轉換流程圖：

解決步驟

1. 設置對象匹配，用於mapping階段

a. 對於api，我們需要類型下面這樣的一份轉換對象。

/** * 1.如果值为null，表示不存在该接口* 2.如果有值， * a. 其中有tips，表示给予的建议* b. 有mapping，需要转换相应的接口名* c. 如果有params，则需要转换相应的参数* */ wx: { request: { mapping: 'httpRequest', params: { header: 'headers' } }, uploadFile: { params: { name: 'fileName' } } }

說明： wx表示微信小程序的對象， request表示wx發送請求的接口名,而在支付小程序中，發請求的接口名叫httpRequest ,在參數對像中，微信使用header來存放http頭，而支付寶則變為headers 。

b. 對於view模塊，需要類似的mapping

 view: { attrs: { 'hover-stop-propagation': null } }

說明：在微信小程序中， view組件的屬性hover-stop-propagation在支付寶小程序的view組件中是沒有的。

通過設置mapping對象，可以在轉換過程中的mapping階段進行轉換。

2. 產生AST

對於不同的文件類型，採取不同的工具進行分析，先通過glob工具進行選擇，刷選後再進行處理。

a. 對於js部分

對於js文件，我們通過babylon來解析，再通過babel-traverse來遍歷js文件，對於指定的表達式進行遍歷，再通過第一步設置的mapping值來替換成目標接口及參數，遍歷完成之後，最後通過babel-generator來生成想要的文件。

b. 對於view文件

對於view文件，我寫了一個庫html-tool ,用於遍歷view文件的，通過第一步設置的mapping值進行替換，最後生成想要的文件。

分析工具

分析工具目前已經集成在了vide編輯器的插件上。

說明：
項目路徑：填寫相應的小程序路徑。
轉換日誌：轉換過程中的日誌，可以清晰看到哪些變化，哪些提示等。

轉換前後文件比較

微信小程序下的一個js文件

轉化後的支付寶小程序

注意點

對於轉換後的代碼，並不能一定能運行，還需要根據轉換日誌進行修改，因為程序不能很深入了解具體業務，只能盡可能幫助開發者進行快速修改和運行。

參考

• html-tool :用來分析view文件
• transform-miniprogram :用來轉換小程序的接口,包括如何轉換js文件和view文件，其引用了html-tool和babel工具
• vide / vide-plugin-toolbar-miniprogram :安裝vide編輯器後，選擇安裝vide-plugin-toolbar-miniprogram插件就可以運行

鳴謝

非常感謝海歸女苗宇佳設計的logo，very good！