前端如何在H5頁面調起微信支付
在微信服務號開發的時候經常會遇到微信支付的功能實現，通過實際經驗自己總結了一下，前端在H5頁面調起微信支付有兩種辦法，一是利用內建物件，二是通過引用微信的js sdk，親測都能支付成功，從寫法上來看用內建物件方法比較簡單。這裡講的只是前端要做的事情，整個微信支付還有多一半的工作量需要後臺去實現，這裡就不講了。
方法一（利用內建物件）：
function onBridgeReady(){
WeixinJSBridge.invoke(
'getBrandWCPayRequest', {
"appId":"wx2421b1c4370ec43b", //公眾號名稱，由商戶傳入
"timeStamp":"1395712654", //時間戳，自1970年以來的秒數
"nonceStr":"e61463f8efa94090b1f366cccfbbb444", //隨機串
"package":"prepay_id=u802345jgfjsdfgsdg888",
"signType":"MD5", //微信簽名方式：
"paySign":"70EA570631E4BB79628FBCA90534C63FF7FADD89" //微信簽名
},
function(res){
if(res.err_msg == "get_brand_wcpay_request:ok" ) {} // 使用以上方式判斷前端返回,微信團隊鄭重提示：res.err_msg將在使用者支付成功後返回 ok，但並不保證它絕對可靠。});}
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();}
方法二（利用js sdk）：
js sdk用法的詳細說明見官方文件：https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115
下面是支付環節用到的內容，擷取自js sdk的：
微信JS-SDK是微信公眾平臺面向網頁開發者提供的基於微信內的網頁開發工具包。
通過使用微信JS-SDK，網頁開發者可藉助微信高效地使用拍照、選圖、語音、位置等手機系統的能力，同時可以直接使用微信分享、掃一掃、卡券、支付等微信特有的能力，為微信使用者提供更優質的網頁體驗。
此文件面向網頁開發者介紹微信JS-SDK如何使用及相關注意事項。
步驟一：繫結域名 【必需】
先登入微信公眾平臺進入“公眾號設定”的“功能設定”裡填寫“JS介面安全域名”。
備註：登入後可在“開發者中心”檢視對應的介面許可權。
步驟二：引入JS檔案【必需】
在需要呼叫JS介面的頁面引入如下JS檔案，（支援https）：http://res.wx.qq.com/open/js/jweixin-1.2.0.js
備註：支援使用 AMD/CMD 標準模組載入方法載入
所有需要使用JS-SDK的頁面必須先注入配置資訊，否則將無法呼叫（同一個url僅需呼叫一次，對於變化url的SPA的web app可在每次url變化時進行呼叫,目前Android微信客戶端不支援pushState的H5新特性，所以使用pushState來實現web app的頁面會導致簽名失敗，此問題會在Android6.2中修復）。
wx.config({
debug: true, // 開啟除錯模式,呼叫的所有api的返回值會在客戶端alert出來，若要檢視傳入的引數，可以在pc端開啟，引數資訊會通過log打出，僅在pc端時才會列印。
appId: '', // 必填，公眾號的唯一標識
timestamp: , // 必填，生成簽名的時間戳
nonceStr: '', // 必填，生成簽名的隨機串
signature: '',// 必填，簽名，見附錄1
jsApiList: [] // 必填，需要使用的JS介面列表，所有JS介面列表見附錄2
});
wx.ready(function(){
// config資訊驗證後會執行ready方法，所有介面呼叫都必須在config介面獲得結果之後，config是一個客戶端的非同步操作，所以如果需要在頁面載入時就呼叫相關介面，則須把相關介面放在ready函式中呼叫來確保正確執行。對於使用者觸發時才呼叫的介面，則可以直接呼叫，不需要放在ready函式中。
});
wx.error(function(res){
// config資訊驗證失敗會執行error函式，如簽名過期導致驗證失敗，具體錯誤資訊可以開啟config的debug模式檢視，也可以在返回的res引數中檢視，對於SPA可以在這裡更新簽名。
});
所有介面通過wx物件(也可使用jWeixin物件)來呼叫，引數是一個物件，除了每個介面本身需要傳的引數之外，還有以下通用引數：
1.success：介面呼叫成功時執行的回撥函式。
2.fail：介面呼叫失敗時執行的回撥函式。
3.complete：介面呼叫完成時執行的回撥函式，無論成功或失敗都會執行。
4.cancel：使用者點選取消時的回撥函式，僅部分有使用者取消操作的api才會用到。
5.trigger: 監聽Menu中的按鈕點選時觸發的方法，該方法僅支援Menu中的相關介面。
備註：不要嘗試在trigger中使用ajax非同步請求修改本次分享的內容，因為客戶端分享操作是一個同步操作，這時候使用ajax的回包會還沒有返回。
以上幾個函式都帶有一個引數，型別為物件，其中除了每個介面本身返回的資料之外，還有一個通用屬性errMsg，其值格式如下：
呼叫成功時："xxx:ok" ，其中xxx為呼叫的介面名
使用者取消時："xxx:cancel"，其中xxx為呼叫的介面名
呼叫失敗時：其值為具體錯誤資訊
wx.checkJsApi({
jsApiList: ['chooseImage'], // 需要檢測的JS介面列表，所有JS介面列表見附錄2,
success: function(res) {
// 以鍵值對的形式返回，可用的api值true，不可用為false
// 如：{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}
}
});
備註：checkJsApi介面是客戶端6.0.2新引入的一個預留介面，第一期開放的介面均可不使用checkJsApi來檢測。
發起一個微信支付請求 【必需】
wx.chooseWXPay({
timestamp: 0, // 支付簽名時間戳，注意微信jssdk中的所有使用timestamp欄位均為小寫。但最新版的支付後臺生成簽名使用的timeStamp欄位名需大寫其中的S字元
nonceStr: '', // 支付簽名隨機串，不長於 32 位
package: '', // 統一支付介面返回的prepay_id引數值，提交格式如：prepay_id=***）
signType: '', // 簽名方式，預設為'SHA1'，使用新版支付需傳入'MD5'
paySign: '', // 支付簽名
success: function (res) {
// 支付成功後的回撥函式
}
});
注意：以上兩種H5的微信支付方法都需要注意以下兩點
一、設定支付目錄
請確保實際支付時的請求目錄與後臺配置的目錄一致，否則將無法成功喚起微信支付。
二、設定授權域名
開發公眾號支付時，在統一下單介面中要求必傳使用者openid，而獲取openid則需要您在公眾平臺設定獲取openid的域名，只有被設定過的域名才是一個有效的獲取openid的域名，否則將獲取失敗。
作者：溫室尋荒涼
連結：https://www.jianshu.com/p/d04ec2891b1b
來源：簡書
簡書著作權歸作者所有，任何形式的轉載都請聯絡作者獲得授權並註明出處。