微信支付前端demo 前端微信支付功能实现

最近在做支付功能，微信支付准备工作之类的请参考官方说明，注意个人申请的测试号不支持，要申请企业号，还要商户号，开通支付权限，配置域名，JSSDK的权限问题，尽可能都开通吧！

官方地址可参考这里：接入准备工作

这里大概说一下前端要做的，项目先引入微信jssdk，安装依赖，

npm install weixin-js-sdk --save

main.js引入，设置成全局属性，也可以设置成局部属性，那当前页引入就好了，

import wx from 'weixin-js-sdk'
Vue.use(wx);
Vue.prototype.$wx = wx

先是微信登录授权，获取code传给后台，拿到用户信息，之前有写过，这里不做说明了====

大概说一下前端要做的事情，大概逻辑是：用户下单->选择微信支付->提交订单，

// 提交订单

this.$http.get(`/xxx/xxx/xxx/pay/`)
  .then(async res=> {
    console.log('返回的支付res:',res);
    console.log('是否微信浏览器====',isWechat);

      if(isWechat&&json.payType === 'WECHAT_PAY') {
        console.log('微信公众号内-微信支付===============');
        this.wechatPayFunction(res.pay) // 微信公众号支付
      }
      
      ......
      
  })

这里后端返回的数据大概是这样：

 

记得要先通过后端接口获取到微信公众号的配置信息，返回的数据格式大概是这样：

微信配置成功之后，就可以使用微信自带的wx.chooseWXPay发起微信支付请求啦！

官方文档可参考这里：微信支付

上代码：

// 微信公众号内微信支付方法
async wechatPayFunction(payData) {
  let that = this;
  let url = window.location.href.split('#')[0];
  await this.$http.get(`/api/wechat/jssdk?url=`+url).then(res=>{
    console.log('微信config', res);
    // 配置config信息
    wx.config({
      debug: false,
      appId: res.appId, // 必填，公众号的唯一标识
      timestamp: res.timestamp, // 必填，生成签名的时间戳
      nonceStr: res.nonceStr, // 必填，生成签名的随机串
      signature: res.signature, // 必填，签名
      jsApiList: ['checkJsApi', 'chooseWXPay'] // 必填，需要使用的JS接口列表
    });

    // 通过ready接口处理成功验证
    wx.ready(function () {
      wx.checkJsApi({
        jsApiList: ['chooseWXPay'],
        success: function (res) {
          console.log('微信config检验成功',res);
        }
      });

      wx.chooseWXPay({
        timestamp: payData.timeStamp, // 支付签名时间戳，注意微信 jssdk 中的所有使用 timestamp 字段均为小写。但最新版的支付后台生成签名使用的 timeStamp 字段名需大写其中的 S 字符
        nonceStr: payData.nonceStr, // 支付签名随机串，不长于 32 位
        package: payData.package, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*）
        signType: payData.signType, // 微信支付V3的传入 RSA ,微信支付V2的传入格式与V2统一下单的签名格式保持一致
        paySign: payData.paySign, // 支付签名
        success: function (res) {  // 支付成功后的回调函数
          console.log('支付成功=============' + res)
          
        },
        fail: function (res) {
          console.log('支付失败===============' + res)
        }
      });

    });
  });

需要注意的问题：

1、调取微信支付前需要先获取到微信config信息，用后台返回的参数注入当前权限，才可以正常调用wx.chooseWXPay；

2、wx.chooseWXPay需要的参数通过支付接口再返回给前端，再发起微信支付请求；

3、注意一下参数大小写，核实后台接口返的和前端是否一致，因为本地不方便调试，每次都要发到服务器上，耽误了好久；还有因为也做了APP内的微信支付，一开始跟APP微信支付的后端接口返回参数搞错了，报错原因也查了很久，总之细心一点再细心一点，测试通过了还是很开心的，哈哈哈==；