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

• 文檔控制臺(tái)網(wǎng)址匯總
• 前言
• 本地區(qū)別
• • 僅企業(yè)可用的功能
  • 限制功能
  • 插件區(qū)別
• 云開(kāi)發(fā)API區(qū)別
• 需要做的代碼變更
• • xml部分
  • CSS部分
  • JS部分
  • 自定義組件
• 比微信好的地方
• 附錄一些常用的代碼段
• • 云函數(shù)
  • 數(shù)據(jù)庫(kù)
  • 云文件
• 后語(yǔ)
• 后記

文檔控制臺(tái)網(wǎng)址匯總

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

小程序開(kāi)發(fā)文檔：小程序本地API的文檔。

小程序云開(kāi)發(fā)文檔：小程序云開(kāi)發(fā)API的文檔。

小程序開(kāi)放平臺(tái)：相當(dāng)于微信公眾平臺(tái)，在這里你可以管理小程序的版本、信息、設(shè)置體驗(yàn)版、提交審核等。

小程序云：管理云開(kāi)發(fā)資源，包括云函數(shù)、云文件、數(shù)據(jù)庫(kù)等。

阿里云OpenAPI開(kāi)發(fā)者門(mén)戶(hù)：用于設(shè)置云函數(shù)超時(shí)時(shí)間，內(nèi)存大小，數(shù)據(jù)庫(kù)導(dǎo)入導(dǎo)出、云存儲(chǔ)等的網(wǎng)站，不提交工單我都不知道有這東西。

提交工單：有問(wèn)題直接提問(wèn)，回復(fù)還是挺迅速的。

EMAS平臺(tái)：IDE云開(kāi)發(fā)工具跳轉(zhuǎn)，沒(méi)什么用，可用作跳板打開(kāi)小程序云。

前言

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

微信云開(kāi)發(fā)計(jì)費(fèi)調(diào)整公告官方
微信團(tuán)隊(duì)07-04
各位微信云開(kāi)發(fā)用戶(hù)：
感謝大家一直以來(lái)對(duì)微信云開(kāi)發(fā)的支持。由于云計(jì)算成本整體上升，為了繼續(xù)為各位用戶(hù)提供穩(wěn)定可靠的服務(wù)，微信云開(kāi)發(fā)將于 2022 年 08 月 18 日，對(duì)計(jì)費(fèi)方式進(jìn)行如下變更，部分指標(biāo)價(jià)格將有所上浮。
新計(jì)費(fèi)模式下，新用戶(hù)免費(fèi)使用 1 個(gè)月后，統(tǒng)一使用 “基礎(chǔ)套餐+按量付費(fèi)” 模式：購(gòu)買(mǎi)帶有一定配額的基礎(chǔ)套餐后，超出套餐配額部分再按照實(shí)際使用量付費(fèi)。

研究了一下，發(fā)現(xiàn)支付寶平臺(tái)一樣提供小程序云開(kāi)發(fā)功能，并且免費(fèi)！那就每天的空閑時(shí)間遷移一下吧。于是開(kāi)始了我的微信小程序《通信人的工具箱》的遷移工作，有興趣的朋友可以?xún)蛇叺亩荚囈幌驴纯磪^(qū)別，支付寶的可能還在審核。
然后就開(kāi)始了遷移工作，并把需要手動(dòng)修改的部分都記錄了下來(lái)，方便后來(lái)的朋友參考。為了熟悉支付寶開(kāi)發(fā)，我沒(méi)有使用官方的antmove小工具進(jìn)行遷移。小工具我試用了一下，發(fā)現(xiàn)里面使用了一大堆的JS代碼做裝飾器，把wx.裝飾成my.，降低了程序的執(zhí)行效率，提高了代碼包的體積，也不利于學(xué)習(xí)，所以筆者手動(dòng)遷移代碼。
需要注意的是：下述的僅僅為我的小程序用到的接口需要修改的地方，并不是所有的區(qū)別。

本地區(qū)別

僅企業(yè)可用的功能

錄音，詳見(jiàn)：my.getRecorderManager。

粘貼板，詳見(jiàn)：my.setClipboard。

第一點(diǎn)就很難受了，😟，相當(dāng)于小程序的聲音頻譜分析功能無(wú)法遷移了。第二點(diǎn)是真的不能理解，我就是往用戶(hù)的粘貼板寫(xiě)入處理結(jié)果，結(jié)果就不行。

限制功能

音樂(lè)播放器不支持播放本地的或者云存儲(chǔ)的音樂(lè)，只能播放調(diào)用錄音接口或者上傳到優(yōu)酷的音頻文件，詳見(jiàn)：音頻播放 API 使用說(shuō)明。

直接使得小程序的“信號(hào)發(fā)生器”功能無(wú)法遷移，_{心涼了半截}，不過(guò)為了學(xué)習(xí)，還是接著往下看吧。

插件區(qū)別

基礎(chǔ)庫(kù)2.0下不支持echarts數(shù)據(jù)繪圖插件，官方建議用@AntV/F2代替。

云開(kāi)發(fā)API區(qū)別

云文件的云端路徑無(wú)法指定，不支持創(chuàng)建文件夾。

云文件只可以存儲(chǔ)指定類(lèi)型格式的文件。詳見(jiàn)：uploadFile

云函數(shù)超時(shí)時(shí)間最大只能設(shè)置10s，在一些等待接口響應(yīng)的業(yè)務(wù)很容易超時(shí)。

需要做的代碼變更

xml部分

控件標(biāo)簽 bindtap -> onTap

控件標(biāo)簽 bindchange -> onChange

控件標(biāo)簽 bindinput -> onInput

渲染控制 wx: -> a:

image控件： bindtouchend -> onTap

canvas控件：canvas-id -> id

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

textarea控件：可以慎重添加controlled='true’標(biāo)簽，但是有坑，用了可能會(huì)出現(xiàn)用戶(hù)無(wú)法輸入的情況。

CSS部分

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

page注意p要小寫(xiě)，否則樣式不生效，微信無(wú)所謂。

JS部分

my.showLoading不支持mask參數(shù)，實(shí)測(cè)默認(rèn)是有遮罩的。

my.showLoading的title參數(shù)名替換為content，詳見(jiàn)：my.showLoading。

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

my.showToast沒(méi)有icon參數(shù)，取而代之的是type，title參數(shù)名替換為content，詳見(jiàn)：my.showToast。

支付寶的弱社交功能，Page內(nèi)沒(méi)有onShareAppMessage和onShareTimeline，只有onShareAppMessage，詳見(jiàn)：頁(yè)面運(yùn)行機(jī)制。

表單元素查詢(xún)不能使用this.selectComponent。

wx.setNavigationBarTitle -> my.setNavigationBar，詳見(jiàn)：my.setNavigationBar。

自定義組件

components不支持在調(diào)用它的頁(yè)面中selectComponent或createSelectorQuery獲取實(shí)例對(duì)象，需要在components的ref()中返回，在宿主的xml中使用ref標(biāo)簽定義監(jiān)聽(tīng)函數(shù)，在JS的對(duì)應(yīng)的監(jiān)聽(tīng)函數(shù)中獲取，詳見(jiàn)：ref 獲取組件實(shí)例。

開(kāi)發(fā)時(shí)遇到components的methods中的this指針沒(méi)有setData方法，已經(jīng)確定this指向沒(méi)有改變，按照官方文檔也不行。最后含有setData方法的this指針通過(guò)組件的didmount()生命周期的監(jiān)聽(tīng)函數(shù)中的this獲取。

比微信好的地方

云函數(shù)調(diào)用似乎沒(méi)有限制參數(shù)和返回結(jié)果的數(shù)據(jù)長(zhǎng)度，我用b64編碼一張圖片作為參數(shù)調(diào)用云函數(shù)，云函數(shù)返回一張圖片，居然成功了。在微信端會(huì)提示參數(shù)過(guò)長(zhǎng)，得先把圖片上傳云文件，云函數(shù)讀取云文件圖片讀取后把結(jié)果保存到云文件，本地在下載處理結(jié)果。

保存圖片到用戶(hù)相冊(cè)無(wú)需一長(zhǎng)串的權(quán)限申請(qǐng)，直接調(diào)用my.saveImageToPhotosAlbum即可，就是不支持模擬器調(diào)試。

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

數(shù)據(jù)庫(kù)更新支持"沒(méi)有則創(chuàng)建"的選項(xiàng)，這個(gè)比微信要好，詳見(jiàn)：updateOne。

獲取用戶(hù)的唯一id不需要通過(guò)云函數(shù)，只需要調(diào)用授權(quán)函數(shù)即可。

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

附錄一些常用的代碼段

云函數(shù)

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

數(shù)據(jù)庫(kù)

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

云文件

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

后語(yǔ)

經(jīng)過(guò)這次遷移，我知道微信漲價(jià)的底氣在哪了，支付寶的小程序云開(kāi)發(fā)感覺(jué)就是個(gè)半成品。支付寶的小程序大部分是一些點(diǎn)單的，交易的，其它類(lèi)別用的人并不多，所以開(kāi)發(fā)的除了商業(yè)需要，基本就像我一樣是純粹學(xué)習(xí)的。微信平臺(tái)則用戶(hù)眾多，社交屬性強(qiáng)大，這些更提供了它漲價(jià)的基礎(chǔ)。現(xiàn)在19.9元/月還能勉強(qiáng)承受，后面變成39我估計(jì)就下線小程序云功能了。。。看到這了，不點(diǎn)個(gè)贊再走嘛？

后記

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

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

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

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

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

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。