安卓支付
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的个人中心页面了
支付宝支付流程
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自带浏览器就好了。
常见问题FAQ
- 免费下载或者VIP会员专享资源能否直接商用？
- 本站所有资源版权均属于原作者所有，这里所提供资源均只能用于参考学习用，请勿直接商用。若由于商用引起版权纠纷，一切责任均由使用者承担。更多说明请参考 VIP介绍。
- 提示下载完但解压或打开不了？
- 找不到素材资源介绍文章里的示例图片？
- 模板不会安装或需要功能定制以及二次开发？
发表评论
还没有评论，快来抢沙发吧！