h5微信本地调试 vue_Vue 移动端微信内H5调起支付（利用js sdk）
前端的寫法
1.封裝wxPay.js
import wx from 'weixin-js-sdk' //先下載后引入
export function wexinPay(data) {
return new Promise((resolve, reject) => {
// 后臺傳入數據
const {
appId,
timeStamp,
nonceStr,
signature,
package,
paySign,
signType
} = data
// 驗證微信環境
wx.config({
debug: false, // 開啟調試模式,調用的所有api的返回值會在客戶端alert出來，若要查看傳入的參數，可以在pc端打開，參數信息會通過log打出，僅在pc端時才會打印。
appId: appId, // 必填，公眾號的唯一標識
timeStamp: timeStamp, // 必填，生成簽名的時間戳
nonceStr: nonceStr, // 必填，生成簽名的隨機串
signature: signature, // 必填，簽名，見附錄1
jsApiList: ['chooseWXPay'] // 必填，需要使用的JS接口列表，所有JS接口列表見附錄2
})
wx.ready(function() {
wx.chooseWXPay({
timeStamp: timeStamp, // 支付簽名時間戳，注意微信jssdk中的所有使用timestamp字段均為小寫。但最新版的支付后臺生成簽名使用的timeStamp字段名需大寫其中的S字符
nonceStr: nonceStr, // 支付簽名隨機串，不長于 32 位
package: packages, // 統一支付接口返回的prepay_id參數值，提交格式如：prepay_id=***)
signType: signType, // 簽名方式，默認為'SHA1'，使用新版支付需傳入'MD5'
paySign: paySign, // 支付簽名
success: function(res) {
// 支付成功后的回調函數
resolve(res)
},
fail: function(res) {
// 失敗回調函數
reject({
payFail: res
})
}
})
})
wx.error(function(res) {
reject({
configFail: res
})
// config信息驗證失敗會執行error函數
})
})
}
2.使用方法
import wxPay from '文件路徑'
wexinPay(res.data).then(res=>{
console.log("支付成功")
// do something
}).catch(err=>{
console.log('支付失敗')
// do something
})
總結
以上是生活随笔為你收集整理的h5微信本地调试 vue_Vue 移动端微信内H5调起支付（利用js sdk）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： nginx 上传文件 405_今天教大家
- 下一篇： html5倒计时秒杀怎么做,vue 设