Vue|Vue — 微信公众号内置h5支付相关 Vue—微信公众号内置h5支付相关

首先，在公众号后台配置h5页面地址
开发流程 【Vue|Vue — 微信公众号内置h5支付相关】1.通过配置h5地址，获取code。再通过code，获取openid

getOpenid(){
let url = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx697881XXXXXXXX&redirect_uri=https://XXXXX.com&response_type=code&scope=snsapi_userinfo&state=access#wechat_redirect'

let self = this;
let access_code=this.GetQueryString('code');
let local = window.location.href;
if (access_code == null) {
window.location.href = https://www.it610.com/article/url;
} else {
self.curCode = access_code;
self.$axios.get(self.baseUrl+'/api/weixin/openid/'+ self.curCode).then(res =>{
if(res.data.data.openid == ''){
window.location.href = https://www.it610.com/article/url;
}
self.openid = res.data.data.openid;
self.token = res.data.data.token;
localStorage.setItem('openid',self.openid);
self.getCerList();
})
}
},

GetQueryString(name){
var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
var r = window.location.search.substr(1).match(reg)
if(r!=null)returnunescape(r[2]); return null;
}

将获取到的openid和token保存起来（有时获取的openid为空，可以重新再获取一遍）
2.提交支付，获取 prepay_id 和 appid

saveForm: function () { var self = this; if(!self.checkForm()){ self.$toast.center('输入有误，请检查'); return false; } var data = https://www.it610.com/article/{ cert_id:self.curCertId, cert_name:self.curCertName, cert_type:0, wechat_id: localStorage.openid } self.$axios({ method:"post", url:self.baseUrl+'/api/v1/weixin/applicants/users', headers:{ 'Content-Type': 'application/json' }, data:data, }).then((res)=>{ if(res.data.success){ self.getOrderMsg(); }else{ self.$toast.center(res.data.msg); } }) }, getOrderMsg(){ let self = this; let openid = localStorage.getItem('openid'); self.$axios({ method:"get", url:self.baseUrl+'/api/v1/weixin/wxorder/'+ openid +'/'+ self.curCertId, }).then((res)=>{ if(res.data.success){ let data = https://www.it610.com/article/res.data.data; let price = data.price; if(price == 0){//免费 this.$router.push({path:'/Wait'}); }else{ let appid = data.appid; let prepayid = data.prepay_id; let name = data.name; let apikey = data.apikey; let orderid = data.orderid; this.$router.push({path:'/Order',query:{appid:appid,prepayid:prepayid,price:price,name:name,orderid:orderid,apikey:apikey}}); }}else{ self.$toast.center(res.data.msg); } })},

3.参见微信开发文档，逐一获得相关参数
https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=7_7&index=6

data() { return { prepayid:'', price:'', name:'', orderid:'', apikey:'',timestamp:'', time:0, orderData:{ appId:'', nonceStr:'', package:'', signType:'MD5', timeStamp:'', }, paySign:'', } }

getParams: function(){ var self = this; self.orderData.appId = self.$route.query.appid; self.orderData.package = 'prepay_id=' + self.$route.query.prepayid; self.price = Number(self.$route.query.price)/100; self.name = self.$route.query.name; self.orderid = self.$route.query.orderid; self.apikey = self.$route.query.apikey; self.getOrderData(); }, getOrderData(){ this.getTimeStamp(); //获取时间戳 this.orderData.nonceStr = this.getNonceStr(32); //获取32位随机数 this.getPaySign(this.orderData); //生成签名 },

获取时间戳参数

getTimeStamp(){ const DATE = new Date(); this.orderData.timeStamp = Date.parse(DATE)/1000 + ''; //秒数例如：1414561699 this.time = this.formatDate(); }

formatDate() {//时间格式 let date = new Date(); let y = date.getFullYear(); let MM = date.getMonth() + 1; MM = MM < 10 ? ('0' + MM) : MM; let d = date.getDate(); d = d < 10 ? ('0' + d) : d; let h = date.getHours(); h = h < 10 ? ('0' + h) : h; let m = date.getMinutes(); m = m < 10 ? ('0' + m) : m; let s = date.getSeconds(); s = s < 10 ? ('0' + s) : s; return y + '-' + MM + '-' + d + ' ' + h + ':' + m + ':' + s; }

获取随机数参数

getNonceStr(n){//生成 n 位随机数 let chars = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z']; let res = ""; for(let i = 0; i < n; i++) { let id = Math.ceil(Math.random() * 35); res += chars[id]; } return res; }

生成签名

getPaySign(obj){ let self = this; const params = []; Object.keys(obj).forEach((key) => { let value = https://www.it610.com/article/obj[key] // 如果值为undefined我们将其置空 if (typeof value ==='undefined') { valuehttps://www.it610.com/article/= '' } // 对于需要编码的文本（比如说中文）我们要进行编码 // params.push([key, encodeURIComponent(value)].join('=')) params.push([key, value].join('=')) }) let stringA = params.join('&'); let stringSingTemp = stringA + '&key='+self.apikey; let sign = md5(stringSingTemp).toUpperCase(); self.paySign = sign;
var testparams = { "appId":self.orderData.appId,//公众号名称，由商户传入 "timeStamp":self.orderData.timeStamp,//时间戳，自1970年以来的秒数 "nonceStr":self.orderData.nonceStr, //随机串 "package": self.orderData.package, "signType":self.orderData.signType,//微信签名方式: "paySign":self.paySign,//微信签名 'key':self.apikey }}

可以通过签名校验工具进行验证

文章图片

4.调起微信支付接口

pay(){ let self = this; if (typeof WeixinJSBridge == "undefined"){ if( document.addEventListener ){ document.addEventListener('WeixinJSBridgeReady',self.onBridgeReady,false); }else if (document.attachEvent){ document.attachEvent('WeixinJSBridgeReady', self.onBridgeReady); document.attachEvent('onWeixinJSBridgeReady', self.onBridgeReady); } }else{ self.onBridgeReady(); }},

onBridgeReady(){ let self = this; var params = { "appId":self.orderData.appId,//公众号名称，由商户传入 "timeStamp":self.orderData.timeStamp,//时间戳，自1970年以来的秒数 "nonceStr":self.orderData.nonceStr,//随机串 "package": self.orderData.package, "signType":self.orderData.signType,//微信签名方式:MD5 "paySign":self.paySign,//微信签名 }; WeixinJSBridge.invoke('getBrandWCPayRequest',params ,function(res){ if(res.err_msg == "get_brand_wcpay_request:ok"){ self.$router.push('/Wait'); }else if(res.err_msg == "get_brand_wcpay_request:cancel"){ self.$toast.center('取消支付！'); }else{ alert(JSON.stringify(res)); } }); },

这是调起支付密码页面