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

前言：

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

網絡請求：

對於網絡請求，基本上改動不大，也就支付寶小程序沒有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:key,
　　　　　　  data: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),
    });
  }
});

交互反饋：

my.showToast()

//微信小程序
wx.showToast({
  title: '成功',
  icon: 'success',
  duration: 2000
})

//支付寶小程序
my.showToast({
  type: 'success',
  content: '操作成功',
  duration: 3000,
  success: () => {
    my.alert({
      title: 'toast 消失了',
    });
  },
});

微信到支付寶的移植：

先對比下兩者之間參數的差別:

如上，藍色為相同參數，可以不用修改，品紅色為功能相同字段名不同的參數，其他沒標出來的就是支付寶小程序中不支持的參數了。

一般在小程序中用的比較多的也就是純文字的,時間未默認顯示時長的toast提示，如：

wx.showToast({
  title: '成功',
  icon: 'none'
})

如果是這樣，使用其他參數較少，那么仍可以通過封裝公共方法來做轉換的，具體方法詳見同步緩存的快速移植。

當然，這種參數差別比較大的在替換之后也要全局搜索進行核對下，對極個別使用了不常用的參數的代碼進行處理。