微信jsapi支付详解

首先：需要先判断环境，如果不是微信环境下就切换成H5浏览器环境下支付。
前提配置：公众号要设置好支付域名，网页授权域名，企业账号，商户号，开通jsapi支付权限。

H5通过调用微信提供的JSbridge（WeixinJSBridge.invoke()）来唤起微信支付控件。
JSBridge，一个js桥帮助H5和Native之间的通信，因为js是运行在一个js容器里，与原生运行环境隔离，所以需要这种机制来实现这两个的双向通信。
第一步：我这边是要通过微信code发送请求给后端获取唤起微信弹窗参数。

引导微信用户授权获取code(访问特定的微信链接获取):

https://open.weixin.qq.com/connect/oauth2/authorize?appid=公众号APPID&redirect_uri=授权后重定向回调的链接地址&response_type=code&scope=应用授权作用域&state=STATE#wechat_redirect

Tips:回调链接地址需要urlencode转码处理 如 let url=urlencode(window.location.href)
授权后的code是拼接在回调地址上的 参数也是code

getQuery(name) {var result = window.location.search.match(new RegExp('[\\?\\&]' + name + '=([^\\&]+)', 'i'))if (result === null || result.length < 1) {return false}return result[1]} getQuery('code'）

发起请求：

发起请求 axios({method:'get',url:'/GW/URL',params:{产品Id,用户手机号，订购类型，微信code，交易流水号 }, }).then(res=>{ res.微信弹窗参数 })

第二步：获取到微信支付弹窗的参数：如appId,时间戳，随机窜，微信签名方式，微信签名。判断环境

// 支付只能在微信内置浏览器才有效果,在其他浏览器里面是无效的，进行判断if (typeof WeixinJSBridge == "undefined") {console.log("请在微信客户端打开");if (document.addEventListener) {document.addEventListener("WeixinJSBridgeReady",this.onBridgeReady(微信弹窗参数),false);} else if (document.attachEvent) {document.attachEvent("WeixinJSBridgeReady",this.onBridgeReady(微信弹窗参数));document.attachEvent("onWeixinJSBridgeReady",this.onBridgeReady(微信弹窗参数));}} else {this.onBridgeReady(微信弹窗参数);}

第三步：唤起支付弹窗

onBridgeReady(微信弹窗参数) {let that = this;WeixinJSBridge.invoke("getBrandWCPayRequest",{appId: 微信弹窗参数.weixinAppId, //公众号ID，由商户传入timeStamp: 微信弹窗参数.weixinTimestamp, //时间戳，自1970年以来的秒数nonceStr: 微信弹窗参数.weixinNonceStr, //随机串package: 微信弹窗参数.weixinPackage,signType: 微信弹窗参数.weixinSignType, //微信签名方式：paySign: 微信弹窗参数.weixinSign //微信签名},function(res) {if (res.err_msg == "get_brand_wcpay_request:ok") {// 使用以上方式判断前端返回,微信团队郑重提示：//res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。that.$alertMsg("支付成功");} else {that.$alertMsg("支付取消");}});}

总结

以上是生活随笔为你收集整理的微信jsapi支付详解的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。