微信小程序快速移植支付寶小程序


可以直接使用轉換工具:微信小程序轉支付寶小程序工具:wx2my。雖說使用轉換工具並不能做到完全移植,但是還是能替代大部分的手工替換修改工作的,留給我們的也就是兩個小程序之間不同的api及特性方面的修改,這個工作量就能減少好多了。


移植背景:

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的參數是需要后端返回的,因此這方面的代碼就需要等后端相關接口改造完成之后才能正常調試了。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM