使用vue开发H5对接微信支付

微信支付相对于支付宝支付来说比较麻烦，第一次对接也是研究了挺久才完成对接，在这里记录下我对接的办法；
第一步，我先创建了一个获取code的页面，页面具体内容如下：

getUrlKey是截取code的方法，具体为：
const getUrlKey = name => { //获取url 参数
return decodeURIComponent((new RegExp(’[?|&]’ + name + ‘=’ + ‘([^&;]+?)(&|#|;|$)’).exec(location.href) || [, “”])[1].replace(/+/g, ‘%20’)) || null;
}
getWxAuthUrl是后台获取code的方法，具体功能是把上图中的domine传过去，后台返回的是一个重定向的地址；
getWxUserInfo是获取openid的方法，具体功能是把code传给后台，后台返回openid，前端存储一下；
怎么监听用户是否授权我是写在了router.beforeEach里面，具体看下图：

然后openid就获取完成了，接下来是对接支付接口，在需要支付的页面设置一个这样的方法

点击支付触发的事件大致如下，可根据自己情况延伸

至此，支付就算对接完成了，因为第一次对接支付接口，有什么不足之处敬请见谅