一、什麼是支付寶小程式？
定義：支付寶小程式是手機應用嵌入支付寶客戶端的一種方法
優點
- 1、基於 Web 技術，學習成本低
- 2、一套程式碼，同時支援 iOS 和 Android，接近原生體驗
- 3、提供豐富的元件和 API(比如獲取使用者資訊、本地儲存、支付功能等)
開發教程
二、支付寶小程式和微信小程式對比
區別
- 支付寶小程式
- 支付寶小程式不支援個人申請、僅支援企業註冊
- 支付寶小程式稽核相對嚴格：比如你的小程式裡的使用者協議裡的詞語不規範，都不會過稽核。
- 支付寶跟微信相比一個特色的模組就是信用市場
- 文件目錄結構
xx.axml xx.acss xx.json xx.js
複製程式碼- api呼叫物件 my
- 網路請求介面 my.httpRequest
- 獲取快取資料 my.getStorage({‘key’:”})
- 點選事件 onXXX
- xml模板裡面{{}}可以進行++ –運算
"window": {
"defaultTitle": "支付寶", //頁面標題
"titleBarColor": "#d05021", //導航欄背景色
"pullRefresh":true, //是否允許下拉重新整理 預設false
"allowsBounceVertical": yes, //頁面是否支援縱向拽拉超出實際內容。
},
"tabBar": {
"textColor":"#000", //未選中字型顏色
"selectedColor":"#d81e06", //選中的字型顏色
"backgroundColor":"#fff", //背景色
"items": [{
"pagePath": "pages/index/index" , //頁面路徑
"name": "首頁", //頁面標題
"icon": "pages/icon/index.png", //為選中圖示
"activeIcon": "pages/icon/index_1.png" //選中圖示
}]
}
複製程式碼- 微信小程式
- 微信小程式大家都可以申請註冊。
- 微信小程式跟支付寶小程式相比的優點是微信流量大、人群活躍度高。
- 目錄結構
xx.wxml xx.wcss xx.json xx.js
複製程式碼- api呼叫物件 wx
- 網路請求介面 wx.request
- 獲取快取資料 wx.getStorage()
- 點選事件 bindXXX onTap bindtap
- xml模板裡面{{}}微信小程式不能進行javaScript計算
"window": {
"backgroundTextStyle": "light", //下拉背景字型
"navigationBarBackgroundColor": "#d0501f", //導航欄背景顏色
"navigationBarTitleText": "", //導航欄標題文字內容
"navigationBarTextStyle": "white", //導航欄標題文字樣式
"enablePullDownRefresh": true, //是否開啟下拉重新整理
"onReachBottomDistance": 50 //頁面上拉觸底事件觸發時距頁面底部距離，單位為px。
},
"tabBar": {
"selectedColor": "#d0501f", //選中字型顏色
"backgroundColor": "#fff", //背景顏色
"color": "#333", //未選中字型顏色
"list": [
{
"pagePath": "/pages/home/home", //頁面路徑
"text": "首頁", //頁面標題
"iconPath": "/pages/images/shouye@2x.png", //未選中圖示
"selectedIconPath": "/pages/images/fill@2x.png" //選中圖示
},
]
}
複製程式碼三、微信小程式轉成支付寶小程式
方法一：wxmp2antmp
wxmp2antmp 是一個微信小程式轉支付寶小程式的命令列工具
- 安裝
npm i -g wxmp2antmp
複製程式碼- 使用
w2a 微信小程式目錄 支付寶小程式目錄
複製程式碼-
使用時注意事項
-
路徑問題：支付寶小程式中的路徑解析和微信小程式中的路徑解析是不同的
路徑必須為相對路徑
-
js 中的 wx 變數會被賦值為 my
-
微信小程式和支付寶小程式的 api 存在差異
-
-
實踐結果
- 只能轉變資料夾字尾名，以及所定義的變數，需要手動更改支付寶和微信小程式API不同的地方，例如底部tabBar,再比如登陸，比如快取資訊，彈出框，都需要自己手動改變，效率很低，但是可以根據文件仔細對比進行改正。
方法二：wx2ali
npm i wx2ali -g
如果是舊版本請命令列中輸入npm update wx2ali -g進行更新 以獲得更好的服務
複製微信小程式的原始碼一份；
wx2ali --getConfig獲取配置檔案路徑 按照需要修改配置並儲存
wx2ali --start
等待處理完成。
或者可以通過 wx2ali --path path路徑 開始轉換
複製程式碼-
實踐結果
- 轉化過後堪稱完美解決微信小程式轉成支付寶小程式，幾乎不需要手動更改任何東西，直接將所有的微信小程式的東西轉成了支付寶小程式。
- 不過該轉換方法只能轉化微信小程式和支付寶小程式公共有的部分。
- 缺點：操作步驟比較複雜。針對於window系統和mac系統有不同操作的方式
- 該轉化方法是直接在微信小程式上進行修改的，所以需要單獨備份。
方法三：wxToAlipay
npm install wx-alipay -g
wxToalipay --src={{小程式原始碼目錄}} --dest={{支付寶小程式目錄,可預設}}
// 排除部分資源
wxToalipay --src=/weixin/min --filter="!lizard/package/*,!lizard/Gruntfile.js"
// 定製回撥, 在框架處理好後，在對每個檔案進行處理
wxToalipay --src=/weixin/min --callback="wxToAlipay.js"
複製程式碼-
實踐結果
- 操作難易度適中
- 轉化程度適中
- 轉化形式較為複雜
四、微信小程式轉支付寶小程式表格對比
| 對比方法 | wxmp2antmp | wx2ali | wxToAlipay |
|---|---|---|---|
| gitHub支援度 | star 93 watch 6 fork 24 | star 51 watch 10 fork 13 | star 47 watch 3 fork 9 |
| 安裝 | npm i -g wxmp2antmp | npm i wx2ali -g | npm install wx-alipay -g |
| 使用過程 | w2a 微信小程式目錄 支付寶小程式目錄 | 複雜 | wxToalipay --src={{小程式原始碼目錄}} --dest={{支付寶小程式目錄,可預設}} |
| 操作複雜程度 | 簡單 | 複雜 | 適中 |
| 轉化內容 | 1、檔案字尾名轉化 2、變數名轉化，3、繫結事件名轉化 | 1、除外部形式轉化以外，對微信小程式和支付寶小程式共同的API也同時轉化 2、且轉化的程式碼也很貼合支付寶小程式形式 | 1、除外部形式轉化以外，對微信小程式和支付寶小程式共同的API也同時轉化；2、但是轉化的程式碼並不能貼合支付寶小程式形式 |
| 轉化程式碼截圖 |  |
 |
 |
| 轉化結果 | 轉化程度低 | 轉化程度高 | 轉化程度適中 |
| 轉化檔案是否需要備份 | 無需備份 | 需要備份 | 無需備份 |
五、微信小程式轉支付寶小程式方法選擇
- 轉化的可能性：根據三種方法的實踐以及對比，我認為微信小程式是能夠合理的轉化成支付寶小程式的，根據綜合對比，我認為選擇wx2ali是最合理的轉化方法。
- 轉化風險：因為實踐專案很小，暫時沒有碰到很大的轉化問題，而這三種方法都沒有大專案做支撐，且gitHub上面所受關注度不是很高，所以存在一定的轉化風險。