### 小程序支付
* * *
小程序發起支付的解決方案有兩種，僅供測試使用
* 方案一：使用小程序消息，結合收銀臺模式，可以解決小程序支付
* 方案二：使用小程序跳轉到 小微聚付 小程序，支付后返回（下文詳細介紹的方案）
* * *
#### 接入整體流程
一、后端按照下面參數構造訂單參數
| 字段名稱 | 字段類型 | 必填參數 | 說明 |
| --- | --- | --- | --- |
| mchid | string(16) | Y | 商戶號 |
| total\_fee | int(16) | Y | 金額。單位：分 |
| out\_trade\_no | string(32) | Y | 用戶端自主生成的訂單號 |
| body | string(32) | N | 訂單標題 |
| attach | string(128) | N | 用戶自定義數據，在notify的時候會原樣返回 |
| notify\_url | string(255) | N | 異步通知地址 |
| nonce | string(128) | Y | 隨機字符串 |
| sign | string(32) | Y | 數據簽名 詳見[簽名算法](http://help.xiaoweijufu.com/1368912) |
二、小程序攜帶上述參數跳轉到 小微聚付 小程序
三、支付后自動返回，后端判斷訂單狀態
~~~
// 本代碼為演示碎片代碼
// 需與文檔中小程序章節結合使用 https://help.xiaoweijufu.com
// 跳轉
// 為小程序的支付按鈕綁定事件
bindPay: function() {
// 待傳入的
wx.request({
url: '商戶側后端請求支付參數的網址',
success: response => {
let extraData = {
'mchid': response['mchid'], // 商戶號
'total_fee': response['total_fee'],
'out_trade_no': response['out_trade_no'],
'body': response['body'],
'notify_url': response['notify_url'],
'attach': response['attach'],
'nonce': response['nonce'],
'sign': response['sign']
}
wx.navigateToMiniProgram({
appId: 'wx959c8c1fb2d89988',
path: 'pages/pay',
extraData: extraData,
success: () => {
console.log('等待返回支付結果')
// 做已經點擊過支付的標記
this.setData({
paying: true
})
},
fail: () => {
// 小程序跳轉失敗
// 做好錯誤處理
}
})
}
})
},
// 支付動作判斷
// 在全局的 onShow 內，針對場景值為 1038、來源 appid 為 wx959c8c1fb2d89988、跳轉到的頁面 id 為發起支付的頁面，則標記為支付成功、記錄支付的 payjs_order_id
// app.js
App({
onShow: function (options) {
if (options.scene === 1038 && options.referrerInfo && options.referrerInfo.appId === 'wx959c8c1fb2d89988') {
// 還應判斷請求路徑
let extraData = options.referrerInfo.extraData
this.globalData.paySuccess = extraData.success
this.globalData.resultCode = extraData.resultCode
this.globalData.msg = extraData.msg
this.globalData.payjsOrderId = extraData.payjsOrderId
}
},
globalData: {
resultCode: 'WAITING',
msg: '等待支付',
paySuccess: false,
}
})
// 在本頁面的 onShow 內，如果已經點擊過支付，則開始判斷小程序是否返回成功，繼而判斷是否支付成功
onShow: function (options) {
console.log(options)
if (this.data.paying) { // 標記：已經點擊過支付
// 注意輪詢判斷或延時判斷支付
// 從跳轉后狀態取值
let payjsOrderId = app.globalData.payjsOrderId
// 注意請求后端判斷是否支付成功而非通過前端判斷
wx.request({
method: 'POST',
url: '后端檢測是否支付成功的 url',
data: {
payjsOrderId
},
success: response => {
if (response.data.paySuccess) {
// 后端返回支付成功
// 執行成功后邏輯
} else {
// 后端返回尚未支付
// 提醒用戶重新支付或點擊「我已支付」發起重檢查
}
}
})
}
},
// 注意事項
// 頁面內 onShow 檢查小程序 app.js onShow 時建議使用輪詢或延時，因為 app.js 的 onShow 和小程序頁面的 onShow 均為異步，所以存在執行頁面 onShow 時 app.js 的 onShow 還未執行的可能
// 請勿以小程序跳轉結果作為判斷訂單狀態的依據，須后端查詢訂單狀態
~~~
#### 接入前準備
1.詳細閱讀小程序運營規范、[小程序支付規范](https://developers.weixin.qq.com/miniprogram/product/#14-%E5%B0%8F%E7%A8%8B%E5%BA%8F%E6%94%AF%E4%BB%98%E8%A7%84%E8%8C%83)，并遵照其中內容
2.在`app.json`中將 小微聚付 小程序的 APPID:`wx959c8c1fb2d89988`加入`navigateToMiniProgramAppIdList`配置項
3.在后臺設置開通
