微信jsapi对接首先需要获取code传给后台以获取用户的openid
刚进入页面需要判断是否是在微信app内部打开你页面的连接
var is_weixin = (function(){return navigator.userAgent.toLowerCase().indexOf('micromessenger') !== -1})();
当页面加载完成(){
if(is_weixin){
this.isLink()
}
}
为什么要获取code?
package:统一下单接口返回的prepay_id参数值,提交格式如:prepay_id=***
prepay_id = code(前端获取)——>openid(后台拿code去获取openid)——>prepay_id(后台拿openid再去获取prepay_id)
//判断链接 跳转微信回调以获取code
isLink(){
var self = this;
// alert(self.urlAll)
//self.urlAll = window.location.href
if(self.urlAll.indexOf('code=')=='-1'){
//需要换成自己公司的appid
var appId = "111111111";
var redirect_uri = window.location.origin + window.location.pathname;
//这个链接的格式是固定的 参数换为自己的即可,访问之后微信会在redirect_uri后自动拼接code
//如你自己的地址为a.com 则访问这个页面后地址会变为a.com?code=xxx 只能在微信内打开有效
//encodeURIComponent是对url的地址进行urlEncode处理(微信需求)
window.location.replace("https://open.weixin.qq.com/connect/oauth2/authorize?appid="+appId+"&redirect_uri="+encodeURIComponent(self.urlAll)+"&response_type=code&scope=snsapi_base&state=STATE&connect_redirect=1#wechat_redirect")
}else{
//这里是获取code传给后台,来换取预支付id
this.code = this.getUrlParam('code')
//调用后台的pay方法
//这里是后台写的支付接口,不一定只是传个code,可能会根据业务需要传其他参数,总之让你传啥传啥,调用成功后直接调取后面的 wxInnerPay()方法即可
this.pay(code)
}
},
//这个是获取地址栏中的参数
getUrlParam(name) {
var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');
console.log( window.location.search)
var r = window.location.href.split('?')[1].match(reg);
if (r != null) {
return unescape(r[2]);
}
return null;
},
<script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
//这里切记,页面js一定要引入微信的jsapi,如上
//下面的两个方法内部基本不用动,原样粘上即可
//微信内吊起支付
wxInnerPay(res) {
//res的基本数据我用图给你们看一下 暂放在代码底部
const pay_params = res
console.log(res)
if (typeof WeixinJSBridge == "undefined"){
if( document.addEventListener ){
document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
}else if (document.attachEvent){
document.attachEvent('WeixinJSBridgeReady', onBridgeReady);
document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
}
}else{
console.log('onBridgeReady')
this.onBridgeReady(pay_params);
}
},
onBridgeReady(params) {
const pay_params = params;
const self = this;
console.log(params)
WeixinJSBridge.invoke(
'getBrandWCPayRequest', {
"appId": pay_params.appId, //公众号名称,由商户传入
"timeStamp": pay_params.timeStamp, //时间戳,自1970年以来的秒数
"nonceStr": pay_params.nonceStr, //随机串
"package": pay_params.package,
"signType": pay_params.signType, //微信签名方式:
"paySign": pay_params.sign //微信签名
},
function(res){
console.log(res)
if(res.err_msg == "get_brand_wcpay_request:ok" ){
// self.queryThirdOrder(3)
}
});
},
下面是res的基本字段