微信支付之h5公众号支付

背景

• h5页面分享到微信好友。
• 好友点击链接进行支付。
• 这属于公众号页面支付，所以必须要有个公众号。
• 公众号必须配置服务器。

1、判断h5页面是否在微信中打开

isWeixn () {
      let ua = navigator.userAgent.toLowerCase();
      if (ua.match(/MicroMessenger/i) == "micromessenger") {
        return true;
      } else {
        return false;
      }
    },

2、获取code

获取code，官方文档 。

a、前端直接loacation.ref='url',url为这官方这个重定向地址。 这里面会有一个重定向redirect_uri,通过这个url来重定向。

b、最后会返回http://www.xxx.com/app/?code=xxxxx&state=xxxx这样的值,拿到code

3、通过code获取access_token

把code交给后端，让它写个getOpenid的接口,此接口可以返回openid

4、拿到openid后，进行付款

官方文档

this.wxPay(price) //生成付款,price为付款Money
//通过这个WeixinJSBridge对象来调用支付
async wxPay(price) {
      if (typeof window.WeixinJSBridge === "undefined") {
        if (document.addEventListener) {
          document.addEventListener("WeixinJSBridgeReady", this.onBridgeReady);
        }
      } else {
        this.onBridgeReady();//调用支付
      }
    },
    
async onBridgeReady() {
    if (!window.WeixinJSBridge) return;
    this.getData();//通过服务端获取支付接口参数（这里由后端接口传输支付参数）
    console.log(625,data)
},

async getData() {
      //通过服务端获取支付接口参数
      const params = await this.$axios
        .post(`${url}/api/v1/requestorder`, { //这里填后端接口url
          order_no: this.userInfo.payOrderId,//支付订单id
          pay_type: 3,//1-支付宝、2-微信、3-微信公众号
          openid: this.wxInfo.openid
        })
      if(params.data.code === -1){
        Toast('系统繁忙，请稍后再试！')
        return  false
      }
      //配置支付需要的数据
      let itemData = params.data.data
      if (itemData) {
        //wxd6ae00e6af54c0d0
        const { timeStamp, nonceStr, packageValue, signType, paySign,appId } = itemData;
        const params = {
          appId,
          timeStamp,
          nonceStr,
          package: packageValue,
          signType,
          paySign,
        };
        // 调起支付
        window.WeixinJSBridge.invoke(
                "getBrandWCPayRequest",
                params,
                res => this.handlePayCallback(res) //解析支付结果
        );
      } else {
        console.log("no data");
      }

    },
    //解析支付结果
    handlePayCallback(res) {
      if (res.err_msg === "get_brand_wcpay_request:ok") {
        console.log("pay success");
        Toast('支付成功！')
        this.show = false
      } else if (res.err_msg === "get_brand_wcpay_request:cancel") {
        console.log("pay cancel");
        Toast('已经取消支付！')
      } else {
        console.log("pay failed");
        Toast('支付失败！')
      }
    },