vue H5手机端+公众号 微信支付 接口对接

无视后端流程，从前端角度对接支付接口

所有的流程都在创建订单 ， 保存订单ID之后，  

1.需要判断环境是公众号环境（微信浏览器）还是别的浏览器

2.根据不同的浏览器环境  ，调用不同的支付方式

var ua = navigator.userAgent.toLowerCase();
var isWeixin = ua.indexOf('micromessenger') != -1;
if (isWeixin) {  //判断当前环境是否是微信浏览器
    //是微信浏览器   调用公众号支付 
    if(this.userInfo.Openid_Gzh){   //首先判断用户有没有OpenId
        this.PayStoreGrade()  //直接支付
    }else{
        this.GetOpenid()   //获取openid
    }	
}else{
    // 其他浏览器  ，直接调用支付接口
    this.h5pay()
}

 1，微信浏览器环境首先要判断用户信息内是否有openid    我这后台是  判断 上面的  Openid_Gzh 字段，有的话直接支付 ，没有的话首先要获取openid   ，然后才能掉支付接口，

 GetOpenid() {
	var code = "";
	if (this.$route.query.code != undefined) {  // 判断地址栏code信息  如果存在就赋值
		code = this.$route.query.code
	}
	this.Axios.post(api.GetOpenid, {
		redirecturi: apiUrl + "/pay?Mid=" + this.$route.query.Mid,   //回调页面参数
		code: code      //code作为参数
	}).then(res => {
		//alert(res);
		console.log(res)
		if (res.data.code == -2) {   //code为空就会返回  -2  ，会直接回到参数redirecturi的页面  地址栏附带code，并赋值
			window.location.href = res.data.data;
		}else if (res.data.code == 0){  //有code信息就会调用支付  ，开启支付流程
			//this.wxOpenId = res.data.data;
			this.PayStoreGrade();     //直接支付
		}
	})
 },

 获取到code（openId）后 ， 直接调支付， 微信浏览器支付的代码差不多都是这个模板

PayStoreGrade() { //订单支付
	this.Axios.post(api.PayStoreGrade, {     
		orderId: this.orderid,
		type: 2
	}).then(res => {
		console.log(res)
		if (res.data.code == 0) {
			let payParam = {
				appId: res.data.data.appId,
				nonceStr: res.data.data.nonceStr,
				package: res.data.data.package,
				timeStamp: res.data.data.timeStamp,
				signType: 'MD5',
				paySign: res.data.data.paySign,
			}
			if (typeof WeixinJSBridge === 'undefined') {
				if (document.addEventListener) {
					document.addEventListener('WeixinJSBridgeReady', this.onBridgeReady(payParam), false)
				} else if (document.attachEvent) {
					document.attachEvent('WeixinJSBridgeReady', this.onBridgeReady(payParam))
					document.attachEvent('onWeixinJSBridgeReady', this.onBridgeReady(payParam))
				}
			} else {
				this.onBridgeReady(payParam)
			}
		}
	})
},


onBridgeReady(e) {
	let that = this
	console.log(e)
	let etr = {
		'appId': e.appId, // 公众号名称，由商户传入
		'timeStamp': e.timeStamp, // 时间戳，自1970年以来的秒数
		'nonceStr': e.nonceStr, // 随机串
		'package': e.package,
		'signType': 'MD5', // 微信签名方式：
		'paySign': e.paySign // 微信签名
	}
	WeixinJSBridge.invoke(  //这个对象只有微信浏览器支持
		'getBrandWCPayRequest', etr,
		function(res) {
			if (res.err_msg == 'get_brand_wcpay_request:ok') {
				Toast('支付成功')
				setTimeout(function() {  //支付成功后的展示页面
					that.$router.push({
						path: '/mindex'
					})
				}, 1500)
			} else {
				//Toast('支付失败：'+res.err_msg)
			}
		})
},

2.其他浏览器  H5支付直接调用后台  ，只需订单ID即可，成功后打开回调页面完成支付（回调页面需要微信开放社区管理端配置）

 h5pay(){
    this.Axios.post(api.Wxh5PayStoreGrade, {
         orderId:this.orderid
    }).then((res) => {
        console.log(res)
        if(res.data.code == 0) {
            this.orderId = '';
            location.href=res.data.data.result.mweb_url
        } else {
            //弹出报错信息
	    //Toast(res.data.msg)
	    }
    })}