微信H5支付(JSAPI支付)---前端篇

在開發(fā)微信h5支付查了資料說是有兩種喚起微信支付的方法：一種是利用內(nèi)置對(duì)象曹步，二是通過引用微信的js sdk,我只做過第二種方法的支付,下面主要講通過引用微信js sdk的支付培他。

想要了解內(nèi)置對(duì)象喚醒支付的睬魂，可以參考文檔：

https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=7_7&index=6

如何運(yùn)用 js sdk喚醒微信支付

官方文檔：https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115
第一步：綁定域名[必需]
??先登錄微信公眾平臺(tái)進(jìn)入“公眾號(hào)設(shè)置”的“功能設(shè)置”里填寫"js接口安全域名"族操。
第二步：引入js文件[必需]
??在需要調(diào)用JS接口的頁面引入如下JS文件糠馆，（支持https）：http://res.wx.qq.com/open/js/jweixin-1.4.0.js
第三步：通過config接口注入權(quán)限驗(yàn)證配置[必需]
??所有需要使用JS-SDK的頁面必須先注入配置信息擦盾，否則將無法調(diào)用（同一個(gè)url僅需調(diào)用一次窗怒，對(duì)于變化url的SPA的web app可在每次url變化時(shí)進(jìn)行調(diào)用,目前Android微信客戶端不支持pushState的H5新特性，所以使用pushState來實(shí)現(xiàn)web app的頁面會(huì)導(dǎo)致簽名失敗吏恭，此問題會(huì)在Android6.2中修復(fù)）拗小。

wx.config({
    debug: true, // 開啟調(diào)試模式,調(diào)用的所有api的返回值會(huì)在客戶端alert出來，若要查看傳入的參數(shù)樱哼，可以在pc端打開哀九，參數(shù)信息會(huì)通過log打出，僅在pc端時(shí)才會(huì)打印搅幅。
    appId: '', // 必填阅束，公眾號(hào)的唯一標(biāo)識(shí)
    timestamp: , // 必填，生成簽名的時(shí)間戳
    nonceStr: '', // 必填茄唐，生成簽名的隨機(jī)串
    signature: '',// 必填息裸，簽名
    jsApiList: [] // 必填，需要使用的JS接口列表
});

第四步：通過ready接口處理成功驗(yàn)證

wx.ready(function(){
    // config信息驗(yàn)證后會(huì)執(zhí)行ready方法沪编，所有接口調(diào)用都必須在config接口獲得結(jié)果之后呼盆，config是一個(gè)客戶端的異步操作，所以如果需要在頁面加載時(shí)就調(diào)用相關(guān)接口漾抬，則須把相關(guān)接口放在ready函數(shù)中調(diào)用來確保正確執(zhí)行宿亡。對(duì)于用戶觸發(fā)時(shí)才調(diào)用的接口，則可以直接調(diào)用纳令，不需要放在ready函數(shù)中挽荠。
});

第五步：通過error接口處理失敗驗(yàn)證

wx.error(function(res){
    // config信息驗(yàn)證失敗會(huì)執(zhí)行error函數(shù)克胳，如簽名過期導(dǎo)致驗(yàn)證失敗，具體錯(cuò)誤信息可以打開config的debug模式查看圈匆，也可以在返回的res參數(shù)中查看漠另，對(duì)于SPA可以在這里更新簽名。
});

接口說明：

接口調(diào)用說明

所有接口通過wx對(duì)象(也可使用jWeixin對(duì)象)來調(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ù)，無論成功或失敗都會(huì)執(zhí)行叹括。

4.cancel：用戶點(diǎn)擊取消時(shí)的回調(diào)函數(shù)算墨，僅部分有用戶取消操作的api才會(huì)用到。

5.trigger: 監(jiān)聽Menu中的按鈕點(diǎn)擊時(shí)觸發(fā)的方法汁雷，該方法僅支持Menu中的相關(guān)接口净嘀。

備注：不要嘗試在trigger中使用ajax異步請(qǐng)求修改本次分享的內(nèi)容，因?yàn)榭蛻舳朔窒聿僮魇且粋€(gè)同步操作侠讯，這時(shí)候使用ajax的回包會(huì)還沒有返回挖藏。

以上幾個(gè)函數(shù)都帶有一個(gè)參數(shù)，類型為對(duì)象厢漩，其中除了每個(gè)接口本身返回的數(shù)據(jù)之外膜眠，還有一個(gè)通用屬性errMsg，其值格式如下：

調(diào)用成功時(shí)："xxx:ok" 袁翁，其中xxx為調(diào)用的接口名

用戶取消時(shí)："xxx:cancel"柴底，其中xxx為調(diào)用的接口名

調(diào)用失敗時(shí)：其值為具體錯(cuò)誤信息

基礎(chǔ)接口：判斷當(dāng)前客戶端版本是否支持指定JS接口

wx.checkJsApi({
    jsApiList: ['chooseImage'], // 需要檢測(cè)的JS接口列表，所有JS接口列表見附錄2,
    success: function(res) {
    // 以鍵值對(duì)的形式返回粱胜，可用的api值true，不可用為false
    // 如：{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}
    }
});

發(fā)起一個(gè)微信支付請(qǐng)求 [必需]

wx.chooseWXPay({
timestamp: 0, // 支付簽名時(shí)間戳狐树，注意微信jssdk中的所有使用timestamp字段均為小寫焙压。但最新版的支付后臺(tái)生成簽名使用的timeStamp字段名需大寫其中的S字符
nonceStr: '', // 支付簽名隨機(jī)串，不長于 32 位
package: '', // 統(tǒng)一支付接口返回的prepay_id參數(shù)值抑钟，提交格式如：prepay_id=\*\*\*）
signType: '', // 簽名方式涯曲，默認(rèn)為'SHA1'，使用新版支付需傳入'MD5'
paySign: '', // 支付簽名
success: function (res) {
// 支付成功后的回調(diào)函數(shù)
}
});

注意事項(xiàng)

以上兩種H5的微信支付方法都需要注意以下兩點(diǎn)
1.設(shè)置支付目錄
??確保實(shí)際支付時(shí)的請(qǐng)求目錄與后臺(tái)配置的目錄一致在塔，否則將無法成功喚起微信支付

4347888-62d1144b90e15e61.png

4347888-ae3cbc973a0545da.png