首先在vue里下载依赖
npm install weixin-jsapi
然后在需要使用的页面中引入
import wx from 'weixin-jsapi'
//微信支付
wx.config({
debug: false, // 这里一般在测试阶段先用ture,等打包给后台的时候就改回false,
appId: ost.appId, // 必填,公众号的唯一标识
timestamp: ost.timeStamp, // 必填,生成签名的时间戳
nonceStr: ost.nonceStr, // 必填,生成签名的随机串
signature: ost.paySign, // 必填,签名
jsApiList: ["chooseWXPay"], // 必填,需要使用的JS接口列表
});
wx.ready(() => {
wx.checkJsApi({
jsApiList: ["chooseWXPay"],
success: function(res) {
console.log("seccess");
console.log("hskdjskjk", res);
},
fail: function(res) {
console.log("fail");
console.log(res);
},
});
wx.chooseWXPay({
// 这些ost.数据是从后台请求过来的
timestamp: ost.timeStamp, // 支付签名时间戳,注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
nonceStr: ost.nonceStr, // 支付签名随机串,不长于 32 位
package: ost.package, // 统一支付接口返回的prepay_id参数值,提交格式如:prepay_id=\*\*\*)
signType: ost.signType, // 签名方式,默认为'SHA1',使用新版支付需传入'MD5'
paySign: ost.paySign, // 支付签名
success: function(res) {
console.log(res, "支付成功的回调");
// 支付成功后的回调函数
// that.getUserRecharge();
},
fail: function(res) {
console.log(res, "支付失败的回调");
that.$public170.dataAlert("支付失败");
// alert('支付失败');
// alert(res.errMsg);
},
complete: function(res) { //使用支付完成的回调,不代表支付成功
console.log(res, "支付完成");
if (res.errMsg == "getBrandWCPayRequest:ok" ||res.errMsg == "chooseWXPay:ok") //在这里判断是否支付成功,然后进行支付成功后的操作事件
{
console.log("进入支付刷新");
that.getUserRecharge();
}
},
});
});