Zwx's blog Zwx's blog
首页
  • 前端文章

    • JavaScript
  • 学习笔记

    • 《JavaScript教程》
    • 《JavaScript高级程序设计》
    • 《ES6 教程》
    • 《Vue》
    • 《React》
    • 《TypeScript 从零实现 axios》
    • 《Git》
    • TypeScript
    • JS设计模式总结
  • HTML
  • CSS
  • 技术文档
  • GitHub技巧
  • Nodejs
  • 博客搭建
  • 工作笔记
  • 学习
  • 面试
  • 心情杂货
  • 实用技巧
  • 友情链接
关于
收藏
  • 分类
  • 标签
  • 归档

Zwx

Aal izz well 一切顺利
首页
  • 前端文章

    • JavaScript
  • 学习笔记

    • 《JavaScript教程》
    • 《JavaScript高级程序设计》
    • 《ES6 教程》
    • 《Vue》
    • 《React》
    • 《TypeScript 从零实现 axios》
    • 《Git》
    • TypeScript
    • JS设计模式总结
  • HTML
  • CSS
  • 技术文档
  • GitHub技巧
  • Nodejs
  • 博客搭建
  • 工作笔记
  • 学习
  • 面试
  • 心情杂货
  • 实用技巧
  • 友情链接
关于
收藏
  • 分类
  • 标签
  • 归档
  • 技术文档

  • GitHub技巧

  • Nodejs

  • 博客搭建

  • 工作笔记

    • APP跳微信客服
    • H5微信支付跳转问题
    • H5支付宝跳转问题
    • css
    • npm
    • ts
    • uniapp
    • vue
    • vue响应式插件
    • 其他
    • node版本包管理-n
    • react路由严格模式问题
    • react Router嵌套路由不生效
    • GIT 遇到问题
    • 在 M1 芯片 Mac 上使用 Homebrew
  • 模板

  • 日常记录

  • 技术
  • 工作笔记
Zwx
2022-01-19
0

H5支付宝跳转问题

# 解决ios H5支付宝支付不能跳回App的问题

这种做法只适合 APP -> 浏览器 -> 支付宝的支付形式

官方文档的原话 (opens new window):

在 IOS 系统中,唤起支付宝 App 支付完成后,不会自动回到浏览器或商户 App。用户可手工切回到浏览器或商户 App;支付宝 H5 收银台会自动跳转回商户 return_url 指定的页面。

官方文档这么说可能是不让你修改里面的fromAppUrlScheme值把,目前原因未知

1.当我们在webview 支付宝支付的时候,页面会加载支付宝返回的页面链接(如果浏览器访问的话,会直接跳到支付宝,在webview的话,就不会跳过去,需要点击 继续付款 才会跳转,所以我们要对这里的 继续付款 的按钮进行处理),如图:

image-20211218094741915

2.H5支付,这里就不贴代码了,其实就是前端发起请求,后端返回一个 form 表单,将他 v-html 渲染在页面上,在执行 setTimeout(()=>{document.forms[0].submit();},300) ,就可以了,具体参考网上代码。



3.首页我们要了解为什么会跳到支付宝APP,我们首先要了解下 URL Scheme ,每个APP都有单独URL Scheme ,除非恶意软件,它是能在浏览器输入访问的话,就会跳到对应的APP的一个东西,这里推荐一个网站,能查对应APP的URL Scheme:https://sharecuts.cn/app/333206289 (opens new window)

当我们点击继续付款的话,会出现(可以拿H5页面去测试,在log报错会出现这一条):

alipay://alipayclient/?xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
1

解码为(网站:http://tool.chinaz.com/tools/urlencode.aspx (opens new window)):

alipay://alipayclient/?{"requestType":"SafePay","fromAppUrlScheme":"alipays","dataString":"h5_route_token=\"xxxxxxxxxxxxxxxxx\"&is_h5_route=\"true\"&h5_route_senior=\"true\""}
1

我们看到了 alipay:这个东西就是跳转到支付宝APP的东西,点击的话他在 IOS 上是 点击 -> 链接到Safari-> 跳转到支付宝,这里我们要对这段链接进行拦截并修改里面的fromAppUrlScheme的值,改成为你 公司的APP 的URL Scheme,这里我们看 fromAppUrlScheme 的值为 alipays所以,支付成功后还是留在 支付宝



4.理解1、2两点之后我们在webview进行拦截,直接贴代码:

原理:这段代码是,拦截我们点击按钮跳转的链接,并修改里面的fromAppUrlScheme的值,实现跳转

onReady() 
		// #ifdef APP-PLUS
		if (uni.getSystemInfoSync().platform == 'ios') {
			const currentWebview = this.$mp.page.$getAppWebview();
			var wv = currentWebview.children()[0];
				 
			//拦截支付宝点击支付的按钮跳转,并修改里面的 fromAppUrlScheme 值
			wv.overrideUrlLoading({mode: 'reject',match: '.*alipay\:\/\/.*'},(e)=>{
				console.log(e.url);
				let newUrl = e.url.replace(/alipays/,'www.xxx.com://')
				setTimeout(() => {
					console.log(newUrl);
					plus.runtime.openURL(newUrl, function(res) {
						console.log('跳转支付宝成功:'+ res);
					}); 
				},500);  
			});
		}
		// #endif
	}	
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

注:我们使用 plus.runtime.openURL 会报一个错,会出现 报错code:-3,msg:此功能不支持,这是因为iOS平台需要通过设置appInf的action属性(Scheme)进行查询,在iOS9以后需要添加白名单才可查询。

设置 在manifest.json文件的"plus"->"distribute"->"ios"下添加 urltypes 和 urlschemewhitelist 节点数据如下:

"ios" : {
    "urltypes" : [
        {
            "urlidentifier" : "com.xxx.www",
            "urlschemes" : [ "www.xxx.com" ]	//名字随便取,不过要跟上面的拦截修改一致,拦截的话后面记得加上 ://,相关配置文章看我最后发的链接
        }
    ],
    "urlschemewhitelist" : [ "alipay" ],
}
1
2
3
4
5
6
7
8
9

注:保存后提交App云端打包后才能生效 或者自定义基座运行

iOS平台设置UrlSchemes:https://ask.dcloud.net.cn/article/64 (opens new window)

iOS平台设置应用访问白名单:https://ask.dcloud.net.cn/article/434 (opens new window)

上次更新: 5/13/2023, 5:48:10 PM
H5微信支付跳转问题
css

← H5微信支付跳转问题 css→

最近更新
01
在 M1 芯片 Mac 上使用 Homebrew
11-08
02
GIT 遇到问题
11-06
03
react Router嵌套路由不生效
10-27
更多文章>
Theme by Vdoing | Copyright © 2019-2023 Evan Xu | MIT License
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式
×