uni-app微信公众号支付

屈健柏
2023-12-01

我用的是JSAPI的方式去实现的,JASDK的方式有点麻烦

1、请求后台支付接口

					uni.request({
						url: this.serverUrl + 'api/Order/orderPay',
						method: "POST",
						data: {
							a_id: this.a_id,
							b_type: 1,
							body: "金钱商品",
							c_type: 0,
							list: list,
							money: this.zongjia,
							user_id: this.user_id,
							token: this.token
						},
						success: (res) => {
							console.log(res);
							if (res.data.code == 200) {
								console.log(res.data.oid);
								this.p_id = res.data.p_id.prepay_id;
								this.inter_oid = res.data.oid;
								this.wxPay(res.data.p_id,res.data)
								
							}
						},

2、封装微信支付

//data是后台支付返回的数据,key是微信商户号的key,拼接签名的时候需要用到
onBridgeReagy:function(data,key){
	var chars = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I',
					'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'
				];
				
				var a = "";
				for (var i = 0; i < 30; i++) {
					var id = Math.ceil(Math.random() * 35);
					a += chars[id];
				}
				//生成签名
				var paySign = md5('appId=wxxxxxxx&nonceStr=' + a + '&package=prepay_id=' + data.prepay_id +
					'&signType=MD5&timeStamp=' + String(parseInt(new Date().getTime() / 1000)) +
					'&key=xxxxxxxxxxx')
				//调用微信内置方法
				WeixinJSBridge.invoke(
					'getBrandWCPayRequest', {
						"appId": data.appid, //公众号名称,由商户传入
						"timeStamp": String(parseInt(new Date().getTime() / 1000)), //时间戳     
						"nonceStr": a, //随机串     
						"package": "prepay_id=" + data.prepay_id,
						"signType": "MD5", //微信签名方式:     
						"paySign":paySign //微信签名 
					},
					function(res) {
						if (res.err_msg == "get_brand_wcpay_request:ok") {
							console.log(res);
							uni.showToast({
								icon: 'success',
								title: '支付成功'
							})
							setTimeout(() => {
								uni.reLaunch({
									url: "../order/allOrder?inter_oid=" + key.oid + '&index=1'
								})
							}, 500);
						} else if (res.err_msg == "get_brand_wcpay_request:cancel") {
							console.log(res);
							uni.showToast({
								icon: "none",
								title: "'已取消支付"
							})
						} else {
							console.log(res);
							uni.showToast({
								icon: "none",
								title: "支付失败"
							})
							setTimeout(() => {
								uni.reLaunch({
									url: "../order/allOrder?inter_oid=" + key.oid + '&index=0'
								})
							}, 1000);
						}
					});
			}
}		

3、封装这个方法是为了解决报WeixinJSBridge is not undefined的错误
微信内置浏览器有WeixinJSBridge,刚进页面的时候需要加载,这个时候还没有加载出来

			wxPay(data,key) {
				console.log(data);
				var that = this;
				//下面是解决WeixinJSBridge is not defined 报错的方法
				if (typeof WeixinJSBridge == "undefined") { //微信浏览器内置对象。参考微信官方文档
					if (document.addEventListener) {
						document.addEventListener('WeixinJSBridgeReady', that .onBridgeReady(data,key), false);
					} else if (document.attachEvent) {
						document.attachEvent('WeixinJSBridgeReady', that .onBridgeReady(data,key));
						document.attachEvent('onWeixinJSBridgeReady', that .onBridgeReady(data,key));
					}
				} else {
					that .onBridgeReady(data,key);
				}

			},

4、最后只需要在请求成功的回调里面调用就可以了,在第一步

 类似资料: