第一步:配置微信基本配置
/*
* 获取微信配置
以下的参数后台提供
这里切记,经常会报错,
因为页面的url的问题,
我这里是后台写死的,根据不同的环境配置不同url
* */
initWxConfig () {
this.$fetch(url).then(res => {
console.log(res)
wx.config({
debug: false,
appId: res.data.appId,
timestamp: res.data.timestamp,
nonceStr: res.data.noncestr,
signature: res.data.signature,
jsApiList: ['chooseWXPay']
})
wx.ready(res => {
wx.checkJsApi({
jsApiList: ['chooseWXPay'],
success: res => {
console.log('checked api:', res)
},
fail: err => {
console.log('check api fail:', err)
}
})
})
})
}
当你看到这样即获取微信基本配置成功
第二步:调用微信支付
这里需要的参数都是后台自己调取微信之后提供给前端,
这里重点说一下基本错误,
我这边报错是因为后台没有提供paySign支付签名 所以报错
这里是需要在微信的商户后台配置支付页面的url,切记是支付页面的上一个页面的路径
/*
* 先是用户下单,下完单之后再调取微信支付
* */
this.$post(url).then(res => {
let data = JSON.parse(res.data.paySign)
wx.chooseWXPay({
// 支付签名时间戳,注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
timestamp: data.timeStamp,
// 支付签名随机串,不长于 32 位
nonceStr: data.nonceStr,
// 统一支付接口返回的prepay_id参数值,提交格式如:prepay_id=\*\*\*)
package: data.package,
// 签名方式,默认为'SHA1',使用新版支付需传入'MD5'
signType: data.signType,
// 支付签名
paySign: data.paySign,
// 支付成功后的回调函数
success: function (res) {
// res.errMsg === 'chooseWXPay:ok'方式判断前端返回,微信团队郑重提示:
// res.errMsg将在用户支付成功后返回ok,但并不保证它绝对可靠, 切记。
if (res.errMsg === 'chooseWXPay:ok') {
that.$router.push({
name: 'ReturnPage',
query: {
orderNo: res.data.orderBaseinfo.orderNo
}
})
}
},
// 支付取消回调函数
cancel: function (res) {
Toast('用户取消支付~')
},
// 支付失败回调函数
fail: function (res) {
Toast('支付失败~')
}
})
})
第三步:到这里基本都可以调通了,至于怎么处理成功回调和错误回调需根据原型,哈哈
谢谢大家