uniapp接入微信公众号支付
首先判断环境跳转获取code
// h5环境且在微信浏览器中
// #ifdef H5
if (this.utils.isWechat()) {
let appid = this.utils.getAppid();
// 这里是获取code后要跳转的地址，可以自定义也可以使用当前地址，使用当前页面地址需要自行判断处理code
let local = window.location.href;
window.location.href = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=${encodeURIComponent(local)}&response_type=code&scope=snsapi_userinfo&state=1#wechat_redirect`;
return;
}
// #endif
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
this.utils 是已经挂载的全局变量，utils.js 关键代码
const utils = {}
// 判断是否为公众号模拟器环境
utils.isWechat = () => {
return String(navigator.userAgent.toLowerCase().match(/MicroMessenger/i)) === "micromessenger";
}
utils.getAppid = () => {
return '你的appid';
}
export default utils
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
新建 wxPay.js
/*
微信支付方法(uni-app h5)适用
获取微信加签信息
@param{data}:获取的微信加签
@param{res}:成功回调
@param{fail}:失败回调
@warn:因为package为严格模式下的保留字，不能用作变量.
@use
wxPay({
appId,
timeStamp,
nonceStr,
signature,
package,
paySign
},res=>{
console.log('调用成功!');
},fail=>{
console.log('调用失败!');
})
*/
const wx = require('jweixin-module');
const wxPay = (data, callback, errCallback) => {
const {appId, timestamp, nonceStr, signature, packages, paySign} = data;
wx.config({
debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
appId, // 必填，公众号的唯一标识
timestamp, // 必填，生成签名的时间戳
nonceStr, // 必填，生成签名的随机串
signature, // 必填，签名，见附录1
jsApiList: ['chooseWXPay'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
});
wx.ready(function() {
wx.chooseWXPay({
timestamp, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
nonceStr, // 支付签名随机串，不长于 32 位
'package': packages, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=***）
signType: 'MD5', // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
paySign, // 支付签名
success(res) {
// 支付成功后的回调函数
callback(res);
},
fail(res) {
errCallback(res);
}
});
});
wx.error(function(res) {
// config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
/*alert("config信息验证失败");*/
});
}
export default wxPay;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
在点击支付的时候获取支付信息，触发公众号支付
// #ifdef H5
$this.$http.getPay({
code: code,
......
}, res => {
if(typeof res.data == 'string'){
res.data = JSON.parse(res.data)
}
// 调起支付
// 因为获取code跳转的地址栏会发生变化，所以这里指定地址进行跳转
wxPay(res.data, s => {
window.location.href = `/h5/#/pages/order/index`
}, e => {
window.location.href = `/h5/#/pages/shop/cashier?order_sn=${order_sn}`
})
});
// #endif
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
上次更新: 2023/09/22, 16:54:32