1. 程式人生 > >支付寶小程序開發之與微信小程序不同的地方

支付寶小程序開發之與微信小程序不同的地方

示例代碼 調用 頁面 同步 get 沒有 小程序開發 bsp success

前言:

本文僅匯總微信小程序移植支付寶小程序過程中遇到的一些不同的地方,詳細請參考官方開發文檔。

網絡請求:

對於網絡請求,基本上改動不大,也就支付寶小程序沒有responseType屬性及響應碼字段改成了status。

技術分享圖片

用戶授權登錄:

1. 登錄:

wx.login   ====   my.getAuthCode wx.checkSession  ====  無(需後端接口驗證)

緩存:

以常用的 wx.getStorageSync() 為例,先看微信的代碼:

wx.setStorageSync("id", "1315151")
var id = wx.getStorageSync("id")
console.log(
"id", id)//輸出 id 1315151

但是同樣的代碼在支付寶小程序中返回的確是不同的結果:

技術分享圖片

可見支付寶小程序中 wx.getStorageSync() 的使用與微信不同了,結合支付寶小程序開發文檔及實例驗證,支付寶小程序同步獲取緩存的示例代碼如下:

my.setStorageSync({ key: "id", data: "1315151" })
var res= my.getStorageSync({ key: ‘id‘ })
console.log("id", res)//輸出  res{success:true,key:"id",data:"1315151"}   

可見支付寶小程序中同步緩存獲取的參數一定是要傳入對象了,這用起來就有點不太習慣了。如果要做微信小程序的移植,那麽就只有搜索所有 getStorageSync ,然後進行相應的修改了。

當然也可以直接在utils.js中封裝一個公共函數,用來將支付寶小程序同步緩存獲取方式直接轉化成微信小程序的調用方式。具體代碼如下:

//app.js
const getStorageSync = function(key) {  
    return my.getStorageSync({
        key: key
    }).data || null
}

App({
    ...

   setStorageSync:
function(key, data) {       return my.setStorageSync({ key: data })     }, getStorageSync: function(key) {       return getStorageSync(key)     }, ... }); //index.js const app = getApp() Page({ ... my.setStorageSync("id", "1315151") var id = app.getStorageSync(‘id‘) console.log("id", id) //輸出 id 1315151 ... })

只需要保證每個需要獲取同步緩存是腳本中獲取應用實例app,那麽直接全局搜索 “my.getStorageSync" 替換為 "app.getStorageSync" ,這樣之前微信小程序復用過來的這塊兒代碼改動就很小了。

PS:

1.js中參數對象中如果也有獲取同步緩存的代碼,那麽並不能直接引用上邊封裝的函數,只能用原生的方法去寫,或者把封裝的函數放到App外邊,如:

const getStorageSync=function(key) {
  return my.getStorageSync({ key: key }).data || null
}
App({
  ...
  getStorageSync:function(key){
    return getStorageSync(key)
  },
  globalData: {
    userInfo: null,
    globalShareInfo: {
      ...
      path: ‘/pages/index/index?goods_id=‘ + getStorageSync("goods_id"),
  ...
  }
});

這樣在app內部都可以調用封裝的getStorageSync函數了,但是這個函數還是要放在app內部開發出去給頁面使用的。

2. 其他公共腳本,如utils.js,不建議因這一個功能引入整個app.js,建議直接使用原生代碼,如果用的地方多,也可以在utils.js內部封裝:

my.getStorageSync({ key: "token" }).data || ""

小程序喚起支付:

微信:

wx.requestPayment({
  timeStamp: ‘‘,
  nonceStr: ‘‘,
  package: ‘‘,
  signType: ‘MD5‘,
  paySign: ‘‘,
  success (res) { },
  fail (res) { }
})

支付寶:

my.tradePay({
  tradeNO: ‘201711152100110410533667792‘, // 調用統一收單交易創建接口(alipay.trade.create),獲得返回字段支付寶交易號trade_no
  success: (res) => {
    my.alert({
      content: JSON.stringify(res),
    });
  },
  fail: (res) => {
    my.alert({
      content: JSON.stringify(res),
    });
  }
});

支付寶小程序開發之與微信小程序不同的地方