vue 微信公众号支付 jssdk
最近项目搞了公众号 涉及到支付和登陆授权 微信公众号开发没啥特别 不像小程序 这里主要讲一下 这两个地方 首先要支付就必须要微信登陆 所以就先说一下微信登陆授权 其实很简单 可以看一下 下面的文档 https://www.cnblogs.com/0201zcr/p/5131602.html看了这个文档登录没问题的 登陆不是我做的但是因为有很多地方的要用到 还有b...
最近项目搞了公众号 涉及到支付和登陆授权 微信公众号开发没啥特别 不像小程序 这里主要讲一下 这两个地方
首先要支付就必须要微信登陆 所以就先说一下微信登陆授权 其实很简单 可以看一下 下面的文档
https://www.cnblogs.com/0201zcr/p/5131602.html
看了这个文档登录没问题的
登陆不是我做的但是因为有很多地方的要用到 还有bug 处理 所以还是去看了下 也看懂了 支付那里主要需要这个登陆获取来的openid 发到后端进行计算 就是拼接加密之类的 反给你签名 所以就一定要微信登陆授权之后才能来研究支付了
开发支付之前还需要去公众号平台那 进行一些开发者配置
1、在进行微信支付时，除了需要一个公众号之外，你还需要一个微信商户。根据商户申请规则进行商户申请
2、开始配置开发所需要的参数如下所示：
这是公众号的基本开发配置，这里在微信授权的时候就已经需要配置了 但是注意AppSecret在你第一次配置的时候就需要备份下来，如果没有备份那么下次使用的话你就需要去重置它
网页域名授权，你需要填写正确的可以访问的项目域名，确保微信可以访问
3、公众号配置好后我们需要开始配置微信商户平台的内容了
商户平台需要进行的配置是：商户号，支付密钥
商户号一般都是和自己公众号的商户号是一样的
主要是一个支付密钥的配置
然后是域名配置 和公众号差不多
配置支付的参数完成之后就可以开始进行开发了 不过在支付开发中可能会有些许的麻烦 那就是你不能在线下本机测试，因为IP白名单的限制 除非你将自己的本机地址进行地址映射，但是映射操作比较繁琐，如果自己的项目不是很大的话那就自己麻烦一点部署项目然后进行测试吧，如果你想进行映射之后本机测试这里可以推荐一个组件给你访问链接https://natapp.cn/
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 () {
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>
根据项目框架不同自己研究下 怎么引入
支付报错的话 根据打印出的错误信息 一个一个排除吧 我这里遇到的都写出来了
开发时有个坑，就是在@click事件中刚进入页面有300ms的延时，导致无法执行点击唤起微信支付；后来改为@touchstart事件可以了；看相关文章https://www.jianshu.com/p/6f85e957a725移动端事件总结
这方面的知识我也是第一次接触而且有些地方的坑可能忘记了 回头会补上
有什么问题欢迎大家提问一起解决
前往低代码交流专区
更多推荐
7
0- 0
已为社区贡献1条内容
所有评论(0)