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复制代码

IOS端的安卓跟苹果支付，第一次进入会没有任何反应，那只好找各类缘由，大体的缘由是应为webview的跳转内置浏览器的内核跟ios的浏览器内核不同，因此会形成ifkame的错误，那既然这样那就直接打开ios自带浏览器就行了。

直接上关键代码 plus.runtime.openURL(webUrl) 在uni支付页面时候判断当前环境是ios不是，若是是就不要跳转webview页面了，直接这样打开浏览器便可，大体的就在这里了，若是不懂的小伙伴能够给我留言，随时回复。当时踩了不少坑，还好有我龙哥为我指点迷津。java