解决ios H5微信支付不能跳回App的问题
解决ios H5微信支付不能跳回App的问题
app项目是uni-app开发的安卓和iOS版本,安卓测试无问题,以下主要说iOS的解决方案。
问题点:app用webview打开H5页面,在H5页面发起微信支付(非app支付)唤醒微信打开支付,此时放弃支付或者支付完成,微信默认打开safari浏览器,没有返回app。
1.H5页面
发起支付时,后端写一个接口去访问微信的接口,微信会返回一段链接,直接回调给前端,前端处理代码如下:
//请求后台接口获取url
$.ajax({url:"",type:"post",data:{},success: function (data) {//拼接自己定义的返回页面,注意一定要encodeURIComponent//没参数的话,至少www.公司域名.com://let myUrl="www.公司域名.com://参数xxx";//唤起微信window.location.href=data+"&redirect_url="+encodeURIComponent(myUrl);}
})
2.配置UrlSchemes
支付完成/取消回调
www.公司域名.com:// 作用是访问这个“地址”能唤醒app,就像你能唤醒手机上app一样,他们都给自己取了一个名字是“UrlSchemes”
注意:首先需要在uni-app配置中 配置iOS 的UrlSchemes 配置位置在(app常用其他设置)配置过之后需**打包**才能生效,然后在Safari中获取app的其他浏览器中输入你的UrlSchemes+“: //”成功唤醒你的app则配置成功。测试在app的webview中发起H5支付回调即可返回app。
配置相关链接:https://ask.dcloud.net.cn/article/64
配置案例:urlschemes 必须配置,在safari浏览器输入 h5.huojianpeiwan.com:// 将跳转到对应的app,urlidentifier 目前不知道干啥子用的
// 记得打包、打包、打包
"urltypes" : [{"urlidentifier" : "com.公司域名.www","urlschemes" : [ "www.公司域名.com" ] //基本都是设置对用webview钱包的链接}
],
3.webview回调的处理
第一、二步成功之后,如果微信支付成功之后返回app需要打开的页面仍然是webview中的支付详情页,这个时候就会发现,显示的是白屏,这是因为微信的回调打开路径是
redirect_url=“www.公司域名.com://参数xxx”
这不是H5路径,微信回调的时候 只是返回了app,没有拿到具体路径,这时我们就可以对第一步的时候发起微信支付时进行判断
// #ifdef APP-PLUS
let statusbar = uni.getSystemInfoSync().safeAreaInsets.bottom;
let statusBarHeight = statusbar ? uni.getSystemInfoSync().statusBarHeight : (uni.getSystemInfoSync().statusBarHeight + 44); //用来判断是否有安全距离设置高度
let wv = plus.webview.create("", "custom-webview", {plusrequire: "none", //禁止远程网页使用plus的API,有些使用mui制作的网页可能会监听plus.key,造成关闭页面混乱,可以通过这种方式禁止'uni-app': 'none', //不加载uni-app渲染层框架,避免样式冲突top: uni.getSystemInfoSync().statusBarHeight + 44,//放置在titleNView下方。如果还想在webview上方加个地址栏的什么的,可以继续降低TOP值height: uni.getSystemInfoSync().screenHeight - statusBarHeight
})
wv.loadURL(`${this.url}`) //防止对应需要加载的钱包页面
var currentWebview = this.$scope.$getAppWebview(); //此对象相当于html5plus里的plus.webview.currentWebview()。在uni-app里vue页面直接使用plus.webview.currentWebview()无效,非v3编译模式使用this.$mp.page.$getAppWebview()
currentWebview.append(wv); //一定要append到当前的页面里!!!才能跟随当前页面一起做动画,一起关闭
wv.addEventListener('loaded',()=>{if(wv.getURL().indexOf('https://wx.tenpay.com') != -1){let redirect = decodeURIComponent(wv.getURL()).split('redirect_url=')[1];console.log(redirect);let newRedirect = redirect.replace('://','/');wv.loadURL('https://'+newRedirect)console.log('https://'+newRedirect);
}},false)
// #endif
唤起微信支付时,在uni-app上拿到 redirect_url 并把
“www.公司域名.com://参数xxx” 替换成
“https://www.公司域名.com/参数xxx”
的H5回调链接,并重新用webview的方法loadURL打开wv.loadURL(" ")
4.返回app跳到别的页面
3成功返回app之后,如果业务需求返回的是app的支付详情页,需要监听app被UrlSchemes唤醒,在app.vue中做如下处理
在app.vue中onLaunch写
// #ifdef APP-PLUS
// 用来 ios 微信支付回调回来跳转到钱包页面,实现重新刷新
uni.getSystemInfo({success: function (res) {// 防止 andorid 系统点击通知栏的IM消息跳到钱包的情况if (res.platform == 'ios') {plus.globalEvent.addEventListener('newintent', (e)=>{var args= plus.runtime.arguments; if(args){uni.redirectTo({ //关闭当前的webview,在跳进钱包实现重新刷新url:"/pages/huojian/wallet/wallet"})}});}}
});
// #endif
注意:这种判断情况需要关闭启动页,不然第三方登录的话会直接跳到钱包页面
把下面的配置给删除了
UrlSchemes相关查询网址:https://sharecuts.cn/
支付宝问题跳转问题:猪博士 APP
UrlSchemes相同,无法跳到想要的APP案列(无法解决):https://www.ithome.com/html/it/361607.htm
解决ios H5微信支付不能跳回App的问题相关推荐
- ios浏览器微信支付回调页面_iOS集成H5微信支付实现跳转与回调的解决方案
前言 最近有个需求,不能在iOS客户端内集成支付宝和微信的App支付SDK(为了防苹果审核检测SDK),因此使用H5支付,虽然微信和支付宝的H5支付文档都说不要在App内使用H5支付而是使用App支付 ...
- iOS H5微信支付总结
功能描述 1.webView加载H5页面 2.点击微信支付,调起微信客户端支付 3.支付完成,返回APP 操作流程 1.调起微信的项目设置 选中'TARGETS'一栏,在'info'中的'LSAppl ...
- ios浏览器微信支付回调页面_iOS H5微信支付和微信支付完成之后跳转回APP
最近碰到一个需要用H5支付的商城,痛苦了一整天,查找了N多的资料,终于还是苦尽甘来了.话不多说,干货来了.我用的是WKWebView,套路是一样的. 1.首先,设置白名单,确保你能顺利跳转微信. 设置 ...
- iOS WKWebView H5微信支付跳转
iOS WKWebView H5微信支付跳转 需求:iOS客户端实现嵌入H5进行微信支付跳转到微信客户端,支付完成后再跳转回我们的APP,解决WKWebView无法跳转回APP的BUG. 阅读前提: ...
- 微信h5支付“网站域名ICP备案主体与商户号主体不一致”的解决方法,H5微信支付 授权函下载
微信h5支付"网站域名ICP备案主体与商户号主体不一致"的解决方法,H5微信支付 授权函下载 参考文章: (1)微信h5支付"网站域名ICP备案主体与商户号主体不一致&q ...
- 关于IOS调用微信支付jsapi不起作用的解决方法
关于IOS调用微信支付jsapi不起作用的解决方法 参考文章: (1)关于IOS调用微信支付jsapi不起作用的解决方法 (2)https://www.cnblogs.com/randy619/p/5 ...
- 【uniapp】H5跳转微信支付和跳转支付宝支付
支付 H5微信跳转 游览器环境下h5支付 微信环境下H5支付 H5支付宝跳转 游览器环境下,跳转到微信和跳转到支付宝方式一样 H5微信跳转 H5微信支付先分环境: 1,比如,复制链接到游览器,在游览器 ...
- [Flutter]微信分享并从分享链接跳回APP指定页面
最近在使用flutter开发APP,flutter实现了一套代码同时生成Android和iOS两个平台的APP,可以实现零基础快速上手APP开发,缩短开发周期.但flutter仍处于较快增长期,版本迭 ...
- html5+ mui框架 微信授权登录后跳回app无任何回调事件
2019独角兽企业重金招聘Python工程师标准>>> 微信授权登录可以调起微信,但是在微信上点击确认登陆后跳回app,但是之后无任何回掉事件. 问题原因: 1 因为我在集成Face ...
最新文章
- Nat Rev Genet发表房刚组细菌表观组综述论文
- QT的QAxFactory类的使用
- HDU - 3364 Lanterns(高斯消元解方程(取模))
- 内存泄漏和内存溢出的区别
- 前端学习(2978):上午回顾
- python的符号函数得到的数字类型_Python笔记——数字类型的几个函数
- 【面向对象】子系统和包
- 配置EditPlus
- 让手机重现“一律允许使用这台计算机进行调试”确认窗口
- 《SPSS统计分析与行业应用实战》之P2P行业中的应用
- 一些音视频相关概念学习笔记
- 新手20天自学吉他入门
- 加工奶制品的生产计划
- 《终身成长》读书分享(附思维导图)
- 文件管理(操作系统)
- CTF-MISC文件隐写总结(图片,音频,视频,压缩包等文件)
- 全局vue中修改字体样式 苹方字体 微软雅黑 亲测可用
- 每日一句_《定风波·暮春漫兴》
- 设置软件的默认打开方式
- BZOJ1707: [Usaco2007 Nov]tanning分配防晒霜