微信支付问题（微信浏览器和非微信浏览器）

本文链接：https://blog.csdn.net/weixin_59124055/article/details/123007349

该代码段展示了在微信环境中进行支付的实现过程。首先检查是否在微信内，然后通过微信授权获取code。如果已有code，则直接调用wxPay方法进行支付。wxPay方法中，根据code和商品ID发起支付请求，并在微信内置浏览器中调起支付接口。支付成功或失败后，会触发相应的回调函数，更新订单状态或关闭窗口。同时，提供了在不同页面状态下的支付状态检查和跳转。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

// 微信支付混入代码

import utils from '@/utils'


export default {
  data () {
    return {}
  },
  
 
  watch: {
    loadShow () {
      if (utils.isWeiXin() && this.$route.query.code) {
        this.wxPay()
      }
    },
  },
  methods: {
    wxPayInit () {
      if (utils.isWeiXin()) {
        let code = this.$route.query.code
        if (!code) {
          const baseUrl = 'https://open.weixin.qq.com/connect/oauth2/authorize'
          const redirectUrl = encodeURIComponent(window.location.href)
          window.location.href = `${baseUrl}?appid=wx35c09ac3c32de184&redirect_uri=${redirectUrl}&response_type=code&scope=snsapi_base&state=STATE#wechat_redirect`
        } else {
          this.wxPay()
        }
        //  2df5d5d5df13e253e37e436e9822656ef7baddf7
      } else {
        this.proIdAndFnItem.type = 1
        this.proIdAndFnItem.code = ''
        this.$axios
          .post(
            this.$route.params.orderId ? personalToPayAPI : submitOrderAPItest,
            this.proIdAndFnItem,
          )
          .then((res) => {
            let resq = res.data
            window.location.href = resq.data.data
          })
          .catch((err) => {
            Toast.fail(err.message)
          })
      }
    },

    wxPay () {
      let _this = this
      this.proIdAndFnItem.type = 2
      this.proIdAndFnItem.code = this.$route.query.code
      this.proIdAndFnItem.proId = this.$route.query.proId
      this.proIdAndFnItem.orderId = this.$route.params.orderId
      this.$axios
        .post(
          this.$route.params.orderId ? personalToPayAPI : submitOrderAPItest,
          this.proIdAndFnItem,
        )
        .then((res) => {
          let resq = res.data
          if (resq.code === 500) {
            Toast.fail(resq.msg)
            return false
          }

          function onBridgeReady () {
            WeixinJSBridge.invoke(
              'getBrandWCPayRequest',
              JSON.parse(resq.data.data),
              function (res) {
                if (res.err_msg == 'get_brand_wcpay_request:ok') {
                  // 使用以上方式判断前端返回,微信团队郑重提示：
                  //res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
                  _this.getPayStatus(resq.data.orderSn)
                } else if (res.err_msg == 'get_brand_wcpay_request:cancel') {
                  // alert('支付取消', JSON.stringify(resq.data.orderSn))
                } else if (res.err_msg == 'get_brand_wcpay_request:fail') {
                  _this.getPayStatus(resq.data.orderSn)
                  WeixinJSBridge.call('closeWindow')
                }
              },
            )
          }
          // 支持回调必要方法start
          if (typeof WeixinJSBridge == 'undefined') {
            if (document.addEventListener) {
              document.addEventListener(
                'WeixinJSBridgeReady',
                onBridgeReady,
                false,
              )
            } else if (document.attachEvent) {
              document.attachEvent('WeixinJSBridgeReady', onBridgeReady)
              document.attachEvent('onWeixinJSBridgeReady', onBridgeReady)
            }
          } else {
            onBridgeReady()
          }
        })
        .catch((err) => {
          Toast.fail(err.message)
        })
    },
    getPayStatus (orderSn) {
      if (
        this.$route.name === 'productDetailBuyDetail' ||
        this.$route.name === 'productDetailBuyDetailOrderSn'
      ) {
        this.orderDetail()
        return false
      }
      this.$axios
        .post(orderStatusAPI(orderSn))
        .then((res) => {
          let resq = res.data
          if (resq.data == 1 || resq.data == 2) {
            this.$router.push({
              name: 'productDetailBuyDetailOrderSn',
              params: { orderSn },
            })
          }
        })
        .catch((err) => { })
    },
  },
}