vue 微信公众号支付 jssdk

最近项目搞了公众号涉及到支付和登陆授权微信公众号开发没啥特别不像小程序这里主要讲一下这两个地方

首先要支付就必须要微信登陆所以就先说一下微信登陆授权其实很简单可以看一下下面的文档文档链接周一会加上来

登陆不是我做的但是因为有很多地方的要用到还有bug 处理所以还是去看了下也看懂了支付那里主要需要这个登陆获取来的openid 发到后端进行计算就是拼接加密之类的反给你签名所以就一定要微信登陆授权之后才能来研究支付了

开发支付之前还需要去公众号平台那进行一些开发者配置

1、在进行微信支付时，除了需要一个公众号之外，你还需要一个微信商户。根据商户申请规则进行商户申请

2、开始配置开发所需要的参数如下所示：

这是公众号的基本开发配置，这里在微信授权的时候就已经需要配置了但是注意AppSecret在你第一次配置的时候就需要备份下来，如果没有备份那么下次使用的话你就需要去重置它

网页域名授权，你需要填写正确的可以访问的项目域名，确保微信可以访问

3、公众号配置好后我们需要开始配置微信商户平台的内容了

商户平台需要进行的配置是：商户号，支付密钥

商户号一般都是和自己公众号的商户号是一样的

主要是一个支付密钥的配置

然后是域名配置和公众号差不多

配置支付的参数完成之后就可以开始进行开发了不过在支付开发中可能会有些许的麻烦那就是你不能在线下本机测试，因为IP白名单的限制除非你将自己的本机地址进行地址映射，但是映射操作比较繁琐，如果自己的项目不是很大的话那就自己麻烦一点部署项目然后进行测试吧，如果你想进行映射之后本机测试这里可以推荐一个组件给你访问链接https://natapp.cn/

然后需要在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 () {
    API.getconfig(这里如果后端要url 是#前面的部分不包括#号).then((data) => {
      console.log(wx)
       wx.config({
          debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
          appId: data.appId, // 必填，公众号的唯一标识
          timestamp: data.timestamp, // 必填，生成签名的时间戳
          nonceStr: data.nonceStr, // 必填，生成签名的随机串
          signature: data.signature,// 必填，签名，见附录1
         jsApiList: ['chooseWXPay']
        })
      
  })
},
  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这个参数格式要注意如果后端没有加上你自己加上

支付的内个api 后端要我传ip 这个也是我刚接触的东西

这里分享一个方法

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

<title>获取ip地址</title>
</head>
<body >

</body>
<script src="http://pv.sohu.com/cityjson?ie=utf-8"></script>
<script>
//浏览器返回结果：（前提是需要有网络）
//var returnCitySN = {"cip": "14.153.20.119", "cid": "440300", "cname": "广东省深圳市"};
console.log(returnCitySN.cip);

</script>

</html>

根据项目框架不同自己研究下怎么引入

支付报错的话根据打印出的错误信息一个一个排除吧我这里遇到的都写出来了

这方面的知识我也是第一次接触而且有些地方的坑可能忘记了回头会补上

有什么问题欢迎大家提问一起解决

vue 微信公众号支付 jssdk

猜你喜欢