uni實現App的h5支付詳細流程(微信，支付寶)

時間 2021-01-22

標籤 javascript html vue java ios 程序員 web axios api 瀏覽器欄目 JavaScript 简体版

原文原文鏈接

安卓支付

首先安卓的H5支付衆所周知H5支付是須要跳轉瀏覽器從而調起微信支付因此後臺大哥已經把必要的參數還有回調地址已經處理好了。因此咱們只須要跳轉到對應的webView地址就好注意：跳轉的url必須跟支付配置的域名要在後臺配置過而且有白名單話很少說程序員用代碼交流!!!javascript

1.跳轉webView

此時設定咱們的跳轉地址爲 `https://baidu.com`複製代碼

let webUrl = `https://baidu.com`this.$Router.push({	name:'webView',params:{
            webUrl
        }
 }) 
 // 我使用的是封裝的路由組件，因此這裏就是跳轉傳參到webview頁面,webview單獨定義一個頁面而後接收options的傳參便可複製代碼

2.跳轉webview關鍵頁調取微信支付

先來講一下咱們的需求，點擊微信支付，跳轉webview的瀏覽器頁面調取微信支付，支付成功後跳回uni-app。

// 此時拿刀想捅死咱們的產品
// 仔細想了一下，順便看了一下uni的文檔發現可行，因此就開始建了一個h5項目的腳手架用vue語言搭建。
// 咱們來看一下uni官方給的答案複製代碼

<!DOCTYPE html><html lang="zh-CN">
  <head>...  </head>
  <body><noscript>  <strong>Please enable JavaScript to continue.</strong></noscript><div id="app"></div><!-- built files will be auto injected -->
  </body>
  <!-- uni 的 SDK -->
  <script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js"></script>
  <script>document.addEventListener('UniAppJSBridgeReady', function() {
      uni.webView.getEnv(function(res) {console.log('當前環境：' + JSON.stringify(res));
      });      // uni.webView.navigateTo(...)});  </script></html>`官方給的解決辦法就是這樣的，引入uni的sdk進行和應用內的頁面進行交互，因而乎我就放在了個人vue項目試了一下發現不行，
 怎麼試都不行，當時搞了倆天，本人已經快走火入魔了``後來就仔細認真的閱讀了uni的文檔，而且下載了uni的示例項目`不知道的小夥伴能夠下載示例項目裏面有案例的
通過仔細的研究uni的sdk在vue腳手架項目怎麼都不起做用，必需要單頁面，那麼好找到問題就開始寫代碼把。複製代碼

個人代碼

<!DOCTYPE html><html lang="zh-CN">
  <head>...  </head>
  <body><noscript>  <strong>Please enable JavaScript to continue.</strong></noscript><div id="app"></div><!-- built files will be auto injected -->
  </body>
  <!-- uni 的 SDK -->
  <script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js"></script>
  <script>
  	if('我這裏會帶一個參數進行判斷當前用戶是支付後進來仍是第一次點擊進入的') {document.addEventListener('UniAppJSBridgeReady', function() {             document.querySelector('.container').addEventListener('click', function (evt) {//這裏監聽點擊事件進行操做var target = evt.target;if(target.tagName === 'WEIXIN') {//點擊微信時的操做，這裏我會調用支付驗證的接口驗證用戶是否支付成功axios.post('接口地址').then(res => {if('支付成功') {
                            uni.switchTab({url: '/pages/my/my'})
                        } else {
                            alert('暫未支付,請前去支付')
                        }
                    })
                }
     } else {     	// 沒有支付let urls = url.split('&redirect_url=')let redirect_url = '這裏就是你的跳轉地址'window.location.href = urls[0] + '&redirect_url=' + encodeURIComponent(redirect_url)
     }
    }
    
    });  </script></html>// 具體的核心代碼就在這裏了，注意的是app項目的支付不像h5項目支付成功後回調到項目的某個頁面,因此咱們要作一箇中間操做複製代碼

我是在頁面加入的默認進來會帶一個success爲true 進行判斷若是爲false則是第一次進入支付流程，直接調起微信支付便可，支付成功的回調地址會拼接success爲true，就會進入上述圖片的彈框，而後點擊已完成就會走驗證支付的接口，若是成功就直接跳回app的我的中心頁面了html

支付寶支付流程

支付寶支付就相對來講比較簡單了，直接上代碼：vue

axios.post('接口地址', {}).then(function (res) {if (res.data.response) {
             alert('已經有訂單')
        } else {          // 沒有查詢訂單前去支付  axios.post('https://yzyapi.yrtsedu.cn/api/front/HFivePay/AliH5Pay',).then(function (res) {                 const div = document.createElement('div')
                 div.innerHTML = res.data.response.Body // 返回的form document.body.appendChild(div)                 document.forms[0].submit()

       })
    }
})
後臺返回的直接就是表單，因此直接把代碼放進去便可，支付成功後的回調仍是跟微信的思路差很少，只不過支付成功的回調頁面是項目中的alipay.html複製代碼