微信支付文档
https://pay.weixin.qq.com/wiki/doc/api/index.html
微信JS-SDK说明文档
https://mp.weixin.qq.com/wiki?action=doc&id=mp1421141115&t=0.7006249496464214#4
引用微信JS文档
<script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>/* 第一时间调用微信api接口获取配置 */
wxConfig(){
//必须保证调起接口的页面URL是动态获取的
var myurl = location.href.split('#')[0];
myurl = encodeURIComponent(myurl);
var url = ` 获取配置的后台接口?url=${myurl}`;
this.$axios.post(url).then(data=>{
wx.config({
debug: false, // 开启调试模式,成功失败都会有alert框
appId: data.data.body.appId, // 必填，公众号的唯一标识
timestamp: data.data.body.timestamp, // 必填，生成签名的时间戳
nonceStr: data.data.body.nonceStr, // 必填，生成签名的随机串
signature: data.data.body.signature, // 必填，签名
jsApiList: [ 'onMenuShareTimeline',
'onMenuShareAppMessage',
'onMenuShareQQ',
'onMenuShareWeibo',
'scanQRCode'
] // 必填，需要使用的JS接口列表 选择自己需要的接口
});
wx.ready(function () {
// config信息验证后会执行ready方法，所有接口调用都必须在config接口获
得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载
时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。
对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
});
wx.error(function (res) {
// config信息验证失败会执行error函数，如签名过期导致验证失败，具体错
误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，
对于SPA可以在这里更新签名。
});
}).catch(err=>{
alert(err) })
}
/*配置成功后触发事件，调用微信扫一扫接口*/
wx.scanQRCode({
desc: 'scanQRCode desc',
needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
scanType: ["barCode"], // 可以指定扫二维码还是一维码，默认二者都有
success: function (res) { // 成功回调
console.log(res);
var code = res.resultStr.split(',')[1]; /* res.resultStr 为查询结果信息 */
},
error: function(res){// 失败回调
if(res.errMsg.indexOf('function_not_exist') > 0){
alert('版本过低请升级')
}
}
});/*微信支付配置*/
wxConfig(){
// 回调路由
var url="获得配置的后台接口";
this.$axios.get(url).then(res=>{
wx.config({ debug: false, // 开启调试模式,成功失败都会有alert框
appId: res.data.appid, // 必填，公众号的唯一标识
timestamp: res.data.timestamp, // 必填，生成签名的时间戳
nonceStr: res.data.noncestr, // 必填，生成签名的随机串
signature: res.data.paySign, // 必填，签名
jsApiList: ['chooseWXPay'] // 必填，需要使用的JS接口列表
});
wx.ready(function () {
// config信息验证后会执行ready方法，所有接口调用都必须在config接
口获得结果之后，config是一个客户端的异步操作，所以如果需要在
页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确
保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在
ready函数中。
});
wx.error(function (res) {
// config信息验证失败会执行error函数，如签名过期导致验证失败，
具体错误信息可以打开config的debug模式查看，也可以在返回的res参
数中查看，对于SPA可以在这里更新签名。
});
}).catch(err=>{
console.log(err);
})
}
/*调用下单接口后触发 ，调用微信支付 res 为下单接口返回data*/WeixinJSBridge.invoke(
'getBrandWCPayRequest',
{
appId: res.body.appid, //公众号名称，由商户传入
timeStamp: '"'+ res.body.timestamp +'"', //时间戳，自1970年以来的秒数
nonceStr: res.body.noncestr, //随机串
package: res.body.package,
signType: "MD5", //微信签名方式
paySign: res.body.paySign //微信签名
},
function (wxresult){ //成功回调
console.log('微信支付结果====',wxresult)
if (wxresult.err_msg == "get_brand_wcpay_request:ok") {
Toast({
message:"微信支付成功!"
});
/* 跳转到支付成功页面 */
var url = `支付成功页面的url`
window.location.href = url;
return;
} else if (wxresult.err_msg == "get_brand_wcpay_request:cancel"){
Toast({
message:'取消支付!',
duration:1500
});
return;
} else { //失败回调
Toast({
message:"支付失败!",
duration:1500
});
/* 跳转到失败页面 */
self.$router.push({ name:'PayFail', query:query });
return;
};
} );
