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跳转问题

    注意

    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);
     }
    })
    
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13



    # 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 (opens new window)

    配置案例:urlschemes 必须配置,在safari浏览器输入 h5.huojianpeiwan.com:// 将跳转到对应的app,urlidentifier 目前不知道干啥子用的

    // 记得打包、打包、打包
    "urltypes" : [
        {
            "urlidentifier" : "com.huojianpeiwan.h5",
            "urlschemes" : [ "h5.huojianpeiwan.com" ]	//基本都是设置对用webview钱包的链接
        }
    ],
    
    1
    2
    3
    4
    5
    6
    7



    # 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
    
    
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22

    唤起微信支付时,在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
    
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18

    注意:这种判断情况需要关闭启动页,不然第三方登录的话会直接跳到钱包页面

    把下面的配置给删除了

    image-20211130114404978

    UrlSchemes相关查询网址:https://sharecuts.cn/ (opens new window)

    支付宝问题跳转问题:猪博士 APP

    UrlSchemes相同,无法跳到想要的APP案列(无法解决):https://www.ithome.com/html/it/361607.htm (opens new window)

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

    ← APP跳微信客服 H5支付宝跳转问题→

    最近更新
    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
    • 跟随系统
    • 浅色模式
    • 深色模式
    • 阅读模式
    ×