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

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

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

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

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

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

欢迎大家来到IT世界,在知识的湖畔探索吧!

第二步：拿到订单ID

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

欢迎大家来到IT世界,在知识的湖畔探索吧! // 微信支付第二步，拿到订单编号
 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，如果有，则说明这个页面是微信那边重定向回来的，它是微信支付页面，没有则说明这是一个用户正常进入的页面。

解析方式：

欢迎大家来到IT世界,在知识的湖畔探索吧! // 微信支付第四步，拿到具体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
						}
					})
				})

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

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

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

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