H5使用微信支付（微信内部浏览器和其他浏览器）

H5使用微信支付（微信内部浏览器和其他浏览器）

一、微信内部浏览器

1、获取openId
参考微信文档需要通过跳转地址重定向获取code，再通过code后端处理获取openId

location.href ='https://open.weixin.qq.com/connect/oauth2/authorize?appid=appid&redirect_uri=redirect_uri&response_type=code&scope=snsapi_base&state=100&connect_redirect=1#wechat_redirect'

appId是公众号配置的appId, redirect_uri是你需要重定向的地址，我实际开发的时候这个地址是后端接口，后端处理code之后返回的地址，重定向后路径参数是这样的

redirect_uri+openId

ps:如果和你对接的后端没有把重定向的地址写成接口的话，就需要你用重定向后的code去调后端接口获取openId。

2、配置支付参数调后端支付接口

let data = {
		wxOpenId: this.openId,
		body: this.payLi[0].name,
		message: "",
		method: 1,
		payRecordGoodsList: [{
		    name: this.payLi[0].name,
			payConfigId:  this.payLi[0].id,
			price:  this.payLi[0].price,
			sale:  this.payLi[0].sale
		}],
		money: this.payLi[0].sale,
		discount: 1,
								
	};

使用配置参数调后端支付接口，请求成功后使用微信环境里的WeixinJSBridge.invoke()方法唤起微信支付，到此微信的整个支付流程就结束了。

this.$http({
		url: api ,
		header: {
					type: "application/json"
		},
		data: data
		}).then((res)=> {
			if(res.data.code==200){
				WeixinJSBridge.invoke(
					'getBrandWCPayRequest', {
							appId: res.data.data.appId,
							timeStamp: res.data.data.timeStamp,
							nonceStr: res.data.data.nonceStr,
							package: res.data.data.package,
							signType: res.data.data.signType,
							paySign: res.data.data.paySign,
						},
					function(res_b) {
						if (res_b.err_msg == "get_brand_wcpay_request:ok") {
							uni.showModal({
								title: '提示',
								content: `支付成功`
							})
						} else {
							uni.showModal({
								title: '提示',
								content: `支付失败`
							})
					}
			}
		);
	}else{
	}
							
})

二、微信外部浏览器

微信外部浏览器就相对简单些，微信外部不需要openId,所以直接调后端的支付接口，后端会返回一个支付地址，直接跳转支付就行。
如果需要查询订单状态的话，我的处理方式是把订单id存在本地，从支付页面返回的时候再用订单id查订单状态。

this.$http({
		url: api ,
		header: {
				type: "application/json"
		},
		data: data		
		}).then((res)=> {
				if(res.data.code=200){
					this.wxOrderId=res.data.data.wxOrderId;
					//存到本地方便支付完成后查询订单状态
				    uni.setStorageSync('wxOrderId',res.data.data.wxOrderId);
					if(res.data.data.mweb_url){
					//后端返回的支付地址
						location.href = res.data.data.mweb_url;
					}
								
				}
		})