uniapp H5如何唤起微信公众号支付

1.前言

微信公众号支付，官方的名称是 JSAPI。在做微信支付对接前，应熟读官方的介绍文档，包括开发前准备，开发指引、API列表，熟悉相关的概念，很多疑问基本可以在官方找到答案。参见https://pay.weixin.qq.com/wiki/doc/apiv3/open/pay/chapter1_1_1.shtml。 在微信官方网上可以看到到 Java后台端的参考代码，但前端部分并没提供

，下面介绍的是在 uniapp h5 客户端端 如何唤起微信公众号支付的。

2.疑问：uniapp H5如何唤起微信公众号支付

在流程图2~6步都是在商户后台端完成的， 那么 uniapp h5端 在第7步要怎么做才能唤起微信支付窗口呢？ 答案就是 使用了js的事件侦听来处理。

uniapp h5 发出后台支付请求后，唤起微信支付的关键代码段如下：

3.参考代码

3.1 uniApp端

<template>
	<view class="container">

		<total-layout btnText='确认支付' :isShowPrice="false" :btnBackFunc="goBack" :btnWantToFunc="confirmPay"
			:price="totalPrice">
			<template v-slot:page>

				<view class="list" :style="{height: windowHeight + 'px'}">
					<view class="price-area">
						<view class="price-title">应付金额：</view>
						<view class="shop-price">
							<text>¥</text>
							<text class="shop-price-text">{{ integerPriceStr }}</text>
							<text>{{ decimalPriceStr }}</text>
						</view>
					</view>

					<uni-section style="margin-top: 8px;" title="请选择支付方式" type="line">
						<view class="uni-list">
							<radio-group @change="payModeChange">
								<label class="uni-list-cell uni-list-cell-pd" v-for="(item, index) in payModes" :key="item.value">
									<view>
										<radio :value="item.value" :checked="index === currPayModeIndex" />
									</view>
									<image class="payImg" :src="item.imgUrl" mode="aspectFill"></image>
									<view>{{item.text}}</view>
								</label>
							</radio-group>
						</view>

					</uni-section>
				</view>
			</template>
		</total-layout>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				windowHeight: 0,

				orderName: "", //订单名称
				orderNo: "", //订单号
				orderType: 0, //订单类型， 0-未知，10-商城订单
				totalPrice: 0, //订单合计
				totalNum: 0, //订单商品总数量

				integerPriceStr: "0",
				decimalPriceStr: ".00",

				goods: [],

				payModes: [],

				currPayModeIndex: 0,

				payCodeImgUrl: "",

				loginPageUrl: "",
				
				orderPayInfo : {
						payAppId:	"",			//公众号ID，
						payTimeStamp: "", //时间戳，自1970年以来的秒数    
						payNonceStr: "", //随机串    
						payPackage: "",
						paySignType: "", //微信签名方式：    
						paySign:"", //微信签名									
				}
			};
		},

		confirmPay(e) {
			console.info("点击确认支付", e);
			//微信JSAPI支付
			if (!isWeChatEnv()) {
				uni.showToast({
					title: '请在微信环境中操作',
					icon: 'error',
					duration: 2000
				});						
				return;
			}				
			let user = uni.getStorageSync('user');
			this.confirmPayForMall(this.orderNo, user);
			
		},	

		confirmPayForMall(orderNo, user) {
			let that = this

			let orderData = {}

			orderData.memberId = user.id;
			orderData.memberName = user.name;
			orderData.orderNo = orderNo; //订单号
			orderData.payMode = that.payModes[that.currPayModeIndex].value; //支付方式

			//向后台正式请求支付信息
			request({
				url: '/mallOrder/requestPay',
				data: orderData,
				method: 'POST'
			}).then((res) => {
				if (res.code === '0') {
					let orderPayInfo = res.data;
					that.orderPayInfo = orderPayInfo;
					console.log('商城订单请求支付成功.订单号=' + orderPayInfo.orderNo);


					if (orderPayInfo.payMode === 22) {
						//公众号支付
						if (orderPayInfo.payStatus === 10) {
							//10-未支付， 唤起支付窗口。
							console.info('公众号支付');
							
							
							function onBridgeReady(payInfo) {
								WeixinJSBridge.invoke('getBrandWCPayRequest', {
										"appId": payInfo.payAppId, //公众号ID，由商户传入    
										"timeStamp": payInfo.payTimeStamp, //时间戳，自1970年以来的秒数    
										"nonceStr": payInfo.payNonceStr, //随机串    
										"package": payInfo.payPackage,
										"signType": payInfo.paySignType, //微信签名方式：    
										"paySign": payInfo.paySign, //微信签名
									},
									function(payRet) {
										if (payRet.err_msg == "get_brand_wcpay_request:ok") {
											// 使用以上方式判断前端返回,微信团队郑重提示：
											//res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
											that.finishPay();
										} else if (payRet.err_msg == 'get_brand_wcpay_request:cancel') {
											uni.showToast({
												title: '取消支付!',
												icon: 'error',
												duration: 2000
											});
										} else {
											uni.showToast({
												title: '支付失败!' + payRet.err_msg,
												icon: 'error',
												duration: 2000
											});
										}
									});
							}
					
							if (typeof WeixinJSBridge == "undefined") {
								if (document.addEventListener) {
									document.addEventListener('WeixinJSBridgeReady', onBridgeReady(orderPayInfo), false);
								} else if (document.attachEvent) {
									document.attachEvent('WeixinJSBridgeReady', onBridgeReady(orderPayInfo));
									document.attachEvent('onWeixinJSBridgeReady', onBridgeReady(orderPayInfo));
								}
							} else {
								onBridgeReady(orderPayInfo);
							}	

							
						} else {
							uni.showToast({
								title: '支付失败!' + res.msg,
								icon: 'error',
								duration: 2000
							});
						}

				} else {
					uni.showToast({
						title: '提交商城订单支付失败.' + res.msg,
						icon: 'error',
						duration: 2000
					});

				}
			});

		},

	}		
</script>

3.2 后台端

暂空.

4.参考文章

• https://pay.weixin.qq.com/docs/merchant/development/interface-rules/introduction.html
  关于微信支付的介绍

• https://pay.weixin.qq.com/docs/merchant/apis/jsapi-payment/direct-jsons/jsapi-prepay.html
  JSAPI支付产品介绍