我的思路大概是這樣的

1. 驗證是否是在微信內(nèi)置瀏覽器中調(diào)用支付寶

2.給支付頁面的url加上調(diào)用接口所需的參數(shù)（因為在微信里是不能直接調(diào)用支付寶的需要調(diào)用外部瀏覽器）

3.在外部瀏覽器中完成支付跳轉(zhuǎn)頁面

第一步：

payment: 是選擇支付頁面，pay-mask是用于在微信內(nèi)置瀏覽器中調(diào)用支付寶的中間頁

payment主要代碼：

let ua = window.navigator.userAgent.toLowerCase()

ua.match(/MicroMessenger/i) == 'micromessenger'

這兩句代碼就是判斷用戶是否是用微信內(nèi)置瀏覽器打開的頁面

如果是的話我們就需要把調(diào)用支付接口所需要的接口參數(shù)傳給另一個頁面（你也可以就在當(dāng)前頁做處理，我這樣做是因為我想加一個提示頁）

pay-mask代碼如下：

<template> <div class='mask'> <!-- 提示在瀏覽器打開彈框 --> <div v-show='isWeiXi'> </div> <div class='payform'></div> </div></template>

<script type='text/ecmascript-6'> /*解決在微信瀏覽器中無法調(diào)用支付寶支付：1.拿到從支付頁傳遞過來的參數(shù)重組成自己需要的數(shù)據(jù)2.清除舊的緩存數(shù)據(jù)（防止出現(xiàn)意外bug）3.驗證是否是微信瀏覽器（不是就把拿到的key和token存進(jìn)本地緩存中，用于其他接口調(diào)用）4.請求數(shù)據(jù)接口拿到支付寶的支付表單裝進(jìn)頁面中完成支付*/ export default { name: ’payMask’, data () { return { isWeiXi: true, theRequest: {} } }, methods: { // 獲取當(dāng)前微信瀏覽器url地址參數(shù) getUrlParams() { // 清除舊的緩存數(shù)據(jù) // window.localStorage.clear() let theRequest = new Object(); let url = location.href; //獲取url中'?'符后的字串 let strs = []; if (url.indexOf('?') != -1) {var str = url.substr(parseInt(url.indexOf('?')+1)); strs = str.split('&'); for (var i = 0; i < strs.length; i++) { theRequest[strs[i].split('=')[0]] = unescape(strs[i].split('=')[1]); } } this.theRequest = theRequest; }, // 監(jiān)控微信瀏覽器 isWeiXin() { let ua = window.navigator.userAgent.toLowerCase(); if (ua.match(/MicroMessenger/i) != 'micromessenger') { this.isWeiXi = false // 重新存儲新的token（在外部瀏覽器打開支付完成后是沒有token這些數(shù)據(jù)的所以需要在瀏覽器一打開的時候就去存一次數(shù)據(jù)） window.localStorage.setItem('channelId', this.theRequest.channelId); window.localStorage.setItem('userKey',JSON.stringify(this.theRequest.userKey)); window.localStorage.setItem('userToken',JSON.stringify(this.theRequest.userToken)); if(this.theRequest.memberTypeName){ // 調(diào)用支付寶支付 this.zfbPayBuy(this.theRequest) } else { this.zfbPayBuySocial(this.theRequest) } } else { this.isWeiXi = true } }, // 支付寶支付(會員) zfbPayBuy(data){ // 請求接口拿到接口返回的支付表單（接口直接返回的，我們直接裝進(jìn)頁面就可以了） this.axios.payBuy(data).then(res => { if (res.status == 0) { let payHtml = document.querySelector('.payform'); payHtml.innerHTML = res.result;let paySub = payHtml.getElementsByTagName('input')[1]; paySub.click() } }) }, //支付寶支付（社保） zfbPayBuySocial(data) { this.axios.buySocial(data).then(res => { if (res.status == 0) { let payHtml = document.querySelector('.payform') payHtml.innerHTML = res.result let paySub = payHtml.getElementsByTagName('input')[1] paySub.click() } }) }, }, created() { // 拿去當(dāng)前地址參數(shù) this.getUrlParams() if(JSON.stringify(this.theRequest) != ’{}’){ this.isWeiXin() } }, mounted(){ // 更新一下當(dāng)前瀏覽器地址（防止在微信里調(diào)用外部瀏覽器的時候出現(xiàn)意外bug） window.location.href = window.location.href } } </script>

<style scoped lang='less'> .pay-mask { width: 100%; min-height: 100%; position:fixed; z-index: 99; background-color: rgba(0, 0, 0,.6); background-image: url(’../../image/icon/confirm.png’); background-repeat: no-repeat; } </style>

補充知識：vue 移動端H5非內(nèi)置瀏覽器發(fā)起微信、支付寶支付

該貼只說前端部分，后端人員繞路哈。

先調(diào)用統(tǒng)一下單接口后

1、微信部分，后端會返回一個url給你，

'mweb_url':https://wx.tenpay.com/cgi-bin/mmpayweb-bin/checkmweb?prepay_id=wx********************&package=162****

直接跳轉(zhuǎn)就行了。(最后提醒句：提示服務(wù)商參數(shù)缺失的話就讓服務(wù)商開通H5支付)

window.location.href = res.data.mweb_url

2、支付寶方面就有點麻煩，因為它返回的是一個form

所以嘛，需要創(chuàng)建個div然后innerHTML插入HTML代碼

const div = document.createElement(’div’) // 創(chuàng)建divdiv.innerHTML = res.data.aliHtml // 將返回的form 放入divdocument.body.appendChild(div) // 將上面創(chuàng)建的元素加入到BODY的尾部document.forms[0].submit() // 表示獲取當(dāng)前頁面的第一個表單

這樣就OK了

如果想問支付成功后的跳轉(zhuǎn)呢，你則需要給一個鏈接給到后端，后端傳給阿里或者微信，成功后自己跳的。

以上這篇vue 解決在微信內(nèi)置瀏覽器中調(diào)用支付寶支付的情況就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持好吧啦網(wǎng)。