微信支付【 WeChatPay 】
WeixinJSBridge.invoke、wx.chooseWXPay
業務需求：
現在涉及到微信相關的項目有很多，主要涉及到的功能有【微信自定義分享、微信支付等】。開發微信公眾號H5頁面時，需要使用微信支付進行金融支付。當微信支付完成【支付成功 點擊“完成”】時，需要出發相應的業務邏輯；比如：支付成功時跳轉到訂單頁面；支付失敗時跳轉到下訂單頁面；支付取消時保持當前訂單頁面不變等。
前期開發微信H5頁面時，大多考慮的就是【支付成功】之后如何處理，因為是剛接觸微信支付，大多都是采用刷新頁面獲取新數據的方式來更新支付狀態。這種方式可以解決當時面臨的問題，但是從業務邏輯來看，處理的方式不是很合理。
支付場景越來越多，對微信支付流程有了進一步的了解和認識，現在回過頭來對過去項目中使用【微信支付】的業務場景進行梳理和完善，進一步優化支付流程以及對支付后的不同狀態做相應的處理和優化，並結合實際情況做相應的業務邏輯分析。
支付方式：
- 方式一：微信支付【微信公眾號】
- 此支付方式需要在HTML頁面中引入JS文件，即【 jweixin-1.6.0.js 】；
- 此JS文件鏈接支持http和https兩種形式，引用時需要匹配當前項目的請求-響應協議（即http、https）；
- 該JS文件支持使用AMD/CMD標准模塊加載方式加載。
let WeChatPay = function() {
// 2、引入js后、獲取公眾號校驗信息
let timestamp = '',
nonceStr = '',
signature = '';
let v = {
// 用於換取微信校驗信息的參數：要求不可以包含 “#” 號
url: location.split('#')[0]
};
// 3、通過config接口注入權限驗證配置（需要同步進行，在獲取到校驗信息后方可注入config，否則校驗失敗！）
wx.config({
debug: true, // 開啟調試模式,調用的所有api的返回值會在客戶端alert出來，若要查看傳入的參數，可以在pc端打開，參數信息會通過log打出，僅在pc端時才會打印。
appId: '', // 必填，公眾號的唯一標識
timestamp: , // 必填，生成簽名的時間戳
nonceStr: '', // 必填，生成簽名的隨機串
signature: '', // 必填，簽名
jsApiList: ["checkJsApi", "chooseWXPay", "updateAppMessageShareData", "updateTimelineShareData"] // 必填，需要使用的JS接口列表
});
axios.post('/wx/pay/orderPay_XXXX', data).then(res => {
// 支付成功狀態
if (res.code == 200) {
// 獲取支付必備的參數
let {
nonceStr,
package,
signType,
paySign
} = res.data;
// 4、通過ready接口處理成功驗證
wx.ready(function() {
/* 微信支付 */
wx.chooseWXPay({
timestamp: 0, // 支付簽名時間戳，注意微信jssdk中的所有使用timestamp字段均為小寫。但最新版的支付后台生成簽名使用的timeStamp字段名需大寫其中的S字符
nonceStr: nonceStr, // 支付簽名隨機串，不長於 32 位
package: package, // 統一支付接口返回的prepay_id參數值，提交格式如：prepay_id=\*\*\*）
signType: signType, // 簽名方式，默認為'SHA1'，使用新版支付需傳入'MD5'
paySign: paySign, // 支付簽名
success: function(res) {
// 前端判斷返回方式，微信團隊鄭重提示：不保證絕對可靠，切記！
if (res.errMsg == 'chooseWXPay:ok') {
// 【支付成功】
} else if (res.errMsg == 'chooseWXPay:cancel') {
// 【支付取消】：用戶取消支付不會進入這個判斷，而是進入complate和cancel函數
} else {
}
},
complete: function(res) {
// 接口調用完成時執行的回調函數，無論成功或失敗都會執行
if (res.errMsg == 'chooseWXPay:ok') {
// 【支付成功】：支付成功提示頁面，點擊完成按鈕之后
wx.closeWindow(); /* 關閉微信窗口，調用時需要在config中進行校驗 */
} else if (res.errMsg == 'chooseWXPay:cancel') {
// 【支付取消】
} else {
}
/**
* iOS和Android支付成功點擊“完成”后都會進入success和complete函數，都返回'chooseWXPay:ok'
* （也有人說Android支付成功不進入success函數，）
* 原因是【iOS和Android返回數據不同。支付成功后Android返回 {"errMsg":"getBrandWCPayRequest:ok"}，iOS返回{"err_Info":"success","errMsg":"chooseWXPay:ok"}，故Android找不到success方法，導致失敗】
* */
},
fail: function(err) {
// 接口調用失敗
},
cancel: function(err) {
// 用戶點擊取消時的回調函數：用戶取消支付后實際上進入cancel 和 complate函數
}
});
});
}
}).catch(err => {
console.log('支付失敗：', err);
});
}
- 接口說明：【不要嘗試在trigger中使用ajax異步請求修改本次分享的內容，因為客戶端分享操作是一個同步操作，這時候使用ajax的回包會還沒有返回。】
- success：接口調用成功時執行的回調函數。
- fail：接口調用失敗時執行的回調函數。
- complete：接口調用完成時執行的回調函數，無論成功或失敗都會執行。
- cancel：用戶點擊取消時的回調函數，僅部分有用戶取消操作的api才會用到。
- trigger: 監聽Menu中的按鈕點擊時觸發的方法，該方法僅支持Menu中的相關接口。
- 方式二：微信支付【 JSAPI 支付】（常用支付方式）
function onBridgeReady() {
WeixinJSBridge.invoke(
'getBrandWCPayRequest', {
"appId": "appId", //公眾號名稱，由商戶傳入
"timeStamp": "timeStamp", //時間戳，自1970年以來的秒數
"nonceStr": "nonceStr", //隨機串
"package": "package",
"signType": "MD5", //微信簽名方式：
"paySign": "paySign" //微信簽名
},
function(res) {
// 支付成功
if (res.err_msg == "get_brand_wcpay_request:ok") {
// 使用以上方式判斷前端返回,微信團隊鄭重提示：
//res.err_msg將在用戶支付成功后返回ok，但並不保證它絕對可靠。
}
// 支付過程中用戶取消
if (res.err_msg == "get_brand_wcpay_request:cancel") {
}
// 支付失敗
if (res.err_msg == "get_brand_wcpay_request:fail") {
}
/**
* 其它
* 1、請檢查預支付會話標識prepay_id是否已失效
* 2、請求的appid與下單接口的appid是否一致
* */
if (res.err_msg == "調用支付JSAPI缺少參數：total_fee") {
}
});
}
// 檢測支付環境中的 WeixinJSBridge
if (typeof WeixinJSBridge == "undefined") {
if (document.addEventListener) {
document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
} else if (document.attachEvent) {
document.attachEvent('WeixinJSBridgeReady', onBridgeReady);
document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
}
} else {
onBridgeReady();
}
JSAPI調起支付注意事項：
- 在微信瀏覽器里打開H5網頁中執行JS調起支付；
- WeixinJSBridge是微信瀏覽器內置對象，在其他瀏覽器中無效；
- 調用支付傳遞的參數注意區分大小寫。