接入前准备

1.支付目录设置

1.1支付授权目录设置：

微信支付商户平台 --> 产品中心 --> 开发配置
注：商户实际的支付目录必须和在微信支付商户平台设置的一致，不然会报错“当前页面的 URL 未注册”（一般情况，可以设置为顶级域名）

1.2支付授权目录校验规则：

1.2.1 如果支付授权目录设置为顶级域名，则只校验顶级域名，不校验后缀。
1.2.2 如果支付授权目录设置为多级域名，就会进行全匹配，例如设置的支付授权目录为“https://www.weixin.com/abc”，那么实际请求页面路径不能为“https://www.weixin.com/qwe”或其他任何后缀的页面，只能是“https://www.weixin.com/abc”

[图片上传失败...(image-6830f1-1626148218500)]

2.设置授权域名

• 开发JSAPI支付时，在统一下单接口中要求必传用户openid，而获取openid则需要您在公众平台设置获取openid的域名，只有被设置过的域名才是一个有效的获取openid的域名，否则将获取失败。
• 设置授权域名路径：登录微信公众平台 --> 公众号设置 --> 功能设置 --> 网页授权域名
• 注：这里会有一个txt文件，需要下载下来，放到项目打包之后的根目录。

JSAPI掉起支付

• WeixinJSBridge内置对象在其他浏览器中无效。
• 示例代码

defray () {
  // id 为订单ID，这里是调用后台的接口提交订单，并获取网页端接口请求需要的参数
  this.$api.user.getwechatData(this.id).then(res => {
    console.log(res.data)
    if (res.data.code === 200) {
      console.log('获取微信JSAPI支付----', res)
      const weChatConfig = res.data.item
      if (typeof WeixinJSBridge === 'undefined') {
        if (document.addEventListener) {
          document.addEventListener('WeixinJSBridgeReady', this.onBridgeReady, false)
        } else if (document.attachEvent) {
          document.attachEvent('WeixinJSBridgeReady', this.onBridgeReady)
          document.attachEvent('onWeixinJSBridgeReady', this.onBridgeReady)
        }
      } else {
        onBridgeReady(weChatConfig)
      }
      // eslint-disable-next-line no-inner-declarations
      function onBridgeReady (weChatConfig) {
        console.log('-------------->', weChatConfig)
        // eslint-disable-next-line no-undef
        WeixinJSBridge.invoke(
          'getBrandWCPayRequest', {
            appId: weChatConfig.appId, // 公众号名称，由商户传入
            timeStamp: weChatConfig.timeStamp, // 时间戳，自1970年以来的秒数
            nonceStr: weChatConfig.nonceStr, // 随机串
            package: weChatConfig._package,
            // notify_url: 'http://listener-user-pre.yujianlife.com/#/orderSuccess',
            signType: weChatConfig.signType, // 微信签名方式：
            paySign: weChatConfig.paySign // 微信签名
          },
          function (res) {
            if (res.err_msg === 'get_brand_wcpay_request:ok') {
              // 使用以上方式判断前端返回,微信团队郑重提示：
              // res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
              window.location.href = encodeURIComponent('http://www.weixin.com/success')
            } else {
              window.location.href = encodeURIComponent('http://www.weixin.com/error')
            }
          })
      }
    } else {
      this.$toast('支付失败，请重新支付')
    }
  })
}

• 网页端接口请求参数列表

  
  请求参数列表.png

• 返回结果值说明

支付常见问题

• 参考官方：支付常见问题

参考

• 官方文档