前端微信公众号支付功能实现

前端在拉起微信支付页面之前会有一个预支付的

		onLoad(options) {
			this.obj = JSON.parse(options.obj);
			console.log("返回的订单数据", this.obj)
			this.payment(); //进入到这个页面后执行预支付
		},

预支付代码

			payment() {
				http({
					url: '/api/thirdParty/weChatPay/createUnifiedOrder',
					method: 'POST',
					data: {
						body: '订单内容',
						totalFee: this.obj.totalPrice,
						orderNo: this.obj.orderNo,
						openID: uni.getStorageSync('openid'),
					}
				}).then(res => {
					console.log('res',res)
					console.log(res.data.data)
					this.paymentData = res.data.data;
					console.log('支付需要的参数', this.paymentData)
				})
			},

上面的openID是在微信授权登陆存在缓存中的

预支付成功后我这边是点击按钮拉起实际支付

				<view class="centerStyle" style="margin-top: 70rpx;">
					<view class="btn" @click="realityPayment()">
						<text class="btnFont">立即支付</text>
					</view>
				</view>

			realityPayment() {
				if (typeof WeixinJSBridge === "undefined") {
					if (document.addEventListener) {
						document.addEventListener('WeixinJSBridgeReady', this.onBridgeReady(), false);
					} else if (document.attachEvent) {
						document.attachEvent('WeixinJSBridgeReady', this.onBridgeReady());
						document.attachEvent('onWeixinJSBridgeReady', this.onBridgeReady());
					}
				} else {
					this.onBridgeReady();
				}
			},

			onBridgeReady: function() {
				let that = this;
				WeixinJSBridge.invoke(
					'getBrandWCPayRequest', {
						"appId": that.paymentData.appId, //公众号ID，由商户传入     
						"timeStamp": that.paymentData.timeStamp, //时间戳，自1970年以来的秒数     
						"nonceStr": that.paymentData.nonceStr, //随机串     
						"package": "prepay_id=" + that.paymentData.url,
						"signType": that.paymentData.signType, //微信签名方式：     
						"paySign": that.paymentData.sign //微信签名 
					},
					function(res) {
						if (res.err_msg === "get_brand_wcpay_request:ok") {
							// 使用以上方式判断前端返回,微信团队郑重提示：
							//res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
							uni.showLoading({
								title: '支付成功'
							});
							setTimeout(function() {
								uni.hideLoading();
								uni.redirectTo({
									url: '/pages/my/myOrder?choose=' + that.choose
								});
							}, 1000);
						} else {
							uni.hideLoading();
						}
					}
				);
			},

支付成功跳转到支付成功的页面