文档章节

各种场景唤起 App 骚操作

Jack088
 Jack088
发布于 02/14 23:49
字数 2872
阅读 202
收藏 0

唤起 App 应该是很常见的问题了。我们在开发 H5 的时候,有一些链路上的功能在 H5 不支持,只能去 App 才能完成。比如,下单、支付等功能。那么在更多的场景能够唤起 App 就显得很重要了。

几步走

  1. 判断浏览器,动态加载对应浏览器的下载逻辑

  2. 通过 universal linkURL Schemea 标签iframe 几种方式找出最适合这个浏览器的唤起方式。

  3. 如果下载了 App,就会走打开逻辑,如果没有下载则走下载逻辑。

  4. 如果已知不能唤起的浏览器引导其它浏览器打开

流程:

各个唤起方法对比

没有哪种方式是完美的,每种唤起方式都有它的优势跟劣势,只有将所有的唤起方法在不同浏览器上尝试过才能择优使用。

通用链接(universal link)

通用链接 universal link 是 IOS 9.0 版本以上才可以使用的新的特性。此特性类似于深层链接,并能够方便地通过打开一个 https 链接来直接启动您的客户端应用(手机有安装 App)。对比起以往所使用的 URL Scheme, 这种新特性在实现 web-app 的无缝链接时能够提供极佳的用户体验。

体验一下通用链接

我们可以来体验一下,左边的是通用链接 universal link方式,右边是 URL Scheme 方式。

左边可以直接将 App 打开,而右边需要确认是否打开才可以。

 

解决的bug在 ios 12.3 版本之后,Safari 会有一个 bug,就是 URL Scheme 跟 download App 先后一起使用的话,会同时唤起 App 然后再进入 App store,体验极差。使用 universal link 可以完美解决这个问题。

通用链接配置

必须在根目录下或者 域名/.well-known 下面。注意 域名不要使用业务域名添加配置文件,必须要跨域使用,否则会会不能唤起App,直接打开页面。

  • 访问链接 我们假设有三个 App,分别是 appaappbappc,我们通过访问 https://jump.test.com/appa/index.html 就可以唤起 appa 了。

  • 配置下载页 如果没有安装 appa 的话就会跳转到 一个 404 页面,因为我们这个页面 https://jump.test.com/appa/index.html 其实并不存在,所以我们需要将这个页面在 nginx 代理到一个下载页面。

  • 疑问 那么你可能有一个疑问,我如果唤起来 app 之后这个页面会不会跳转到下载页呢?答案是不会的,如果唤起了 app 就不会继续跳转页面了,只有在唤不起来的时候才会进入下载页。

apple-app-site-association 配置

{
  "applinks": {
    "apps": [],
    "details": [
      {
        "appID": "ABCD.com.aaa.appa",
        "paths": ["appa/*"]
      },
      {
        "appID": "ABCD.com.aaa.appb",
        "paths": ["appb/*"]
      },
      {
        "appID": "ABCD.com.aaa.appc",
        "paths": ["appc/*"]
      },
      {
        "appID": "ABCD.com.aaa.*",
        "paths": ["*"]
      }
    ]
  }
}

通用链接的优缺点:

  • 优点提供极佳的用户体验,使用起来也非常方便,解决了同时唤起 app 跟 app store 的问题

  • 缺点只有在 ios 9 版本之上才能使用,个别浏览器不支持有兼容性问题

URL Scheme 方式

用法

根据协议来判断是哪个 app 唤起。

location.href = "testa://test.aaa.com/home";

判断是否唤起 app

因为唤起 app 并没有回调让我们知道唤起了 app,所以我们只能通过监听页面是否隐藏来实现判断是否唤起 app 的逻辑。当然这种做法还是有很大缺陷的,比如低端机型唤起速度很慢,高端机型要快得多,所以 delay 的时间要设置一个可以接受的值,我们暂时定的是 2500。还有如果用户没有安装 app,也会有 2500 的延时才能安装。

const timer = setTimeout(() => {
  this.__download(options);
}, options.delay);

const visibilitychange = function() {
  const tag = document.hidden || document.webkitHidden;
  tag && clearTimeout(timer);
};

document.addEventListener("visibilitychange", visibilitychange, false);
document.addEventListener("webkitvisibilitychange", visibilitychange, false);
window.addEventListener(
  "pagehide",
  function() {
    clearTimeout(timer);
  },
  false
);

URL Scheme 的优缺点:

  • 优点 1. 兼容性好,大部分机型都能兼容 2. 使用方便

  • 缺点 1. 不能判断是否已经下载了 app,需要自己写逻辑判断 2. 用户体验不如通用链接的方式。

a 标签跟 iframe 方式

这两种方式都是通过创建元素,通过元素属性的特性来做的

a 标签

const a = document.createElement("a");
a.setAttribute("href", __SCHEMA_PATH);
a.click();

iframe

const ifr = document.createElement("iframe");
iframe.src = path;
ifr.src = nativeUrl;
ifr.style.cssText = "display:none;border:0;width:0;height:0;";
document.body.appendChild(ifr);
setTimeout(function() {
  document.body.removeChild(ifr);
}, 1000);

优缺点

  • 优点 在个别场景中如果发现唤起 app 有问题,可以尝试这两种。

  • 缺点 iframe 基本上已经被废弃了,a 标签测试结果只在个别机型中可用。

总结

  1. 微信 必须配置白名单,或者使用 universal link 也可以在 ios 唤起,表现形式有一点差别

const wxconfig = {
  debug: false,
  appId: conf.appId, // 公众号的 appid
  timestamp: conf.timestamp,
  nonceStr: conf.noncestr,
  signature: conf.signature,
  beta: true,
  jsApiList: ["launchApplication", "getInstallState"]
};
(window.wx && window.wx.config(wxconfig)) || (window.wxconfig = wxconfig);
  1. 百度浏览器必须用 universal link 方式才能在 IOS 唤起

  2. qq 在 ios 要使用 a 标签 的方式,即使通用链接的方式也不能将其唤起

if (isIOS) {
  const a = document.createElement("a");
  a.setAttribute("href", __SCHEMA_PATH);
  return a.click();
}
location.href = __SCHEMA_PATH;
  1. 微博,测试京东跟淘宝都可以调起,猜测是设置了白名单,目前没有找到好的办法,只能引导到其它浏览器中打开

测试结果

目前只有微博不能唤起,其它都可以正常唤起

唤起 App 应该是很常见的问题了。我们在开发 H5 的时候,有一些链路上的功能在 H5 不支持,只能去 App 才能完成。比如,下单、支付等功能。那么在更多的场景能够唤起 App 就显得很重要了。

几步走

  1. 判断浏览器,动态加载对应浏览器的下载逻辑

  2. 通过 universal linkURL Schemea 标签iframe 几种方式找出最适合这个浏览器的唤起方式。

  3. 如果下载了 App,就会走打开逻辑,如果没有下载则走下载逻辑。

  4. 如果已知不能唤起的浏览器引导其它浏览器打开

流程:

各个唤起方法对比

没有哪种方式是完美的,每种唤起方式都有它的优势跟劣势,只有将所有的唤起方法在不同浏览器上尝试过才能择优使用。

通用链接(universal link)

通用链接 universal link 是 IOS 9.0 版本以上才可以使用的新的特性。此特性类似于深层链接,并能够方便地通过打开一个 https 链接来直接启动您的客户端应用(手机有安装 App)。对比起以往所使用的 URL Scheme, 这种新特性在实现 web-app 的无缝链接时能够提供极佳的用户体验。

体验一下通用链接

我们可以来体验一下,左边的是通用链接 universal link方式,右边是 URL Scheme 方式。

左边可以直接将 App 打开,而右边需要确认是否打开才可以。

 

解决的bug在 ios 12.3 版本之后,Safari 会有一个 bug,就是 URL Scheme 跟 download App 先后一起使用的话,会同时唤起 App 然后再进入 App store,体验极差。使用 universal link 可以完美解决这个问题。

通用链接配置

必须在根目录下或者 域名/.well-known 下面。注意 域名不要使用业务域名添加配置文件,必须要跨域使用,否则会会不能唤起App,直接打开页面。

  • 访问链接 我们假设有三个 App,分别是 appaappbappc,我们通过访问 https://jump.test.com/appa/index.html 就可以唤起 appa 了。

  • 配置下载页 如果没有安装 appa 的话就会跳转到 一个 404 页面,因为我们这个页面 https://jump.test.com/appa/index.html 其实并不存在,所以我们需要将这个页面在 nginx 代理到一个下载页面。

  • 疑问 那么你可能有一个疑问,我如果唤起来 app 之后这个页面会不会跳转到下载页呢?答案是不会的,如果唤起了 app 就不会继续跳转页面了,只有在唤不起来的时候才会进入下载页。

apple-app-site-association 配置

{
  "applinks": {
    "apps": [],
    "details": [
      {
        "appID": "ABCD.com.aaa.appa",
        "paths": ["appa/*"]
      },
      {
        "appID": "ABCD.com.aaa.appb",
        "paths": ["appb/*"]
      },
      {
        "appID": "ABCD.com.aaa.appc",
        "paths": ["appc/*"]
      },
      {
        "appID": "ABCD.com.aaa.*",
        "paths": ["*"]
      }
    ]
  }
}

通用链接的优缺点:

  • 优点提供极佳的用户体验,使用起来也非常方便,解决了同时唤起 app 跟 app store 的问题

  • 缺点只有在 ios 9 版本之上才能使用,个别浏览器不支持有兼容性问题

URL Scheme 方式

用法

根据协议来判断是哪个 app 唤起。

location.href = "testa://test.aaa.com/home";

判断是否唤起 app

因为唤起 app 并没有回调让我们知道唤起了 app,所以我们只能通过监听页面是否隐藏来实现判断是否唤起 app 的逻辑。当然这种做法还是有很大缺陷的,比如低端机型唤起速度很慢,高端机型要快得多,所以 delay 的时间要设置一个可以接受的值,我们暂时定的是 2500。还有如果用户没有安装 app,也会有 2500 的延时才能安装。

const timer = setTimeout(() => {
  this.__download(options);
}, options.delay);

const visibilitychange = function() {
  const tag = document.hidden || document.webkitHidden;
  tag && clearTimeout(timer);
};

document.addEventListener("visibilitychange", visibilitychange, false);
document.addEventListener("webkitvisibilitychange", visibilitychange, false);
window.addEventListener(
  "pagehide",
  function() {
    clearTimeout(timer);
  },
  false
);

URL Scheme 的优缺点:

  • 优点 1. 兼容性好,大部分机型都能兼容 2. 使用方便

  • 缺点 1. 不能判断是否已经下载了 app,需要自己写逻辑判断 2. 用户体验不如通用链接的方式。

a 标签跟 iframe 方式

这两种方式都是通过创建元素,通过元素属性的特性来做的

a 标签

const a = document.createElement("a");
a.setAttribute("href", __SCHEMA_PATH);
a.click();

iframe

const ifr = document.createElement("iframe");
iframe.src = path;
ifr.src = nativeUrl;
ifr.style.cssText = "display:none;border:0;width:0;height:0;";
document.body.appendChild(ifr);
setTimeout(function() {
  document.body.removeChild(ifr);
}, 1000);

优缺点

  • 优点 在个别场景中如果发现唤起 app 有问题,可以尝试这两种。

  • 缺点 iframe 基本上已经被废弃了,a 标签测试结果只在个别机型中可用。

总结

  1. 微信 必须配置白名单,或者使用 universal link 也可以在 ios 唤起,表现形式有一点差别

const wxconfig = {
  debug: false,
  appId: conf.appId, // 公众号的 appid
  timestamp: conf.timestamp,
  nonceStr: conf.noncestr,
  signature: conf.signature,
  beta: true,
  jsApiList: ["launchApplication", "getInstallState"]
};
(window.wx && window.wx.config(wxconfig)) || (window.wxconfig = wxconfig);
  1. 百度浏览器必须用 universal link 方式才能在 IOS 唤起

  2. qq 在 ios 要使用 a 标签 的方式,即使通用链接的方式也不能将其唤起

if (isIOS) {
  const a = document.createElement("a");
  a.setAttribute("href", __SCHEMA_PATH);
  return a.click();
}
location.href = __SCHEMA_PATH;
  1. 微博,测试京东跟淘宝都可以调起,猜测是设置了白名单,目前没有找到好的办法,只能引导到其它浏览器中打开

测试结果

目前只有微博不能唤起,其它都可以正常唤起

场景 ios 安卓 是否需要配置白名单
微信 ✔️ ✔️
qq ✔️ ✔️
chrome ✔️ ✔️
小米 browser ✔️ ✔️
uc ✔️ ✔️
qq browser ✔️ ✔️
360 browser ✔️ ✔️
猎豹 ✔️ ✔️
sogou ✔️ ✔️
baidu browser ✔️ ✔️
safari ✔️ ✔️
微博 X X
     
       
       
       
       
       
       
       
       
       
       
       
       

本文转载自:https://mp.weixin.qq.com/s?__biz=MzAwNDcyNjI3OA==&mid=2650843412&idx=1&sn=5e51b1708c472cc52b0687b...

Jack088
粉丝 45
博文 639
码字总数 100525
作品 0
扬州
程序员
私信 提问
加载中

评论(0)

js在微信、微博、QQ、Safari唤起App的解决方案

背景 最近在做微信、QQ、微博中使用js唤起App,之前也做过类似的功能,不过比较粗糙,考虑的情况不太全,而且那已经是很久之前的事情了,很多技术都已过时,现在有体验更好,功能更加完善的唤...

发布于
2018/08/03
0
0
满足你各种姿势的最美Android开源日历

日历控件定制是移动开发平台上比较常见的而且比较难的需求,一般会遇到以下问题: 性能差,加载速度慢,原因是各种基于GridView或RecyclerView等ViewGroup实现的日历,控件数太多,假设一个月...

黄海彬
2018/10/30
0
0
iOS系统关于URL Schemes的漏洞探究

iOS系统关于URL Schemes的漏洞探究 一、何为URL Schemes 我想这个东西的设计的目的是为了方便App之间的相互调用与通讯,你可以在自己的App中使用OpenURL方法来唤起其他的App。比如微信的URL...

珲少
2015/06/02
478
0
被后台杀死后,Android应用如何重新走闪屏逻辑

Android应用运行在后台的时候,经常被系统的LowMemoryKiller杀掉,当用户再次点击icon或者从最近的任务列表启动的时候,进程会被重建,并且恢复被杀之前的现场。什么意思呢?假如APP在被杀之...

看书的小蜗牛
2018/01/05
0
0
编写稳定的基于Cocos2d-x的TCP连接类,集成LUA

1、创建一个Cocos-lua项目,集成TCP创建连接、发送TCP数据包、接收数据包、自动检测与服务器的心跳数据包,能自动重连。 2、封装的TCP连接类,能够在LUA中创建连接、发送数据、接收数据、网络...

李平
2018/08/18
0
0

没有更多内容

加载失败,请刷新页面

加载更多

金三银四——离大厂offer你就只差一张路线图

很多人做Java开发4,5年后,都会感觉自己遇到瓶颈。什么都会又什么都不会,如何改变困境,为什么很多人写了7,8年还是一个码农,工作中太多被动是因为不懂底层原理。公司的工作节奏又比较快,...

Java天天
30分钟前
32
0
用Java递归删除目录

有没有办法用Java递归删除整个目录? 在正常情况下,可以删除一个空目录。 但是,要删除带有目录的整个目录,就不再那么简单了。 如何用Java删除包含目录的整个目录? #1楼 具有堆栈且没有递...

javail
31分钟前
95
0
在hbuilderx中vue-cli脚手架配置router文件夹

配置router文件 新建一个文件夹router,再在新建的router文件夹里新建一个index.js文件 index.js import Vue from 'vue' import Router from 'vue-router' import Home from '../components......

软件开发小白
39分钟前
57
0
高并发软件层面解决思路-从前端到后端

1、页面缓存、前后端分离、CDN、静态页面(减少后台接口请求,需要CMS系统支持)、代码等优化(百度关键词“雅虎前端优化”) 2、nginx或其它配置合理的负载均衡策略,按主机性能设置合理的权...

无名氏的程序员
54分钟前
69
0
Maven项目使用打包时使用本地jar包库

在使用maven管理项目时,有时候我们可能会使用一些第三方的jar包依赖库,但是这些jar包依赖库又没有在共有的maven仓库。 通常只能下来放到本项目的lib目录下。但是我们打包时如果不做处理,那...

上官胡闹
今天
39
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部