1.判斷瀏覽器是微信還是支付寶或其他瀏覽器
2.微信瀏覽器調(diào)用微信支付的方法（調(diào)用后臺(tái)接口創(chuàng)建訂單，需要微信用戶唯一標(biāo)識(shí)openid；接口返回微信支付所需的支付參數(shù)）
3.支付寶瀏覽器支付方法文章來源地址http://www.zghlxwxcb.cn/news/detail-595779.html

//支付
payBtn() {
	var ua = navigator.userAgent.toLowerCase();
	var isWeixin = ua.indexOf('micromessenger') != -1;
	var isAlipay = ua.indexOf('alipayclient')  != -1;
	if (isWeixin) { //判斷當(dāng)前環(huán)境是否是微信瀏覽器
		//是微信瀏覽器   調(diào)用公眾號(hào)支付 
		let data = {
			其他參數(shù)與后臺(tái)協(xié)商
			openid: 唯一標(biāo)識(shí),
		}
		createOrder(data).then((res) => {
			if (res.status == 200) {
				// console.log(res.data) 接口返回微信所需支付參數(shù)
				let data = {}
				if(res.message == "您還有待支付的訂單"){
					data = res.data.pay_info;
				}else{
					data = res.data;
				}
				this.wxpayOrder(data);
			} else {
				Toast.fail(res.message);
			}
		}).catch((res) => {
			Toast.fail("請(qǐng)稍后重試");
		});
	} else if(isAlipay){
		// 其他瀏覽器  ，直接調(diào)用支付接口
		this.alipay()
		// Toast.fail("支付寶");
	}else {
		Toast.fail("請(qǐng)使用微信或支付寶瀏覽器");
	}

},
// 支付寶支付  請(qǐng)求接口，返回支付寶支付鏈接，跳轉(zhuǎn)
alipay(){
	let data = {
		與后臺(tái)約定支付參數(shù)
	}
	createOrder(data).then((res) => {
		if (res.status == 200) {
			var url = res.data.qrcode_url;
			window.location.href = url;
		} else {
			Toast.fail(res.message);
		}
	}).catch((res) => {
		Toast.fail("請(qǐng)稍后重試");
	});
},


// 微信支付
wxpayOrder(data) {
	console.log(111)
	let payParam = {
		appId: data.appId,
		nonceStr: data.nonceStr,
		package: data.package,
		timeStamp: data.timeStamp,
		signType: data.paySign,
		paySign: 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, // 公眾號(hào)名稱，由商戶傳入
		'timeStamp': e.timeStamp, // 時(shí)間戳，自1970年以來的秒數(shù)
		'nonceStr': e.nonceStr, // 隨機(jī)串
		'package': e.package,
		'signType': e.paySign, // 微信簽名方式：
		'paySign': e.paySign // 微信簽名
	}
	WeixinJSBridge.invoke( //這個(gè)對(duì)象只有微信瀏覽器支持
		'getBrandWCPayRequest', etr,
		function(res) {
			if (res.err_msg == 'get_brand_wcpay_request:ok') {
				Toast('支付成功')
				setTimeout(function() {  //支付成功后的展示頁面
					that.$router.push({
						path: "/homeIndex",
					});
				}, 1500)
			} else {
				Toast('支付失?。? + res.err_msg)
			}
		})
},

到了這里，關(guān)于vue實(shí)現(xiàn)H5支付（微信，支付寶）的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！