uni-app微信公众号支付

我用的是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、最后只需要在请求成功的回调里面调用就可以了,在第一步

  • 0
    点赞
  • 5
    收藏
  • 打赏
    打赏
  • 2
    评论
//微信充值 //支付接口测试 function balance(url, data) { uni.request({ url: cfg.originUrl + '/wx/mp/js_sig.do', data: { route: url }, method: 'GET', success: (res) => { jweixin.config({ debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来 appId: res.data.appId, // 必填,公众号的唯一标识 timestamp: res.data.timestamp, // 必填,生成签名的时间戳 nonceStr: res.data.nonceStr, // 必填,生成签名的随机串 signature: res.data.signature, // 必填,签名 jsApiList: ['chooseWXPay'] // 必填,需要使用的JS接口列表 }); jweixin.ready(function() { uni.request({ url: cfg.originUrl + '/wx/recharge/pay.do', method: 'POST', header: { 'Content-type': "application/x-www-form-urlencoded", }, data: JSON.stringify(data), success: function(res) { alert("下单成功"); alert(JSON.stringify(res)); alert(res.data.order_id); all.globalData.orderId = res.data.order_id; uni.setStorageSync('orderId', res.data.order_id); jweixin.chooseWXPay({ timestamp: res.data.payParams.timeStamp, // 支付签名时间戳 nonceStr: res.data.payParams.nonceStr, // 支付签名随机串 package: res.data.payParams.package, // 接口返回的prepay_id参数 signType: res.data.payParams.signType, // 签名方式 paySign: res.data.payParams.paySign, // 支付签名 success: function(e) { alert("支付成功"); alert(JSON.stringify(e)); // 支付成功后的回调函数 } }); } }) }); jweixin.error(function(res) { // config信息验证失败会执行error函数,如签名过期导致验证失败,具体错误信息可以打开config的debug模式查看,也可以在返回的res参数中查看,对于SPA可以在这里更新签名。 console.log("验证失败!") }); } }) }

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

一个什么都不会的前端

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值