最近做了一个答题应用，甲方要求，用户进入应用先答题，最后点微信支付的时候，再授权，支付。

我的实现思路是点击微信支付按钮时，跳转到某个地址获取授权

redirect_uri 需要先在微信公众号后台支付授权目录里设置，需要跳转的路由，前台也应该存在
xxx/pay。由于支付目录不允许hash地址，vue路由模式需要设置为history模式

handlePayMoney() {
      if (isWXBrowser) {
        window.location.href = "https://open.weixin.qq.com/connect/oauth2/authorize?appid=XXXXXXXXXX&redirect_uri=http:www.beibei0.com/pay&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect"
      }
    }

参数	必填	说明
appid	是	公众号唯一标识
redirect_uri	是	授权后的回调链接地址
response_type	是	返回类型，code
scope	是	授权方式
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.data
            wx.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:www.beibei0.com/resultPage`
                  }
                },
                // 支付取消回调函数
                cancel: function () {
                  Toast('用户取消支付')
                  window.location.href = `http:www.beibei0.com/pay`
                },
                // 支付失败回调函数
                fail: function () {
                  Toast('支付失败')
                  window.location.href = `http:www.beibei0.com/pay`
                }

              });

            })

          })

遗憾的地方：
1、前台点按钮跳转redirect_uri，配置的是线上地址，需要打包上传服务器后测试（在支付目录增加配置本地地址应该可以）
2、wx.chooseWXPay 调起微信支付，需要在真机上测试
3、不知道什么原因，wx.chooseWXPay支付成功和失败，使用路由跳转页面，始终不成功，最后无奈选择window.location.href进行跳转
后续继续完善