【小程序遷移】微信小程序遷移到支付寶記坑

• 文檔控制臺網址匯總
• 前言
• 本地區別
• • 僅企業可用的功能
  • 限制功能
  • 插件區別
• 云開發API區別
• 需要做的代碼變更
• • xml部分
  • CSS部分
  • JS部分
  • 自定義組件
• 比微信好的地方
• 附錄一些常用的代碼段
• • 云函數
  • 數據庫
  • 云文件
• 后語
• 后記

文檔控制臺網址匯總

不像微信的全部集中在一個控制臺，一份文檔，支付寶小程序更像是拼湊出來的東西，小程序一份文檔一個控制臺，云開發又一個，還不太好找，因此把鏈接匯集于此。

小程序開發文檔：小程序本地API的文檔。

小程序云開發文檔：小程序云開發API的文檔。

小程序開放平臺：相當于微信公眾平臺，在這里你可以管理小程序的版本、信息、設置體驗版、提交審核等。

小程序云：管理云開發資源，包括云函數、云文件、數據庫等。

阿里云OpenAPI開發者門戶：用于設置云函數超時時間，內存大小，數據庫導入導出、云存儲等的網站，不提交工單我都不知道有這東西。

提交工單：有問題直接提問，回復還是挺迅速的。

EMAS平臺：IDE云開發工具跳轉，沒什么用，可用作跳板打開小程序云。

前言

最近微信小程序云開發開始收費，從免費直接漲到了19.9元/月，論割韭菜還得是你騰訊，我的小程序盡管用的人不多，但那都是心血之作啊。為了學習微信小程序開發，把大部分的接口和API都調用過了，個人最多只能接受漲到5塊/月，沒辦法，只能上微信的友商支付寶看看了。

微信云開發計費調整公告官方
微信團隊07-04
各位微信云開發用戶：
感謝大家一直以來對微信云開發的支持。由于云計算成本整體上升，為了繼續為各位用戶提供穩定可靠的服務，微信云開發將于 2022 年 08 月 18 日，對計費方式進行如下變更，部分指標價格將有所上浮。
新計費模式下，新用戶免費使用 1 個月后，統一使用 “基礎套餐+按量付費” 模式：購買帶有一定配額的基礎套餐后，超出套餐配額部分再按照實際使用量付費。

研究了一下，發現支付寶平臺一樣提供小程序云開發功能，并且免費！那就每天的空閑時間遷移一下吧。于是開始了我的微信小程序《通信人的工具箱》的遷移工作，有興趣的朋友可以兩邊的都試一下看看區別，支付寶的可能還在審核。
然后就開始了遷移工作，并把需要手動修改的部分都記錄了下來，方便后來的朋友參考。為了熟悉支付寶開發，我沒有使用官方的antmove小工具進行遷移。小工具我試用了一下，發現里面使用了一大堆的JS代碼做裝飾器，把wx.裝飾成my.，降低了程序的執行效率，提高了代碼包的體積，也不利于學習，所以筆者手動遷移代碼。
需要注意的是：下述的僅僅為我的小程序用到的接口需要修改的地方，并不是所有的區別。

本地區別

僅企業可用的功能

錄音，詳見：my.getRecorderManager。

粘貼板，詳見：my.setClipboard。

第一點就很難受了，😟，相當于小程序的聲音頻譜分析功能無法遷移了。第二點是真的不能理解，我就是往用戶的粘貼板寫入處理結果，結果就不行。

限制功能

音樂播放器不支持播放本地的或者云存儲的音樂，只能播放調用錄音接口或者上傳到優酷的音頻文件，詳見：音頻播放 API 使用說明。

直接使得小程序的“信號發生器”功能無法遷移，_{心涼了半截}，不過為了學習，還是接著往下看吧。

插件區別

基礎庫2.0下不支持echarts數據繪圖插件，官方建議用@AntV/F2代替。

云開發API區別

云文件的云端路徑無法指定，不支持創建文件夾。

云文件只可以存儲指定類型格式的文件。詳見：uploadFile

云函數超時時間最大只能設置10s，在一些等待接口響應的業務很容易超時。

需要做的代碼變更

xml部分

控件標簽 bindtap -> onTap

控件標簽 bindchange -> onChange

控件標簽 bindinput -> onInput

渲染控制 wx: -> a:

image控件： bindtouchend -> onTap

canvas控件：canvas-id -> id

input控件：要添加controlled='true’標簽，否則可能不受setData控制

textarea控件：可以慎重添加controlled='true’標簽，但是有坑，用了可能會出現用戶無法輸入的情況。

CSS部分

不支持CSS樣式暗夜模式的識別與匹配，具體為微信端的“@media (prefers-color-scheme: dark)”標簽。

page注意p要小寫，否則樣式不生效，微信無所謂。

JS部分

my.showLoading不支持mask參數，實測默認是有遮罩的。

my.showLoading的title參數名替換為content，詳見：my.showLoading。

wx.showModal -> my.confirm ，且不支持showCancel參數。

my.showToast沒有icon參數，取而代之的是type，title參數名替換為content，詳見：my.showToast。

支付寶的弱社交功能，Page內沒有onShareAppMessage和onShareTimeline，只有onShareAppMessage，詳見：頁面運行機制。

表單元素查詢不能使用this.selectComponent。

wx.setNavigationBarTitle -> my.setNavigationBar，詳見：my.setNavigationBar。

自定義組件

components不支持在調用它的頁面中selectComponent或createSelectorQuery獲取實例對象，需要在components的ref()中返回，在宿主的xml中使用ref標簽定義監聽函數，在JS的對應的監聽函數中獲取，詳見：ref 獲取組件實例。

開發時遇到components的methods中的this指針沒有setData方法，已經確定this指向沒有改變，按照官方文檔也不行。最后含有setData方法的this指針通過組件的didmount()生命周期的監聽函數中的this獲取。

比微信好的地方

云函數調用似乎沒有限制參數和返回結果的數據長度，我用b64編碼一張圖片作為參數調用云函數，云函數返回一張圖片，居然成功了。在微信端會提示參數過長，得先把圖片上傳云文件，云函數讀取云文件圖片讀取后把結果保存到云文件，本地在下載處理結果。

保存圖片到用戶相冊無需一長串的權限申請，直接調用my.saveImageToPhotosAlbum即可，就是不支持模擬器調試。

my.saveImageToPhotosAlbum({filePath:that.data.output_image_src,}).then(e=>{my.showToast({content:'保存成功',type:'success',});}).catch(e=>{console.error(e);my.showToast({content:'保存失敗,請用真機測試相冊保存功能',type:'fail',})});

數據庫更新支持"沒有則創建"的選項，這個比微信要好，詳見：updateOne。

獲取用戶的唯一id不需要通過云函數，只需要調用授權函數即可。

const res = await my.serverless.user.authorize({authProvider: "alipay_openapi"});if (res.success) {//獲取用戶UUIDmy.serverless.user.getInfo().then(user => {console.log(user);//設為全局對象that.globalData.user = user.result.user;}}

附錄一些常用的代碼段

云函數

//云端定義 module.exports = async (ctx) => {const {a, b} = ctx.args;return a + b; } //同步式調用 const { result } = await mpserverless.function.invoke('sum', { a: 1, b: 1 }); //異步式調用 mpserverless.function.invoke('sum', { a: 1, b: 1 }).then(console.log).catch(console.error);

數據庫

//更新一條數據，不存在則創建 mpserverless.db.collection('users').updateOne({age: {$gt: 18} }, {$set: {name: "Smith",age: 22,} }, {upsert: true, }) .then(res => {}) .catch(console.error);

云文件

//上傳一個文件，無法指定云端路徑 mpserverless.file.uploadFile({filePath: path,}).then(res => {}).catch(err => {});

后語

經過這次遷移，我知道微信漲價的底氣在哪了，支付寶的小程序云開發感覺就是個半成品。支付寶的小程序大部分是一些點單的，交易的，其它類別用的人并不多，所以開發的除了商業需要，基本就像我一樣是純粹學習的。微信平臺則用戶眾多，社交屬性強大，這些更提供了它漲價的基礎。現在19.9元/月還能勉強承受，后面變成39我估計就下線小程序云功能了。。。看到這了，不點個贊再走嘛？

后記

本部分用于記錄小程序上線前的log，本以為小程序可以通過順利審核，但可能支付寶比較謹慎，或者剛好趕上敏感時期，居然被駁回了，于是把該過程按時間線記錄于此，以供參考。

@2022/10/14 晚上：提交初次審核，小程序本體與信息會一同進行審核。

@2022/10/19 11:53：被駁回，原因如下：

1、當前小程序具有違規情形，在可搜索，可編輯內容上沒有對涉政敏感信息做特殊防控，涉及一些特殊人名或政治相關圖片信息透出，希望商家自行排查。同時也可申請接入支付寶開放能力，詳見：https://www.yuque.com/docs/share/88a1c6f2-1839-4028-ac5c-b1537c08f165?#|應用內容

打開鏈接發現是《內容風險識別接口服務·語雀》，意思就是要接入它家的內容審核平臺唄，，該接口目前是邀約制，需要把小程序appid和名稱發送到經理開通。
往下查看了接口的API，發現圖片居然不能B64解碼后發過去，而要上傳圖片的urls，還好查看文檔后發現小程序云文件支持公開鏈接，或許可以試試。
3. @2022/10/21 11:09: 經過一番思想糾結后，_{其實是臨近畢業，繁雜事務多了起來，等偷得半日閑時終于想起這事了}，決定還是開通《內容風險識別接口服務》試試，發送了開通申請。
4. @2022/10/22 14:06: 文檔太爛，經過一番調試與摸索，接入了《內容風險識別接口服務》并提交了第二次審核，接入過程已記錄到我的文章《【小程序·開發】支付寶小程序接入＜內容風險識別服務＞流程指南》，歡迎參考。
5. @2022/10/22 17:19：支付寶小程序過審啦！！！

總結

以上是生活随笔為你收集整理的【小程序迁移】微信小程序迁移到支付宝记坑的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。