vue项目h5微信支付功能前端实现

微信服务器的链接可能会比较麻烦。可以参见授权处理
拉起微信授权页面。返回code给后端，后端通过请求指定地址获取用户openid

刚接触的可能会有疑惑。其实不需要安装依赖。在微信浏览器里会有默认的 WeixinJSBridge.invoke后面的内容都可以进行

pay

 methods: {
    buynow() {
      let data = {
        mobile: JSON.parse(localStorage.getItem("mobile")),
        openid: JSON.parse(localStorage.getItem("openid")),
        order_type: "application"
      };
      this.$http
        .post("xxxx", data)//此处请求后端的代码，后端会返回给我下列参数。此处为后端自定义接口
        .then(res => {
          console.log(res);
          let { data } = res;
          let appId = data.appId;
          let timeStamp = data.timeStamp;
          let nonceStr = data.nonceStr;
          let signature = data.signature;
          let packages = data.package;
          let paySign = this.mackPaySign(
            data,
            "frankfan434343frankfan434343fran"
          );
          console.log(paySign);
          WeixinJSBridge.invoke(
            "getBrandWCPayRequest",
            {
              appId: appId, //公众号名称，由商户传入
              timeStamp: timeStamp, //时间戳，自1970年以来的秒数
              nonceStr: nonceStr, //随机串
              package: packages,
              signType: "MD5", //微信签名方式：
              paySign: paySign //微信签名
            },
            res => {
              if (res.err_msg == "get_brand_wcpay_request:ok") {
                this.$message({
                  message: "支付成功",
                  type: "success"
                });
                setTimeout(() => {
                  this.$router.push("/upload");
                }, 2000);
              } else {
                this.$message({
                  message: "支付失败请重试",
                  type: "error"
                });
              }
            }
          );
        });
    },
    mackPaySign(obj, key) { //生成支付paySign 函数。切记是大写
      let appId = obj.appId;
      let timeStamp = obj.timeStamp;
      let nonceStr = obj.nonceStr;
      let signature = obj.signature;
      let packages = obj.package;
      var str = `appId=${appId}&nonceStr=${nonceStr}&package=${packages}&signType=MD5&timeStamp=${timeStamp}&key=${key}`;
      var paySign = crypto
        .createHash("md5")
        .update(str)
        .digest("hex");
      return paySign.toUpperCase();
    },
    think() {
      this.$router.push("/upload");
    }
  },