解决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的问题相关推荐

  1. ios浏览器微信支付回调页面_iOS集成H5微信支付实现跳转与回调的解决方案

    前言 最近有个需求,不能在iOS客户端内集成支付宝和微信的App支付SDK(为了防苹果审核检测SDK),因此使用H5支付,虽然微信和支付宝的H5支付文档都说不要在App内使用H5支付而是使用App支付 ...

  2. iOS H5微信支付总结

    功能描述 1.webView加载H5页面 2.点击微信支付,调起微信客户端支付 3.支付完成,返回APP 操作流程 1.调起微信的项目设置 选中'TARGETS'一栏,在'info'中的'LSAppl ...

  3. ios浏览器微信支付回调页面_iOS H5微信支付和微信支付完成之后跳转回APP

    最近碰到一个需要用H5支付的商城,痛苦了一整天,查找了N多的资料,终于还是苦尽甘来了.话不多说,干货来了.我用的是WKWebView,套路是一样的. 1.首先,设置白名单,确保你能顺利跳转微信. 设置 ...

  4. iOS WKWebView H5微信支付跳转

    iOS WKWebView H5微信支付跳转 需求:iOS客户端实现嵌入H5进行微信支付跳转到微信客户端,支付完成后再跳转回我们的APP,解决WKWebView无法跳转回APP的BUG. 阅读前提: ...

  5. 微信h5支付“网站域名ICP备案主体与商户号主体不一致”的解决方法,H5微信支付 授权函下载

    微信h5支付"网站域名ICP备案主体与商户号主体不一致"的解决方法,H5微信支付 授权函下载 参考文章: (1)微信h5支付"网站域名ICP备案主体与商户号主体不一致&q ...

  6. 关于IOS调用微信支付jsapi不起作用的解决方法

    关于IOS调用微信支付jsapi不起作用的解决方法 参考文章: (1)关于IOS调用微信支付jsapi不起作用的解决方法 (2)https://www.cnblogs.com/randy619/p/5 ...

  7. 【uniapp】H5跳转微信支付和跳转支付宝支付

    支付 H5微信跳转 游览器环境下h5支付 微信环境下H5支付 H5支付宝跳转 游览器环境下,跳转到微信和跳转到支付宝方式一样 H5微信跳转 H5微信支付先分环境: 1,比如,复制链接到游览器,在游览器 ...

  8. [Flutter]微信分享并从分享链接跳回APP指定页面

    最近在使用flutter开发APP,flutter实现了一套代码同时生成Android和iOS两个平台的APP,可以实现零基础快速上手APP开发,缩短开发周期.但flutter仍处于较快增长期,版本迭 ...

  9. html5+ mui框架 微信授权登录后跳回app无任何回调事件

    2019独角兽企业重金招聘Python工程师标准>>> 微信授权登录可以调起微信,但是在微信上点击确认登陆后跳回app,但是之后无任何回掉事件. 问题原因: 1 因为我在集成Face ...

最新文章

  1. Nat Rev Genet发表房刚组细菌表观组综述论文
  2. QT的QAxFactory类的使用
  3. HDU - 3364 Lanterns(高斯消元解方程(取模))
  4. 内存泄漏和内存溢出的区别
  5. 前端学习(2978):上午回顾
  6. python的符号函数得到的数字类型_Python笔记——数字类型的几个函数
  7. 【面向对象】子系统和包
  8. 配置EditPlus
  9. 让手机重现“一律允许使用这台计算机进行调试”确认窗口
  10. 《SPSS统计分析与行业应用实战》之P2P行业中的应用
  11. 一些音视频相关概念学习笔记
  12. 新手20天自学吉他入门
  13. 加工奶制品的生产计划
  14. 《终身成长》读书分享(附思维导图)
  15. 文件管理(操作系统)
  16. CTF-MISC文件隐写总结(图片,音频,视频,压缩包等文件)
  17. 全局vue中修改字体样式 苹方字体 微软雅黑 亲测可用
  18. 每日一句_《定风波·暮春漫兴》
  19. 设置软件的默认打开方式
  20. BZOJ1707: [Usaco2007 Nov]tanning分配防晒霜

热门文章

  1. GIF动态图怎么制作?试试这些简单方便的制作方法
  2. 服务器多系统ssd寿命检测,多品牌服务器上SSD磁盘寿命的批量统计与监控方法
  3. 《JavaScript设计模式》读后感 觉很复杂
  4. 盛大借助Bambook程序达人赛推开放平台
  5. Mac 系统不兼容移动硬盘无法识别怎么办
  6. 支付宝支付开发——当面付条码支付和扫码支付
  7. 【AD】Altium Designer Filter(过滤器)使用技巧
  8. 内核自带的基于GPIO的LED驱动学习(二)
  9. 动态规划—1.3 九宫格最短路径
  10. 翻译音频的软件有哪些?将这几个可以翻译音频的软件分享给你