vue 微信公众号支付 jssdk

jssdk 引入

然后需要在vue项目中引入jssdk，微信为了方便用户使用，将官方的jssdk发布到了npm上，有一个叫weixin-js-sdk的，但我们需要使用的不是这个，网上很多在vue中引用的是这个，但是这个是为commonjs发布的版本，只能通过require引入，很多人发现在vue中引入import wx from ‘weixin-js-sdk’，console.log(wx)会出现undefined，实际为了方便es6使用，官方发布了一个weixin-jsapi，这个才是我们能在vue中引用的jssdk。我也在这里被坑了很久。

然后拿到后台返回的配置参数，通过wx.config来验证配置后，在wx.ready里面就可以调用jssdk提供的api了 看代码

import wx from 'weixin-jsapi'
import * as API from "@/api/affirm";
export default {
  data () {
    return {
      
    }
  },
  mounted() {
    var url_final = window.location.href;
    // console.log(url_final)
   //调取js-sdk
    let _this =this
    var appConfig = {
      pro:{
        appid: "XXXXXXXXXXXXXXXXXXXX",
        token: "XXXXXXXXXXXXXXXXXXXXXXXXXX",
        api: "api.woaap.com",
    }
    }
    var appInfo = appConfig.pro
    var configApi = 'https://' + appInfo.api  + '/api/js-conf?appid=' + appInfo.appid + '&token=' + appInfo.token+ '&url=' + encodeURIComponent(url_final)
      _this.$axios({
        type: 'get',
        url: configApi,
        data: '',
        dataType: 'json',
        timeout: 5000,
        success: function(config){
          wx.config(config)//配置
          config.debug = true

        },
        error: function(xhr, type){
          console.log('request error')
        }
      })
  }
},
  methods: {
    click(){   //点击触发
     API.getpay(这里是后端要你传的参数).then((data) => {
        var args = data
        wx.ready(function(){
           wx.chooseWXPay({
             timestamp: args.timeStamp, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
             nonceStr: args.nonceStr, // 支付签名随机串，不长于 32 位
             package: args.package, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=***）
             signType: 'MD5', // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
             paySign: args.paySign, // 支付签名
             success: function (res) {
                 这里写成功后的动作 我试过跳转路由好像不灵 或者是执行太快后端处理订单未变化呢 我改成了这个   window.location.href="你所要跳转的页面";
             },
             cancel: function (res) {
                 alert('已取消支付');
             },
             fail: function (res) {
                 alert('购买失败，请重新创建订单')
             }
           });
        });
     }) 
  }
}
}
 
 
 
 

*请注意 这里有两个签名 他们是不一样的！！！！ debug: true 调试的时候这里这样设置 我报了一个错误 验证签名失败 后来找到服务端 发现是他算法有问题 支付签名算法上网搜一下 后端计算时候可能会出错 我这里是因为timestamp 这个时间戳什么大小写的问题 他改了之后我就可以支付了

这里的

统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=***）

package这个参数格式要注意 如果后端没有加上 你自己加上