移植背景：

1. 支付寶小程式開發文件只瞭解了大致框架，跑了demo，具體Api、元件沒太多瞭解；

2. 已有微信小程式，移植支付寶小程式做預研（主要針對授權登入、支付等功能）。

3. 移植的微信小程式屬小型專案，頁面8個，元件兩個。首頁功能性較強，集成了主要的業務處理邏輯，涉及登入、獲取使用者手機號碼、獲取定位資訊、下單、支付、檢視卡券等功能。

移植用時：

大致2小時，基本完成前端移植（控制檯無報錯，介面正常呼叫，使用者登入授權需等後端介面改造，具體頁面和流程需待後端相關介面改造後再行除錯驗證）

移植過程：

1. 建立支付寶小程式：

最好是基於todo模板建立一個demo專案，這樣方便移植的時候對比修改。

2. 公共專案配置檔案複用：

app.json檔案中，支付寶小程式window配置項與微信小程式不同，需要單獨修改。

app.js檔案中，支付寶小程式預設沒有全域性變數的，我們需要自行將微信小程式中定義的全域性變數複用過來。

app.wxss==>app.acss公共樣式：完全複用就好了。

3. 模板複製：

將微信小程式主目錄下的pages/components/imgs及utils目錄複製到支付寶小程式主目錄下進行合併。

4. 介面請求的改造：

res.statusCode==>res.status

5. 模板檔名字尾修改：

所有頁面和元件中的模板檔案和樣式檔案字尾都需要修改，頁面比較多的可以編寫批處理修改。

• wxml==>axml
• wxss==>acss

6. 模板檔案中需要替換的地方：

模板檔案axml中，需要替換的主要有這些：

• bindTap-==>onTap
• wx:==>a:

指令碼檔案js中，需要替換的主要有：

• wx.==>my.

小程式開發工具中一鍵替換方法如下：

7. 不同的API的處理：

經過上邊的改造，基本上對於框架類的東西都已經更換了，剩下的就是API方面的不同需要修改了。

對於小程式API，大部分都是相同的，可以說需要調整的API並不是很多。但基於各自內部不同的生態，所以在授權登入、支付這些方面自然會有所不同。對於這部分API的移植，就沒有前邊的一鍵替換那麼方便了，你也不可能一個個把所有用到的API都去搜索下去做調整。最好的方法就是直接在小程式的執行中進行除錯，通過除錯來發現並調整需要更改的API。

對於這塊兒的改造，就得好好利用console.log()了，如下圖輸出的是my.getAuthCode介面獲取使用者code值的返回資料，不同於微信小程式的code,支付寶的是authCode，所以才會有下邊的報錯，調整對應的程式碼就好了。

後端介面改造：

對於使用者授權登入、支付等API的引數是需要後端返回的，因此這方面的程式碼就需要等後端相關介面改造完成之後才能正常除錯了。