微信支付前端需要准备的东西以及流程
准备:微信公众平台的appId
流程:
1.用微信给的一串链接去访问拿到code
2.拿着code去请求后台拿到openId以及Unionid
3.拿到openId去获取签名以及生成签名的时间戳和随机串,prepay_id
代码如下
//获取code
pay(){
let local = encodeURIComponent(window.location.href); //获取当前页面地址作为回调地址
let appid = 'xxxxxxxxxxxxx' //自己申请的appId
//通过微信官方接口获取code之后,会重新刷新设置的回调地址【redirect_uri】
window.location.href ="https://open.weixin.qq.com/connect/oauth2/authorize?appid=" +
appid +"&redirect_uri=" +local +"&response_type=code" +"&scope=snsapi_userinfo&state=1#wechat_redirect";
},
getUrlCode(name) {
//截取code
return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.href) || [, ''])[1].replace(/\+/g, '%20')) || null
},
checkWeChatCode() {
//拿到code去换openId
let code = this.getUrlCode('code')
if (code) {
this.getOpenId(code)
}
},
getOpenId(code) {
this.$u.api.getOpenId({
code: code
}).then(res => {
if (res.success) {
var openId = res.data;
this.getKey(openId);
}
})
},
getKey(openId) {
//拿到签名调微信支付
this.$u.api.courseh5({
memberId: this.$store.state.userId,
courseId: this.id,
orderMoney: this.goodsdetail.price,
openId: openId
}).then(res => {
if (res.success) {
let _this = this;
_this.$wx.config({
debug: false,
appId: 'xxxxxxxxxxxxxxxxxx', // 必填,公众号的唯一标识
timestamp: res.data.paraMap.timeStamp, // 必填,生成签名的时间戳
nonceStr: res.data.paraMap.nonceStr, // 必填,生成签名的随机串
signature: res.data.paraMap.sign, // 必填,签名
jsApiList: ["chooseWXPay"] // 必填,需要使用的JS接口列表
})
_this.$wx.ready(function() {
_this.$wx.chooseWXPay({
timestamp: res.data.paraMap.timeStamp, // 支付签名时间戳,注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
nonceStr: res.data.paraMap.nonceStr, // 支付签名随机串,不长于 32 位
package: res.data.paraMap.package, // 统一支付接口返回的prepay_id参数值,提交格式如:prepay_id=\*\*\*)
signType: 'MD5', // 签名方式,默认为'SHA1',使用新版支付需传入'MD5'
paySign: res.data.paraMap.sign, // 支付签名
success: function(ret) {
// 支付成功后的回调函数
uni.redirectTo({
url: "./payok"
})
}
});
});
_this.error(err => {
console.log('config fail:', err);
});
}
})
},