uniapp开发的公众号项目,使用微信JSSDK完成微信支付

1.安装weixin-js-sdk

npm install weixin-js-sdk

2.在需要的页面引入

var jweixin = require('jweixin-module');

3.实现代码

var jweixin = require('jweixin-module');
						jweixin.config({
							debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,线上环境需要改为false
							appId: res.data.appId, // 必填,公众号的唯一标识
							timestamp: res.data.timeStamp, // 必填,生成签名的时间戳
							nonceStr: res.data.nonceStr, // 必填,生成签名的随机串
							signature: res.data.paySign, // 必填,签名
							jsApiList: ['chooseWXPay'] ,// 必填,需要使用的JS接口列表	
						});
						jweixin.ready(() => {
							jweixin.chooseWXPay({
								appId: res.data.appId, // 必填,公众号的唯一标识
								timestamp: res.data.timeStamp,
								nonceStr: res.data.nonceStr, // 支付签名随机串,不长于 32 位
								package: res.data.package, // 统一支付接口返回的prepay_id参数值
								signType: res.data.signType, // 签名方式,默认为'SHA1',使用新版支付需传入'MD5'
								paySign: res.data.paySign, // 支付签名
								success: function(res) { //支付成功回调
									console.log('支付成功')
									uni.showToast({
										title: '支付成功',
										icon: 'none',
										duration: 2000,
									})
									// //成功后跳转到订单页
									setTimeout(function() {
										uni.navigateTo({
											url: '/pagesA/propertyBillList/propertyBillList'
										});
									}, 2000)

								},
								cancel: function(res) {
									uni.showToast({
										title: '取消支付',
										icon: 'none',
										duration: 2000,
									})
									alert('取消支付')
								},
								fail: function(res) {
									console.log("fail", res);
									uni.showToast({
										title: '支付失败',
										icon: 'none',
										duration: 2000,
									})
									alert('支付失败')
								}
							});
						});

4.完整代码

toPay(bill_id) {
				console.log(bill_id)
				request.post('/community_api/Bill/pay', {
					bill_id: bill_id
				}).then(res => {
					if (res.code == 0) {
						console.log(res.data)
						// 使用微信公众号的jssdk完成微信支付
						var jweixin = require('jweixin-module');
						jweixin.config({
							debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,线上环境需要改为false
							appId: res.data.appId, // 必填,公众号的唯一标识
							timestamp: res.data.timeStamp, // 必填,生成签名的时间戳
							nonceStr: res.data.nonceStr, // 必填,生成签名的随机串
							signature: res.data.paySign, // 必填,签名
							jsApiList: ['chooseWXPay'], // 必填,需要使用的JS接口列表	
						});
						jweixin.ready(() => {
							jweixin.chooseWXPay({
								appId: res.data.appId, // 必填,公众号的唯一标识
								timestamp: res.data.timeStamp,
								nonceStr: res.data.nonceStr, // 支付签名随机串,不长于 32 位
								package: res.data.package, // 统一支付接口返回的prepay_id参数值
								signType: res.data.signType, // 签名方式,默认为'SHA1',使用新版支付需传入'MD5'
								paySign: res.data.paySign, // 支付签名
								success: function(res) { //支付成功回调
									console.log('支付成功')
									uni.showToast({
										title: '支付成功',
										icon: 'none',
										duration: 2000,
									})
									// //成功后跳转到订单页
									setTimeout(function() {
										uni.navigateTo({
											url: '/pagesA/propertyBillList/propertyBillList'
										});
									}, 2000)

								},
								cancel: function(res) {
									uni.showToast({
										title: '取消支付',
										icon: 'none',
										duration: 2000,
									})
									alert('取消支付')
								},
								fail: function(res) {
									console.log("fail", res);
									uni.showToast({
										title: '支付失败',
										icon: 'none',
										duration: 2000,
									})
									alert('支付失败')
								}
							});
						});
						
					}
				})
			}

你可能感兴趣的:(uni-app,微信)