code换取微信openid_微信支付JSAPI攻略

前两天给商城加了个微信支付(非H5支付，相当于微信公众号网页支付)。。

真是一言难尽啊，我只能说菜是原罪！再次流下了没技术的眼泪！

总结一下，大概分为7个步骤~

第一步：用户触发微信支付事件时。

我们大概需要判断一下它是不是用微信客户端打开的，如果不是，提醒用户用微信客户端打开。

 try { WeixinJSBridge && this.weChatPayOrderId() // 调用后续步骤 } catch (e) { this.close() // 关闭模态框 this.$toast('请在微信客户端打开') }

第二步：拿到订单ID

当用户触发支付按钮时，我们把这个商品的订单信息(商品数量，商品价格，支付方式之类的，后端会告诉你需要什么的)传递给后端，拿到后端返回的订单主键。

 // 微信支付第二步，拿到订单编号 weChatPayOrderId () { let obj = this.orderData() obj.payType = 21 // 微信支付为 21 addOrder(obj).then(res => { if (res.status === 0) { this.$toast(res.msg) this.close() } else { // 获取orderId,第六步时候需要用// alert(`第二步骤获取orderId：${res.content}`) Cookies.set('orderId', res.content) // 微信支付第三步，前往微信code获取页面 this.getWechatCodeCallback() } }) },

当我们拿到订单主键之后，我们就可以开展后续操作，前往微信给的页面拿到 code。

 // 微信支付第三步，前往微信code获取页面 getWechatCodeCallback () { let pageUrl = window.location.href .replace(/[/]/g, '%2f') .replace(/[:]/g, '%3a') .replace(/[#]/g, '%23') .replace(/[&]/g, '%26') .replace(/[=]/g, '%3d') window.location.href = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=' + appid + '&redirect_uri=' + pageUrl + '&response_type=code&scope=snsapi_userinfo#wechat_redirect' },

这一步大家可以直接复制粘贴，但是需要把 appid 换一下，appid是微信给你们公众号的。

当我们执行完第三步之后，微信那边会瞬间重定向回来，重定向的地址即为你页面设置的地址，比如我设置的为当前页面：

微信支付第四步，拿到微信那边返回的code

因为微信那边是瞬间重定向回来的，这时候它会携带code重定向回来，所有我们需要在页面加载完之后就解析一下url路径中有没有code，如果有，则说明这个页面是微信那边重定向回来的，它是微信支付页面，没有则说明这是一个用户正常进入的页面。

解析方式：

 // 微信支付第四步，拿到具体code getWechatCode () { function parse_url (url) { // 定义函数 var pattern = /(w+)=(w+)/gi // 定义正则表达式 var parames = {} // 定义数组 url.replace(pattern, function (a, b, c) { parames[b] = c }) return parames // 返回这个数组. } // 获取当前url 取到code let url = window.location.href let params = parse_url(url) return params.code },

这个函数会返回一个code(可以直接复制粘贴)

所以我们会解析url路径之后，我们只需要在页面进入之后执行一下这个函数，看看是不是微信那边重定向回来的，如果是，则进入第五步。

微信支付第五步，code换openid

后端需要 code 字段才可以请求微信那边的接口，拿到用户在该公众号的唯一标识，当然啦，这些都不是我们操心的，我们只需要把 code 传给后端，拿到它给的 openid 就可以啦。

 // 微信支付第五步，code换openid getOpenid (code) { getOpenid({ code }).then(res => { // alert(`微信支付第五步code换openid后端返回的参数：${JSON.stringify(res)}`) if (res.status === 0) return this.$toast(res.msg) let openid = res.content.openid// 调用支付第六步 this.callWeChat(openid) }) },

如果请求成功，则此刻我们已经拿到openid，调用第六步即可。

微信支付第六步，openid加orderId调取支付接口

反正我们后端是让我拿 openid(用户唯一标识)和orderid(该订单主键)来获取调用微信支付的相关信息，之前前面的几步就是为了拿到那些信息。

 // 微信支付第六步，openid加订单主键调取支付接口 callWeChat (openid) { getWechatPay({ orderId: Cookies.get('orderId'), openid }).then(res => { // alert(`微信支付第五步openid加orderId调取支付接口后端返回参数: ${JSON.stringify(res)}`) if (res.status === 0) return this.$toast(res.msg) this.wechatObj = res.content this.onBridgeReady(this.wechatObj) }) },

拿到的信息大概是这样的。

对，没错，你如果能直接拿到这些信息可以直接调用微信支付(不过一般来说还是要一直步骤的，起码openid跑不了),拿到这些，我们就可以把它传到微信，调微信的支付接口了。

传递微信支付参数列表，获取微信支付回调

嗯，官方文档是这样的：

哇塞，看起来超简单，复制粘贴一把梭：

WeixinJSBridge.invoke('getBrandWCPayRequest', wechatObj, function (res) {this.$router.push({name: 'total-order-index',query: {orderType: 1}})})

但是有坑啊！！！！我每次按官方文档调用的时候，它是偶尔可以调用成功，偶尔失败，嗯~，上周日还特意加班过来搞这个，网上查说是后端的原因~，总之就是各种不顺利(微信支付没法在开发者工具调试)，后来实在没招了，在外面包裹了一个定时器！！！我靠我靠，可以啦~真是的，花里胡哨的！

我一直以为它这个回调是支付成功之后的回调，所有无关异步，可是加了延迟直接就可以确是不争的时候~有点懵，不知道它内部怎么实现的。

相比之下，支付宝支付就简单太多了，阿里还是那个阿里

嗯~，这只是我自己的实现步骤，不代表其它的就不行昂~