在微信服務(wù)號(hào)開(kāi)發(fā)的時(shí)候經(jīng)常會(huì)遇到微信支付的功能實(shí)現(xiàn)，通過(guò)實(shí)際經(jīng)驗(yàn)自己總結(jié)了一下竖席，前端在H5頁(yè)面調(diào)起微信支付有兩種辦法，一是利用內(nèi)置對(duì)象毕荐，二是通過(guò)引用微信的js sdk，親測(cè)都能支付成功员寇，從寫(xiě)法上來(lái)看用內(nèi)置對(duì)象方法比較簡(jiǎn)單。這里講的只是前端要做的事情蝶锋，整個(gè)微信支付還有多一半的工作量需要后臺(tái)去實(shí)現(xiàn)什往，這里就不講了。
方法一（利用內(nèi)置對(duì)象）：
function onBridgeReady(){
WeixinJSBridge.invoke(
'getBrandWCPayRequest',?{
"appId":"wx2421b1c4370ec43b",?????//公眾號(hào)名稱别威，由商戶傳入
"timeStamp":"1395712654",?????????//時(shí)間戳，自1970年以來(lái)的秒數(shù)
"nonceStr":"e61463f8efa94090b1f366cccfbbb444",?//隨機(jī)串
"package":"prepay_id=u802345jgfjsdfgsdg888",
"signType":"MD5",?????????//微信簽名方式：
"paySign":"70EA570631E4BB79628FBCA90534C63FF7FADD89"?//微信簽名
},
function(res){
if(res.err_msg?==?"get_brand_wcpay_request:ok"?)?{}?????//?使用以上方式判斷前端返回,微信團(tuán)隊(duì)鄭重提示：res.err_msg將在用戶支付成功后返回????ok粥庄，但并不保證它絕對(duì)可靠豺妓。});}
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用法的詳細(xì)說(shuō)明見(jiàn)官方文檔：https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115
下面是支付環(huán)節(jié)用到的內(nèi)容，截取自js sdk的：
微信JS-SDK是微信公眾平臺(tái)面向網(wǎng)頁(yè)開(kāi)發(fā)者提供的基于微信內(nèi)的網(wǎng)頁(yè)開(kāi)發(fā)工具包载佳。
通過(guò)使用微信JS-SDK，網(wǎng)頁(yè)開(kāi)發(fā)者可借助微信高效地使用拍照蔫慧、選圖权薯、語(yǔ)音、位置等手機(jī)系統(tǒng)的能力盟蚣，同時(shí)可以直接使用微信分享、掃一掃阐枣、卡券、支付等微信特有的能力蔼两，為微信用戶提供更優(yōu)質(zhì)的網(wǎng)頁(yè)體驗(yàn)。
此文檔面向網(wǎng)頁(yè)開(kāi)發(fā)者介紹微信JS-SDK如何使用及相關(guān)注意事項(xiàng)妙啃。
步驟一：綁定域名?【必需】
先登錄微信公眾平臺(tái)進(jìn)入“公眾號(hào)設(shè)置”的“功能設(shè)置”里填寫(xiě)“JS接口安全域名”俊戳。
備注：登錄后可在“開(kāi)發(fā)者中心”查看對(duì)應(yīng)的接口權(quán)限。
步驟二：引入JS文件【必需】
在需要調(diào)用JS接口的頁(yè)面引入如下JS文件抑胎，（支持https）：http://res.wx.qq.com/open/js/jweixin-1.2.0.js
備注：支持使用 AMD/CMD 標(biāo)準(zhǔn)模塊加載方法加載
步驟三：通過(guò)config接口注入權(quán)限驗(yàn)證配置?【必需】
所有需要使用JS-SDK的頁(yè)面必須先注入配置信息，否則將無(wú)法調(diào)用（同一個(gè)url僅需調(diào)用一次突倍，對(duì)于變化url的SPA的web app可在每次url變化時(shí)進(jìn)行調(diào)用,目前Android微信客戶端不支持pushState的H5新特性盆昙，所以使用pushState來(lái)實(shí)現(xiàn)web app的頁(yè)面會(huì)導(dǎo)致簽名失敗，此問(wèn)題會(huì)在Android6.2中修復(fù)）淡喜。
wx.config({
debug: true, // 開(kāi)啟調(diào)試模式,調(diào)用的所有api的返回值會(huì)在客戶端alert出來(lái)，若要查看傳入的參數(shù)炼团，可以在pc端打開(kāi)，參數(shù)信息會(huì)通過(guò)log打出易桃，僅在pc端時(shí)才會(huì)打印锌俱。
appId: '', // 必填，公眾號(hào)的唯一標(biāo)識(shí)
timestamp: , // 必填贸宏，生成簽名的時(shí)間戳
nonceStr: '', // 必填，生成簽名的隨機(jī)串
signature: '',// 必填吭练，簽名，見(jiàn)附錄1
jsApiList: [] // 必填签赃，需要使用的JS接口列表谷异，所有JS接口列表見(jiàn)附錄2
});
wx.ready(function(){
// config信息驗(yàn)證后會(huì)執(zhí)行ready方法晰绎，所有接口調(diào)用都必須在config接口獲得結(jié)果之后括丁，config是一個(gè)客戶端的異步操作伶选，所以如果需要在頁(yè)面加載時(shí)就調(diào)用相關(guān)接口，則須把相關(guān)接口放在ready函數(shù)中調(diào)用來(lái)確保正確執(zhí)行构资。對(duì)于用戶觸發(fā)時(shí)才調(diào)用的接口，則可以直接調(diào)用吐绵，不需要放在ready函數(shù)中河绽。
});
wx.error(function(res){
// config信息驗(yàn)證失敗會(huì)執(zhí)行error函數(shù)，如簽名過(guò)期導(dǎo)致驗(yàn)證失敗耙饰，具體錯(cuò)誤信息可以打開(kāi)config的debug模式查看，也可以在返回的res參數(shù)中查看廷痘，對(duì)于SPA可以在這里更新簽名。
});
所有接口通過(guò)wx對(duì)象(也可使用jWeixin對(duì)象)來(lái)調(diào)用笋额，參數(shù)是一個(gè)對(duì)象篷扩，除了每個(gè)接口本身需要傳的參數(shù)之外，還有以下通用參數(shù)：
1.success：接口調(diào)用成功時(shí)執(zhí)行的回調(diào)函數(shù)鉴未。
2.fail：接口調(diào)用失敗時(shí)執(zhí)行的回調(diào)函數(shù)。
3.complete：接口調(diào)用完成時(shí)執(zhí)行的回調(diào)函數(shù)掏导，無(wú)論成功或失敗都會(huì)執(zhí)行。
4.cancel：用戶點(diǎn)擊取消時(shí)的回調(diào)函數(shù)趟咆，僅部分有用戶取消操作的api才會(huì)用到。
5.trigger: 監(jiān)聽(tīng)Menu中的按鈕點(diǎn)擊時(shí)觸發(fā)的方法值纱，該方法僅支持Menu中的相關(guān)接口。
備注：不要嘗試在trigger中使用ajax異步請(qǐng)求修改本次分享的內(nèi)容虐唠，因?yàn)榭蛻舳朔窒聿僮魇且粋€(gè)同步操作，這時(shí)候使用ajax的回包會(huì)還沒(méi)有返回疆偿。
以上幾個(gè)函數(shù)都帶有一個(gè)參數(shù)，類(lèi)型為對(duì)象迅箩，其中除了每個(gè)接口本身返回的數(shù)據(jù)之外，還有一個(gè)通用屬性errMsg饲趋，其值格式如下：
調(diào)用成功時(shí)："xxx:ok" 撤蟆，其中xxx為調(diào)用的接口名
用戶取消時(shí)："xxx:cancel"，其中xxx為調(diào)用的接口名
調(diào)用失敗時(shí)：其值為具體錯(cuò)誤信息
wx.checkJsApi({
jsApiList: ['chooseImage'], // 需要檢測(cè)的JS接口列表家肯，所有JS接口列表見(jiàn)附錄2,
success: function(res) {
// 以鍵值對(duì)的形式返回，可用的api值true寝贡，不可用為false
// 如：{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}
}
});
備注：checkJsApi接口是客戶端6.0.2新引入的一個(gè)預(yù)留接口，第一期開(kāi)放的接口均可不使用checkJsApi來(lái)檢測(cè)圃泡。
發(fā)起一個(gè)微信支付請(qǐng)求 【必需】
wx.chooseWXPay({
timestamp: 0, // 支付簽名時(shí)間戳愿险，注意微信jssdk中的所有使用timestamp字段均為小寫(xiě)。但最新版的支付后臺(tái)生成簽名使用的timeStamp字段名需大寫(xiě)其中的S字符
nonceStr: '', // 支付簽名隨機(jī)串辆亏，不長(zhǎng)于 32 位
package: '', // 統(tǒng)一支付接口返回的prepay_id參數(shù)值，提交格式如：prepay_id=***）
signType: '', // 簽名方式扮叨，默認(rèn)為'SHA1'，使用新版支付需傳入'MD5'
paySign: '', // 支付簽名
success: function (res) {
// 支付成功后的回調(diào)函數(shù)
}
});
注意：以上兩種H5的微信支付方法都需要注意以下兩點(diǎn)
一碍沐、設(shè)置支付目錄
請(qǐng)確保實(shí)際支付時(shí)的請(qǐng)求目錄與后臺(tái)配置的目錄一致狸捅，否則將無(wú)法成功喚起微信支付尘喝。
二斋陪、設(shè)置授權(quán)域名
開(kāi)發(fā)公眾號(hào)支付時(shí)，在統(tǒng)一下單接口中要求必傳用戶openid无虚，而獲取openid則需要您在公眾平臺(tái)設(shè)置獲取openid的域名，只有被設(shè)置過(guò)的域名才是一個(gè)有效的獲取openid的域名，否則將獲取失敗构拳。
