微信jsapi支付对接

2 篇文章 0 订阅
2 篇文章 0 订阅

微信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的基本字段
在这里插入图片描述

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值