前端-Notes-｜-H5-打开-App-并跳转指定页AndroidiOS最-low-实现

还是技术的世界简略，除了 0 就是 1。

之前接到一个工作，大略细分如下：

H5 调起 App（Android/iOS）并关上对应页面；
如果利用未装置，则提醒用户进行下载；
微信关上该链接分享好友展现卡片款式，不应用微信 SDK 实现；
通过调用微信 SDK 实现分享好友卡片模式；

忐忑的心田，又要开始前端之旅，咋整呢？

干呗。

集体工作次要偏差于 Android，所以此篇内容次要以 Android 为例，毕竟鸡老大也已经说过，不对没波及的畛域做太多评估。

之前我的项目中已经应用 scheme 来关上过指定的页面，而此时，同样打算以 scheme 动手，对于一些离奇的玩意，私下有空再去钻研咯。

因为我的项目特殊性，这里临时不搁置动静效果图了。

要害的点在于挪动端以及前端协定对应的协定名称以及 host 即可。

例如咱们当初协定如下：

com.test.app://topic?id=196&code=50c20872

当然，协定名轻易，不肯定非要是域名，比如说，我指定个 schemeName 也能够。

而对于 Android 的小伙伴只须要在指定关上的页反对此 scheme 即可：

<activity
    android:name=".ui.activity.module.topic.TopicActivity"
    android:exported="true"
    android:launchMode="standard" 
    android:screenOrientation="portrait"> 

    <intent-filter>
        <action android:name="android.intent.action.VIEW" />

        <category android:name="android.intent.category.DEFAULT" />
        <category android:name="android.intent.category.BROWSABLE" />

        <data
            android:host="topic"
            android:scheme="com.test.app" />
    </intent-filter>
</activity>

而获取 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 而已：

<script type="application/javascript">
    // app 下载器
    var appDownload;
    // 通用协定地址
    var commSchemeUrl = "com.test.app://topic?id=196&code=50c20872";
    // iOS 下载地址
    var iOSDownloadUrl = "https://itunes.apple.com/cn/app/id 你的 iOS App ID";
    // Android 下载地址
    var androidDownloadUrl = "Android 下载地址"

    function openApp() {
        let u = navigator.userAgent;
        let isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; // 判断是否是 android 终端
        let isIOS = !!u.match(/\(i[^;]+;(U;)? CPU.+Mac OS X/); // 判断是否是 iOS 终端
        // 首次尝试关上 App 并跳转
        if (isAndroid || isIOS) {window.location.href = commSchemeUrl;}
        // 3ms 后没关上，间接跳转对应下载页面
        appDownload = setTimeout(function() {if (isAndroid) {window.location.href = androidDownloadUrl;} else if (isIOS) {window.location.href = iOSDownloadUrl;}
        }, 3000);
    }

    document.addEventListener('visibilitychange webkitvisibilitychange', function() {
        // 如果页面暗藏，认为关上 app，革除下载工作
        if (document.hidden || document.webkitHidden) {clearTimeout(appDownload)
        }
    })
    window.addEventListener('pagehide', function() {clearTimeout(appDownload)
    })
</script>

这里有个好玩的，就是怎么判断以后用户手机未装置以后利用呢？

求教了一番，感觉比拟靠谱的答复是：

增加页面对应的监听以及 3 秒后的一个定时下载工作，如果以后页面暗藏则认定为失常关上指标 App，清理定时工作，反之则跳转下载页。

对于一个小 Android 而言，贼拜服大神的思路，特意记录下。

坑坑巴巴写出了这个小网页，本认为开开心心提交工作开始下个工作，不料，忽然接到该 H5 在微信中关上并分享好友须要显示卡片款式，而且还不能应用微信 SDK，我的天。

先附上一个现有 H5 在微信中关上并分享微信好友的展现款式：

喏，title 是一串地址，内容也是，图片别提了。这样子必定不行那，最起码 title 得变变吧。

鸡老大说过，翻翻其它大厂官网，看看人是怎么搞得。

哎，太菜了，没看明确，最初间接从微信公众号截取了一部分，如下：

<head>
    <meta charset="utf-8">
    <!-- 次要是强制让文档的宽度与设施宽度放弃 1:1，最大宽度 1.0，禁止屏幕缩放。-->
    <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
    <!-- 这个也是 iPhone 公有标签，容许全屏浏览。-->
    <meta content="yes" name="apple-mobile-web-app-capable">
    <!-- iPhone 的公有标签，iPhone 顶端状态条的款式。-->
    <meta content="black" name="apple-mobile-web-app-status-bar-style">
    <!-- 禁止数字自动识别为电话号码，这个比拟有用，因为一串数字在 iPhone 上会显示成蓝色，款式加成别的色彩也是不失效的。-->
    <meta content="telephone=no" name="format-detection">
    <!-- 禁止 email 辨认 -->
    <meta content="email=no" name="format-detection">

    <link rel="icon" href="https://x.png" type="image/x-icon" />

    <meta name="description" content="测试测试" />
    <meta name="author" content="HLQ" />

    <meta property="og:title" content="嗨，你的好友为您举荐了一篇不错的专题～" />
    <meta property="og:url" content="http://mp.weixin.qq.com/s?__biz=MzU2NTI4Mjc0Ng==&amp;mid=2247484817&amp;idx=1&amp;sn=f4a8758d77a9e308ac4126e30c3b41d1&amp;chksm=fcbf5744cbc8de528a75b04ae9919bc1345800601cf4201af9ec1333e118593b75eed10fdf2a#rd" />
    <meta property="og:image" content="http://mmbiz.qpic.cn/mmbiz_jpg/IZdjxwpBrBY8RsXe4Huyuibl8k3FEad3MqbdbdqJDtXM894R5N1xgHy5ZibuPYYP8BOAxE5hhYNOEhuZMcwx3Y0A/0?wx_fmt=jpeg" />
    <meta property="og:description" content="" />
    <meta property="og:site_name" content="" />
    <meta property="og:type" content="article" />
    <meta property="og:article:author" content="" />

    <meta property="twitter:card" content="summary" />
    <meta property="twitter:image" content="http://mmbiz.qpic.cn/mmbiz_jpg/IZdjxwpBrBY8RsXe4Huyuibl8k3FEad3MqbdbdqJDtXM894R5N1xgHy5ZibuPYYP8BOAxE5hhYNOEhuZMcwx3Y0A/0?wx_fmt=jpeg" />
    <meta property="twitter:title" content="嗨，你的好友为您举荐了一篇不错的专题～" />
    <meta property="twitter:creator" content="" />
    <meta property="twitter:site" content="" />
    <meta property="twitter:description" content="" />

    <title> 嗨，你的好友为您举荐了一篇不错的专题～</title>
</head>

测试感觉还是间接设置 title，分享微信好友卡片 title 主动匹配了。

最初附上测试后果：

图一为失常在微信中关上并分享好友款式；
图二为在 Safari 中关上并分享好友款式。

期间也尝试过网上说的一些计划，比方设置 300×300 像素 img，后果还是不尽人意。

例如上面这样：

<div style="display: none;">
    <img src="http://adv-share.oss-cn-shanghai.aliyuncs.com/0.jpg" alt="">
</div>

图片的的确确 300×300 像素了，难堪的是，没卵用。

这块前期移交别的小伙伴负责了，这里简略记录下，不便而后分分钟搞定～

（小伙伴记得以官网为主哈）

这里疏忽微信后盾配置域名以及接口内容，未参加，不做未实际的记录。

要害代码如下：

<!-- 这个须要本人下载个 js 文件 -->
<script src="/jquery.min.js"></script>
<script src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>

<script type="application/javascript">
    $.ajax({
        async: true, // 这里参数 true 和 false 在微信中关上会有不同成果，理论用的时候用 false, 用 true 时候测试会有提示性内容。url: '申请域名',
        type: "POST",
        dataType: "json", // 返回的数据类型，设置为 JSONP 形式       
        data: {url: encodeURIComponent(window.location.href.split("#")[0])
        },
        success: function(response, status, xhr) {
            wx.config({
                debug: false, // 开启调试模式, 调用的所有 api 的返回值会在客户端 alert 进去，若要查看传入的参数，能够 在 pc 端关上，参数信息会通过 log 打出，仅在 pc 端时才会打印。appId: response.appId, // 必填，公众号的惟一标识
                timestamp: response.timestamp, // 必填，生成签名的工夫戳
                nonceStr: response.nonceStr, // 必填，生成签名的随机串
                signature: response.signature, // 必填，签名
                jsApiList: [ // 必填，须要应用的 JS 接口列表
                    '须要应用的 JS 接口列表',
                ], // 须要检测的 JS 接口列表，所有 JS 接口列表见附录 2,
            });
            //ready
            wx.ready(function() { // 需在用户可能点击分享按钮前就先调用
                shareData = {
                    title: "测试题目", // 分享题目
                    desc: "测试形容", // 分享形容
                    link: window.location.href, // 分享链接
                    imgUrl: "http://fa-res.oss-cn-shanghai.aliyuncs.com/images/02aKfbKPkdEwZyBr6zJbNXEjK3i3y3MfG.jpg", // 分享图标
                    success: function() {// 设置胜利}
                };
                // 1.4.0 新接口 (只调用这个接口在安卓下是有效的)
                wx.updateAppMessageShareData(shareData);
                wx.updateTimelineShareData(shareData);
            });
        }
    });
</script>

哎，怎么说呢，扎心。

毕竟鸡老大也说过，多去深挖，不要停留外表。正好好好看看这块内容，查漏补缺。

提到 scheme，不得不提 intent-filter，这里就拿之前 Android 配置为例：

<intent-filter>
    <action android:name="android.intent.action.VIEW" />

    <category android:name="android.intent.category.DEFAULT" />
    <category android:name="android.intent.category.BROWSABLE" />

    <data
        android:host="topic"
        android:scheme="com.test.app" />
</intent-filter>

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。

啊哈，拖了好久好久，终于欠缺啦～

端午高兴呀～

创立指向利用内容的深层链接
Google intent-filter
Intent#ACTION_VIEW
Google data
Intent 和 Intent 过滤器
iOS | 获取 App Store 中 App 下载地址
H5 唤醒 APP 小记
iOS H5 关上 App (通用链接)

前端-Notes-｜-H5-打开-App-并跳转指定页AndroidiOS最-low-实现

前言

一、H5 调起 App（Android/iOS）并关上对应页面

二、如果利用未装置，则提醒用户进行下载

三、微信关上该链接分享好友展现卡片款式，不应用微信 SDK 实现

四、通过调用微信 SDK 实现分享好友卡片模式

番外篇 – 对于 scheme 的简略理解

Thanks