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

36次阅读

共计 7681 个字符,预计需要花费 20 分钟才能阅读完成。

还是技术的世界简略,除了 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 即可:

<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 而言,贼拜服大神的思路,特意记录下。

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

坑坑巴巴写出了这个小网页,本认为开开心心提交工作开始下个工作,不料,忽然接到该 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 像素了,难堪的是,没卵用。

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

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

(小伙伴记得以官网为主哈)

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

要害代码如下:

<!-- 这个须要本人下载个 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 的简略理解

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

提到 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。

啊哈,拖了好久好久,终于欠缺啦~

端午高兴呀~

Thanks

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

正文完
 0