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

最新推荐文章于 2021-10-19 17:48:30 发布

Garyull

最新推荐文章于 2021-10-19 17:48:30 发布

阅读量466

点赞数

分类专栏： JS 微信公众号H5 vue

本文链接：https://blog.csdn.net/weixin_44288627/article/details/106331090

版权

JS 同时被 3 个专栏收录

12 篇文章 0 订阅

订阅专栏

vue

11 篇文章 0 订阅

订阅专栏

微信公众号H5

3 篇文章 0 订阅

订阅专栏

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

微信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";

第三步调用支付接口

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，但并不保证它绝对可靠。 
       }
   ); 
}