前端 Notes ｜ H5 打开 App 并跳转指定页（Android/iOS）最 low 实现
还是技术的世界简单，除了 0 就是 1。
前言
之前接到一个任务，大概细分如下：
- H5 调起 App（Android/iOS） 并打开对应页面；
- 如果应用未安装，则提示用户进行下载；
- 微信打开该链接分享好友展示卡片样式，不使用微信 SDK 实现；
- 通过调用微信 SDK 实现分享好友卡片形式；
忐忑的内心，又要开始前端之旅，咋整呢？
干呗。
个人工作主要偏向于 Android，所以此篇内容主要以 Android 为例，毕竟鸡老大也曾经说过，不对没涉及的领域做太多评价。
之前项目中曾经使用 scheme 来打开过指定的页面，而此时，同样打算以 scheme 入手，对于一些新奇的玩意，私下有空再去研究咯。
由于项目特殊性，这里暂时不放置动态效果图了。
一、H5 调起 App（Android/iOS） 并打开对应页面
关键的点在于移动端以及前端协定对应的协议名称以及 host 即可。
例如我们现在协定如下：
- com.test.app://topic?id=196&code=50c20872
当然，协议名随便，不一定非要是域名，比如说，我指定个 schemeName 也可以。
而对于 Android 的小伙伴只需要在指定打开的页支持此 scheme 即可：
而获取 H5 传递的参数也是贼 easy，如下：
if (Intent.ACTION_VIEW == intent.action && intent.data != null) { mAdvisoryId = intent.data.getQueryParameter("id").toInt() mPrivateCode = intent.data.getQueryParameter("code")}最后针对 H5 只需要跳转此 url 即可：
// 通用协议地址var commSchemeUrl = "com.test.app://topic?id=196&code=50c20872";window.location.href = commSchemeUrl;二、如果应用未安装，则提示用户进行下载
最好的情况就是所有用户都安装咱开发的应用，可惜啊，又不是微信。
所以不得不考虑一个问题，如果目标用户未安装该应用，又该如何？能否间接提升产品下载安装率？
思来想去，还是觉得如果没下载直接跳转下载页 （这就是一句废话），毕竟你点击 H5 的目的也无非是想使用该应用罢了。
改造下 H5，其实就是抽离出个 JS 而已：
这里有个好玩的，就是怎么判断当前用户手机未安装当前应用呢？
请教了一番，感觉比较靠谱的回答是：
- 添加页面对应的监听以及 3 秒后的一个定时下载任务，如果当前页面隐藏则认定为正常打开目标 App，清理定时任务，反之则跳转下载页。
对于一个小 Android 而言，贼佩服大神的思路，特意记录下。
三、微信打开该链接分享好友展示卡片样式，不使用微信 SDK 实现
坑坑巴巴写出了这个小网页，本以为开开心心提交任务开始下个任务，不料，突然接到该 H5 在微信中打开并分享好友需要显示卡片样式，而且还不能使用微信 SDK，我的天。
先附上一个现有 H5 在微信中打开并分享微信好友的展示样式：
喏，title 是一串地址，内容也是，图片别提了。这样子肯定不行那，最起码 title 得变变吧。
鸡老大说过，翻翻其它大厂官网，看看人是怎么搞得。
哎，太菜了，没看明白，最后直接从微信公众号截取了一部分，如下：
嗨，你的好友为您推荐了一篇不错的专题～ 测试感觉还是直接设置 title，分享微信好友卡片 title 自动匹配了。
最后附上测试结果：
- 图一为正常在微信中打开并分享好友样式；
- 图二为在 Safari 中打开并分享好友样式。
期间也尝试过网上说的一些方案，比如设置 300x300 像素 img，结果还是不尽人意。
例如下面这样：
图片的的确确 300x300 像素了，尴尬的是，没卵用。
四、通过调用微信 SDK 实现分享好友卡片形式
这块后期移交别的小伙伴负责了，这里简单记录下，方便然后分分钟搞定～
（小伙伴记得以官网为主哈）
这里忽略微信后台配置域名以及接口内容，未参与，不做未实践的记录。
关键代码如下：
哎，怎么说呢，扎心。
番外篇 - 关于 scheme 的简单了解
毕竟鸡老大也说过，多去深挖，不要停留表面。正好好好看看这块内容，查漏补缺。
提到 scheme，不得不提 intent-filter，这里就拿之前 Android 配置为例：
intent-filter 解释 （摘自官方文档）：
指定 Activity、服务或广播接收器可以响应的 Intent 类型。Intent 过滤器声明其父组件的功能 Activity 或服务可执行哪些操作，以及接收器可处理哪些类型的广播。它让组件可以接收所通告类型的 Intent，同时过滤掉对组件没有意义的 Intent。过滤器的大部分内容由它的 action、category 和 data 子元素进行描述说明。
大白话意思就是，根据你指定的某种规则去执行特定的某些操作。
例如，此例子中，支持外部通过打开 URL（例如：com.test.app://topic?id=196&code=50c20872） 的形式去打开此 App 对应指定页面并执行对应操作一样。
在 intent-filter 中，包含如下三个属性：
- android:icon： 表示父 Activity、服务或广播接收器的图标，在将该组件以具备过滤器所描述功能的形式呈现给用户时显示。默认值为父组件的 icon 属性设置的图标。如果父组件未指定图标，则默认值为 application 元素设置的图标。
- android:label： 父组件的用户可读标签。将相应组件以具备过滤器所描述功能的形式呈现给用户时，将使用此标签（而不是父组件设置的标签）。 默认值为父组件设置的标签。如果父组件未指定标签，则默认值为 application 元素的 label 属性设置的标签。
-
android:priority： 就处理过滤器所描述类型的 intent 而言，应该为父组件指定的优先级。此属性对 Activity 和广播接收器都有意义：
- 它说明了某个 Activity 对与过滤器匹配的 Intent 的响应能力，这是相对于也可以响应该 Intent 的其他 Activity 的响应能力。当 Intent 可由优先级不同的多个 Activity 处理时，Android 只会将优先级值较高的 Activity 视为 Intent 的潜在目标。
- 它控制按什么顺序执行广播接收器以接收广播消息。优先级值越高，调用顺序越靠前。（该顺序仅适用于同步消息；对于异步消息，系统会忽略该顺序。）
- 注意⚠️：值必须是一个整数，如“100”。数值越高，优先级也就越高。默认值为 0
在过滤器中必须包含以下属性：
- action： 在 name 属性中，声明接受的 Intent 操作。例如这个例子中我们通过隐式启动了我们目标 Activity。
以及如下可选参数：
- category： 在 name 属性中，声明接受的 Intent 类别。例如这个例子中我们设置了默认支持浏览器打开该页面。
-
data： 使用一个或多个指定数据 URI（scheme、host、port、path）各个方面和 MIME 类型的属性，声明接受的数据类型。例如这里我们声明了打开的规则。
- URI 的每个部分都是一个单独的属性：scheme、host、port 和 path。例如 content://com.example.project:200/folder。在此 URI 中，scheme 是 content，host 是 com.example.project，端口是 200，路径是 folder。
啊哈，拖了好久好久，终于完善啦～
端午快乐呀～
Thanks
- 创建指向应用内容的深层链接
- Google intent-filter
- Intent#ACTION_VIEW
- Google data
- Intent 和 Intent 过滤器
- iOS ｜ 获取 App Store 中 App 下载地址
- H5 唤醒 APP 小记
- iOS H5 打开 App (通用链接)
更多相关文章
- API 25 (Android 7.1.1 API) widget.ProgressBar——属性分析
- android通过反射来获取系统属性SystemProperties
- android:numeric="integer"属性
- Android ---android:autoLink属性
- android 时钟组件AnalogClock与Clock
- android之组件4
- android组件
- 【转】android常用组件