记一次基于公众号的微信H5开发项目（三）

微信H5页面 中调用微信支付

搞了很久才更新博客，因为我刚把支付做完测试没问题以后，当天公司就把我裁了，同期的裁了所有中级开发，4月份裁了低级开发以后就有预想，也不意外吧，毕竟小公司在疫情这个情况下生存下去真的很难。

后面解决租房退房问题，搬家，离职手续什么的，花了2周多的时间，现在开始静下心搞学习准备新的面试，所以还是把项目支付相关记录一下。

第一步 还是引入js-sdk

这里就直接复制上一篇的文章的内容了，引入不用多说。

引入：

1.我选择的是npm i去下载的包，然后全局引入的，在main.js 里面

//全局 引入微信jssdk
import wx from 'weixin-js-sdk'
Vue.prototype.$wx = wx

后面再页面当中只需要this.$wx.config()成功之后即可使用你所需要的api

或者直接在你的index.html中引入

//html中引入 微信jssdk
<script src="http://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>

之后在页面中直接wx.xxxxx即可

第二步 在需要调用支付的页面中，先进行配置

2.wx.config

wxInit() {
      this.$post(
        "/xxx/initJsSdk",
        { url: window.location.href.split("#")[0] },
        data => {
          wx.config({
            debug: true, // 开启调试模式,
            appId: data.appId, // 必填，企业号的唯一标识，此处填写企业号corpid
            timestamp: data.timestamp + "", // 必填，生成签名的时间戳
            nonceStr: data.nonceStr, // 必填，生成签名的随机串
            signature: data.signature, // 必填，签名，见附录1
            jsApiList: ["chooseWXPay"] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
          });

          // 错误时
          wx.error(function(res) {
            alert("出错了：" + res.errMsg); //这个地方的好处就是wx.config配置错误，会弹出窗口哪里错误，然后根据微信文档查询即可。
          });
        },
        err => {}
      );
    }

后台请求ticket的地址：

public final static String JSAPI_TICKET = "https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=ACCESS_TOKEN&type=jsapi";

第三步 调用支付接口

3. wx.chooseWxPay()

//  支付
    onSubmit() {
      let that = this;
      if (!this.type) {
        this.$msg("error", "请选择支付方式");
        return false;
      }
      let params = {
        openid: JSON.parse(localStorage.getItem("wxUser")).id,//从缓存中拿openid
        paymentAmount: this.number
          ? parseFloat(this.number)
          : parseFloat(this.money)
      };
      console.log(params);
      this.$msg("loading", "支付中");
      this.$post("/xxx/addPayOrder", params, data => {
        if (data.flag == 1) {
          wx.chooseWXPay({
            timestamp: data.timeStamp, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
            nonceStr: data.nonceStr, // 支付签名随机串，不长于 32 位
            package: data.package, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*）
            signType: data.signType, // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
            paySign: data.sign, // 支付签名
            success: function(res) {
              if (res.errMsg == "chooseWXPay:ok") {
                //支付成功
                console.log("ok:" + res.errMsg);
                that.$msg('success','支付成功')
                that.$router.push({name:'paySuccess',query:{info:res}})
              } else {
                console.log("err:" + res.errMsg);
                that.$msg('error','支付失败,请稍后重试!')
              }
            }
          });
        }
      });
    },

首先说一下，现在我在网上找到的支付调用的方法有两种，一个是 wx.chooseWXPay ，这个是jssdk里面的方法，在config初始化完成后，根据业务需求直接调用即可。
第二种是 WeixinJSBridge.invoke() ，这一种据说正在慢慢被废弃，有时候会无法调起支付，所以没有使用这一种，但是相关代码还是贴一下，有的几年前的项目和咨询的几个老程序员还是在使用这一种：

onBridgeReady(){
   WeixinJSBridge.invoke(
       'getBrandWCPayRequest', {
           "appId":"",     //公众号名称，由商户传入     
           "timeStamp":"", //时间戳，自1970年以来的秒数     
           "nonceStr":"", //随机串     
           "package":"", //预付款id
           "signType":"", //微信签名方式：     
           "paySign":"" //微信签名 
       },
       res => {     
           if(res.err_msg == "get_brand_wcpay_request:ok" ) {
               that.$msg('success','支付成功')
           }     // 使用以上方式判断前端返回,微信团队郑重提示：res.err_msg将在用户支付成功后返回    ok，但并不保证它绝对可靠。 
       }
   ); 
}

可以看出两种方法基本上参数都是一致的。

其实前端这边主要在支付这一块还是做好验证，以及处理支付时产生的各种场景对应的交互。
比如用户网络很卡，半天收不到响应，那么应该需要让后端去调取wx的接口主动查询当前订单的支付结果，然后前端来反馈给用户等等处理。

可惜没能等到项目正式上线就被裁了，不然还能根据实际用户的使用来积累一些特殊情况的处理办法的经验，现在这个项目交接给了公司唯一剩的一个高级前端来进行部署上线。所以这次公众号的开发就记录到这。

哎，希望公司能够尽快把拖欠的2，3，4月份工资发下来，免得还要去劳动仲裁。

后面再记录下ts的学习吧，毕竟今年明年vue3就要出正式版了，可能以后的新项目都是vue3+ts的形式了，或者vue2.x的项目升级到vue3。