uni实现App的h5支付详细流程(微信，支付宝) |
您所在的位置：网站首页 › webview跳转浏览器 › uni实现App的h5支付详细流程(微信，支付宝) |
uni实现App的h5支付详细流程(微信，支付宝)
|
安卓支付
首先 安卓 的H5支付众所周知H5支付是需要跳转浏览器从而调起微信支付所以后台大哥已经把必要的参数还有回调地址已经处理好了。所以我们只需要跳转到对应的webView地址就好注意：跳转的url必须跟支付配置的域名要在后台配置过并且有白名单话不多说程序员用代码交流!!! 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> ... Please enable JavaScript to continue. document.addEventListener('UniAppJSBridgeReady', function() { uni.webView.getEnv(function(res) { console.log('当前环境：' + JSON.stringify(res)); }); // uni.webView.navigateTo(...) }); `官方给的解决办法就是这样的，引入uni的sdk进行和应用内的页面进行交互，于是乎我就放在了我的vue项目试了一下发现不行， 怎么试都不行，当时搞了俩天，本人已经快走火入魔了` `后来就仔细认真的阅读了uni的文档，并且下载了uni的示例项目`不知道的小伙伴可以下载示例项目里面有案例的 经过仔细的研究uni的sdk在vue脚手架项目怎么都不起作用，必须要单页面，那么好找到问题就开始写代码把。 我的代码 DOCTYPE html> ... Please enable JavaScript to continue. 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) } } }); // 具体的核心代码就在这里了，注意的是app项目的支付不像h5项目支付成功后回调到项目的某个页面,所以我们要做一个中间操作我是在页面加入的默认进来会带一个success为true 进行判断如果为false则是第一次进入支付流程，直接调起微信支付即可，支付成功的回调地址会拼接success为true，就会进入上述图片的弹框，然后点击已完成就会走验证支付的接口，如果成功就直接跳回app的个人中心页面了 支付宝支付流程支付宝支付就相对来说比较简单了，直接上代码： 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页面了，直接这样打开浏览器即可，大致的就在这里了，如果不懂的小伙伴可以给我留言，随时回复。当时踩了很多坑，还好有我龙哥为我指点迷津。 |
【本文地址】
今日新闻 |
推荐新闻 |