前端 Notes ｜ H5 打开 App 并跳转指定页（Android-iOS）最 low 实现
时间：2023-04-05 13:29:00
HTML5
前端笔记｜H5打开app跳转到指定页面（Android/iOS）细分如下：H5调出App（Android/iOS）并打开对应页面；如果未安装该应用，则提示用户下载；微信打开链接分享给好友显示卡片样式，不使用微信SDK实现；通过调用微信SDK实现分享好友名片的形式；心里着急，想重新开始前端之旅，怎么办？做吧。个人工作主要偏向Android，所以本文主要以Android为例。毕竟鸡老板曾经说过，不涉及的地方不要过多评论。在之前的项目中，我是使用scheme打开指定页面的。这个时候，我也打算从scheme入手。对于一些新奇的东西，有空我会私下研究一下。由于项目的特殊性，动态效果图暂时不放在这里。1、H5调出App（Android/iOS），打开对应页面。关键是移动端和前端协议对应的协议名和host。比如我们现在的协议是这样的：com.test.app://topic?id=196&code=50c20872当然，协议名是任意的，不一定是域名。例如，我可以指定一个schemeName。安卓的朋友，只需要在指定的打开页面支持这个方案即可：:screenOrientation="portrait">获取H5传参也很简单，如下：getQueryParameter("code")}最后H5只需要跳转到这个url://通用协议地址varcommSchemeUrl="com.test.app://topic?id=196&code=50c20872";window.location。href=commSchemeUrl;2.如果应用没有安装，提示用户输入下载的最佳情况是所有用户都安装了我们开发的应用程序。可惜不是微信，不得不考虑一个问题。如果目标用户没有安装应用怎么办？能否间接提高产品下载安装率？想了想还是觉得不下载就直接跳到下载页面了（这是废话??），毕竟点击H5的目的无非是为了使用应用。改造H5其实就是提取一个JS：这里有个有意思的地方，如何判断当前用户手机没有安装当前应用呢？咨询了一会，比较靠谱的答案是：加上页面对应的监听和3秒后的定时下载任务。如果当前页面被隐藏，则视为目标应用正常打开，定时任务将被清理。否则会跳转到下载页面。对于一个小安卓，贼佩服大神的思路，特意记录下来。3.微信打开此链接分享给你的朋友，展示名片风采。你不使用微信SDK来实现它。我写了这个小网页。我以为我会很高兴地提交任务并开始下一个任务。没想到突然收到了H5，在微信里打开。而且分享给好友需要显示卡片样式，而且我们还不能用微信SDK，我的天。先附上一个已有的微信打开分享给微信好友的H5展示样式：这里，标题是一串地址，内容也是，图片更不用说了。肯定不是这样的，至少标题要改一下。鸡老板说，看看其他大厂的官网，看看人家是怎么做的。哎，说的太好了，没看懂，最后直接从微信上截取了一部分公众号，如下：
<metaproperty="og:type"content="article"/>朋友给你推荐了一个好话题~"/>嘿，你的朋友给你推荐了一个好题目~感觉直接给测试设置标题，分享微信好友卡片。自动匹配标题最后附上测试结果：图1为微信中正常打开分享样式；图2是Safari中的打开分享样式。期间也尝试过网上提到的一些解决方案，比如设置一个300x300像素的img，但结果还是不尽如人意。例如： 图片确实是300x300像素，尴尬，没用。4.调用微信SDK实现分享好友名片的形式。这部分后期会交给其他小伙伴。这里简单记录一下，方便，分分钟搞定。界面内容，无参与，无未实践记录。关键代码如下：嘿嘿，怎么说呢，暖心的番外文——对scheme的简单理解。毕竟鸡老板也说过，深挖，不要停留在表面。好好看看这段内容，查漏补缺就好了。说到scheme，就不得不提intent-filter。这里我们以前面的Android配置为例：
intent-filter说明(来自官方文档）：指定Activity、服务或广播接收器可以响应的Intent类型。意图过滤器声明其父组件的功能活动或服务可以执行哪些操作，以及其接收器可以处理哪些类型的广播。它允许组件接收广告类型的Intent，同时过滤掉对组件无意义的Intent。大多数过滤器由其操作、类别和数据子元素描述。大白话就是按照你指定的一定规则进行一定的操作。例如本例中支持通过打开URL（例如：com.test.app://topic?id=196&code=50c20872）打开该App对应的指定页面，并进行相应的操作。在intent-filter中，包含以下三个属性：android:icon：表示父Activity、服务或广播接收器的图标，当组件以具有过滤器描述的功能的形式呈现给用户时显示.默认为父组件的icon属性设置的图标。如果父组件没有指定图标，则默认为application元素设置的图标。android:label：父组件的用户可读标签。当以执行过滤器描述的方式向用户呈现组件时，将使用此标签（而不是父组件设置的标签）。默认是父组件设置的标签。如果父组件没有指定标签，则默认为应用元素的label属性设置的标签。android:priority：就filter描述的类型的处理意图而言，应该为父组件指定的优先级。此属性对活动和广播接收器都有意义：它描述了活动对匹配过滤器的意图的响应，相对于也可以响应该意图的其他活动。当一个Intent可以由多个具有不同优先级的Activity处理时，Android只会将具有更高优先级值的Activity视为Intent的潜在目标。它控制广播接收器以什么顺序执行以接收广播消息。优先级值越高，调用顺序越高。（此顺序仅适用于同步消息；异步消息将被忽略。）注意??：该值必须是整数，例如“100”。数字越大，优先级越高。默认值为0。过滤器必须包含以下属性：action：在name属性中，声明接受的Intent操作。例如，在此示例中，我们隐式启动了目标Activity。以及以下可选参数：category：在name属性中，声明接受的Intent类别。比如本例中，我们设置默认支持浏览器打开页面。数据：声明接受的数据类型，使用一个或多个属性指定数据URI（方案、主机、端口、路径）和MIME类型的各个方面。例如这里我们声明open规则。URI的每个部分都是一个单独的属性：方案、主机、端口和路径。例如content://com.example.project:200/folder。在这个URI中，scheme是content，host是com.example.project，port是200，path是folder。啊哈，拖了好久好久，终于完美了~端午节快乐~感谢创建app内容的深度链接Googleintent-filterIntent#ACTION_VIEWGoogledataIntent和IntentfilteriOS｜在AppStore获取App下载地址H5WakeupAPPNotesiOSH5OpenApp(UniversalLink)
