最近做了一个答题应用，甲方要求，用户进入应用先答题，最后点微信支付的时候，再授权，支付。
我的实现思路是点击微信支付按钮时，跳转到某个地址获取授权
redirect_uri 需要先在微信公众号后台支付授权目录里设置，需要跳转的路由，前台也应该存在
xxx/pay。由于支付目录不允许hash地址，vue路由模式需要设置为history模式
handlePayMoney() {if (isWXBrowser) {window.location.href = "https://open./connect/oauth2/authorize?appid=XXXXXXXXXX&redirect_uri=http:/pay&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect"}}参数必填说明appid是公众号唯一标识redirect_uri是授权后的回调链接地址response_type是返回类型，codescope是授权方式state否重定向参数connect_redirect否动态参数，=1 发一次请求#wechat_redirect是重定向必带参数
// 判断是否微信环境export const isWXBrowser = (() => {const ua = window.navigator.userAgent.toLowerCase()return /(micromessenger|webbrowser)/g.test(ua)})()
点击按钮跳转后，路径上就拿到code值了。使用$route.query.code获取路径上的code值
然后拿到code值和订单信息，请求后台支付接口，后台会把支付信息返回来
const params = {test_id: answer.test_id,Code: this.code}if (this.code) {handlePay(params).then(res => {const data = res.data.datawx.config({debug: false,//开启调试模式appId: data.appid,//公众号的唯一标识timestamp: data.timestamp,//生成签名的时间戳nonceStr: data.nonceStr,//生成签名的随机串signature: data.signature,//签名jsApiList: ['chooseWXPay']//需要使用的JS接口列表//openTagList : ['wx-open-launch-weapp']});wx.ready(function () {wx.chooseWXPay({timestamp: data.timeStamp,// 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符nonceStr: data.nonceStr,// 支付签名随机串，不长于 32 位package: data.prepay_id,// 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*）signType: data.signType,// 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'paySign: data.paySign,// 支付签名success: function (response) {// res.errMsg === 'chooseWXPay:ok'方式判断前端返回,微信团队郑重提示：// res.errMsg将在用户支付成功后返回ok，但并不保证它绝对可靠， 切记。if (response.errMsg == 'chooseWXPay:ok') {window.localStorage.setItem("order_no",res.data.data.order_no)window.location.href = `http:/resultPage`}},// 支付取消回调函数cancel: function () {Toast('用户取消支付')window.location.href = `http:/pay`},// 支付失败回调函数fail: function () {Toast('支付失败')window.location.href = `http:/pay`}});})})
遗憾的地方：
1、前台点按钮跳转redirect_uri，配置的是线上地址，需要打包上传服务器后测试（在支付目录增加配置本地地址应该可以）
2、wx.chooseWXPay 调起微信支付，需要在真机上测试
3、不知道什么原因，wx.chooseWXPay支付成功和失败，使用路由跳转页面，始终不成功，最后无奈选择window.location.href进行跳转
后续继续完善
