关于h5唤起app调研和app实现

****补充：后来发现这个博客不错，h5唤起app指南参考地址：
https://juejin.cn/post/6844903664155525127?searchId=2024022110163306FB28F1FD13CAD4D0CC#heading-14
https://suanmei.github.io/2018/08/23/h5_call_app/
https://www.npmjs.com/package/callapp-lib

唤醒APP方案：

微信环境ISO10.3以上、微信JS版本7.0.12及以上、Android 5.0及以上通过微信开放标签打开app
非微信环境通过scheme url 在游览器打开（使用npm包callapp-lib）
ISO9以上通过通用链接
微信小程序禁止打开app（https://developers.weixin.qq.com/community/develop/doc/0002a026728e785b711e42e3b51400?jumpto=comment&commentid=0006c44214c720eb731ef16df510）

坑位：自动唤醒和手动唤醒有个坑，就是自动唤醒在本地是无法正常跳转的，部署到服务器，通过域名就能正常跳转

一、场景
1.1 场景1：
在 h5 页面上，不管用户是否安装过该app，都直接跳转到应用市场，让用户从应用市场上打开app。

思路：
这种场景处理比较简单，直接判断判断是android端还是ios端，然后在点击按钮上赋值对应终端的应用市场下载链接就可以了，在微信上打开h5页面时也不用另外处理。跳转之前，系统会默认弹出对话框问是否跳转。

优点：
在微信上打开h5页面时也不用另外处理

具体实现：

<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title></title><style type="text/css">body {padding-top: 30px;}.open-app {margin: 30px;border-radius: 5px;padding: 10px 20px;border: 1px solid #ccc;}</style><script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script></head><body><a class="open-app">click me to store</a><script type="text/javascript">var iosLinkUrl = 'http://apps.apple.com/cn/app/id387682726'; // 淘宝 app store 下载地址var androidLinkurl ='https://a.app.qq.com/o/simple.jsp?pkgname=com.lucky.luckyclient'; //(找不到淘宝应用宝地址，这里以lucky coffee为例)var u = navigator.userAgent,isAndroid,isIOS;window.onload = function () {init();};function init() {isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //android终端isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端var link = isIOS ? iosLinkUrl : androidLinkurl;$('a').attr('href', link);}</script></body>
</html>

1.2 场景2：
在 h5 页面上，用户点击打开app按钮，在用户手机上已经安装了App时，打开app，否则就引导用户前往应用市场。这样就方便了用户，而且在业务需要情况下，可以跳转到app指定页面和传参。

思路：
在 h5 页面上唤醒app ，需要用到 scheme协议（由app端小伙伴提供，关于什么是scheme文末补充），但是在微信浏览器里scheme不起作用，有没有印象有时在微信上打开的一些需要跳转到app的操作时，会提示在浏览器上打开，就是这个原因。
所以需要先判断是否为微信浏览器，是微信浏览器的话，提示到浏览器打开，不是的话，再判断是Android端还是iOS端，然后做相应的处理。

案例：
以打开淘宝为例：

<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title></title><style type="text/css">body {padding-top: 30px;}.open-app {margin: 30px;border-radius: 5px;padding: 10px 20px;border: 1px solid #ccc;}</style><script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script></head><body><a class="open-app">click me to app</a><script type="text/javascript">$('a').click(function () {var u = navigator.userAgent;var isWeixin = u.toLowerCase().indexOf('micromessenger') !== -1; // 微信内var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //android终端var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端// 微信内if (isWeixin) {alert('请在浏览器上打开');} else {//android端if (isAndroid) {//安卓app的scheme协议window.location.href = 'taobao://';setTimeout(function () {let hidden =window.document.hidden ||window.document.mozHidden ||window.document.msHidden ||window.document.webkitHidden;if (typeof hidden == 'undefined' || hidden == false) {//应用宝下载地址 (emmm 找不到淘宝应用宝的地址，这里放的是 lucky coffee 地址)window.location.href ='https://a.app.qq.com/o/simple.jsp?pkgname=com.lucky.luckyclient';}}, 2000);}//ios端if (isIOS) {//ios的scheme协议window.location.href = 'taobao://';setTimeout(function () {let hidden =window.document.hidden ||window.document.mozHidden ||window.document.msHidden ||window.document.webkitHidden;if (typeof hidden == 'undefined' || hidden == false) {//App store下载地址window.location.href ='http://itunes.apple.com/app/id387682726';}}, 2000);}}});</script></body>
</html>

APP 如果被唤起的话，页面就会进入后台运行，会触发页面的 visibilitychange 事件。如果触发了，则表明页面被成功唤起，及时调用 clearTimeout ，清除页面未隐藏时的失败函数（callback）回调。
当然这个事件是有兼容性的，具体的代码实现时做了事件是否需要添加前缀（比如 -webkit- ）的校验。如果都不兼容，我们将使用 pagehide 事件来做兜底处理。
作者：_拾邑
链接：https://juejin.cn/post/6844903664155525127

优点：
在业务需要情况下，可以跳转到app指定页面和传参。

二、URL Scheme方式唤起Activity或App
URL Scheme是一种页面内跳转协议，通过这个协议可以比较方便的跳转到app某一个页面。
scheme应用场景
scheme 的应用场景很多，比如我们熟悉的:
*通过小程序，利用Scheme协议打开原生app;
*H5页面点击锚点，根据锚点具体跳转路径APP端跳转具体的页面;
*APP端收到服务器端下发的PUSH通知栏消息，根据消息的点击跳转路径跳转相关页面;
*APP根据URL跳转到另外一个APP指定页面;
*通过短信息中的url打开原生app

scheme协议格式：
[scheme]😕/[host][:port]/[path]?[query]
scheme: 协议名称（由开发人员自定义）(必要，其他都是可选)
host: 域名
port：端口
path: 页面路径
query：请求参数

调用：
例如我们再 h5 页面上点击一个唤醒app按钮，如下：

<a href="yc://ycbjie:8888/from?type=yangchong">打开叮咚app</a>

那么这个协议的链接的有来，即再原生app的设置，是长这样的：

<activityandroid:name=".ui.main.ui.activity.SchemeFirstActivity"android:screenOrientation="portrait"><!--Android 接收外部跳转过滤器--><!--要想在别的App上能成功调起App，必须添加intent过滤器--><intent-filter><!-- 协议部分配置 ,注意需要跟web配置相同--><!--协议部分，随便设置 yc://ycbjie:8888/from?type=yangchong  --><data android:scheme="yc"android:host="ycbjie"android:path="/from"android:port="8888"/><!--下面这几行也必须得设置--><category android:name="android.intent.category.DEFAULT" /><category android:name="android.intent.category.BROWSABLE" /><action android:name="android.intent.action.VIEW" /></intent-filter>
</activity>

需要原生app上先设置好了这些，h5上才能唤醒app。

三、微信环境使用微信开放标签
限制：
微信版本要求为：7.0.12及以上
系统版本要求为：iOS 10.3及以上、Android 5.0及以上
JS接口文件：1.6.0以上（例如：http://res.wx.qq.com/open/js/jweixin-1.6.0.js）

对于符合微信或系统最低版本要求但仍无法使用微信开放标签的场景，将会在下方使用步骤中的wx.config权限验证成功后触发WeixinOpenTagsError事件告知开发者。仅无法使用微信开发标签，JS-SDK其他功能不受影响。可通过如下方法监听并进行回退兼容：
document.addEventListener(‘WeixinOpenTagsError’, function (e) {
console.error(e.detail.errMsg); // 无法使用开放标签的错误原因，需回退兼容。仅无法使用开放标签，JS-SDK其他功能不受影响
});
根据目前已知的错误场景，回退兼容建议如下：
iOS15底层WebKit接口发生变更，微信版本8.0.8以下（不包括8.0.8）无法使用开放标签，可引导用户升级最新版本微信；
开放标签依赖Web Components方案，极少部分Android系统可能由于版本太低而不支持，可引导用户升级系统固件。

使用步骤
微信开放标签使用步骤与微信JS-SDK类似，也需要引入JS文件等步骤。如果是公众号身份的网页，需要绑定安全域名，如果是使用小程序云开发静态网站托管的小程序网页，则不需绑定安全域名即可直接使用（即跳过下面"步骤一：绑定安全域名"）。

绑定域名
登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。
引入JS文件
在需要调用JS接口的页面引入如下JS文件：http://res.wx.qq.com/open/js/jweixin-1.6.0.js （支持https）
如需进一步提升服务稳定性，当上述资源不可访问时，可改访问：http://res2.wx.qq.com/open/js/jweixin-1.6.0.js （支持https）
备注：支持使用 AMD/CMD 标准模块加载方法加载。
通过config接口注入权限验证配置并申请所需开放标签
与使用JS-SDK配置方式相同，所有需要使用开放标签的页面必须先注入配置信息，并通过openTagList字段申请所需要的开放标签，否则将无法使用（同一个url仅需调用一次）。开放标签的申请和JS接口的申请相互独立，因此是可以同时申请的。

wx.config({ debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印 appId: ‘’, // 必填，公众号的唯一标识 timestamp: , // 必填，生成签名的时间戳 nonceStr: ‘’, // 必填，生成签名的随机串 signature: ‘’,// 必填，签名 jsApiList: [], // 必填，需要使用的JS接口列表 openTagList: [] // 可选，需要使用的开放标签列表，例如[‘wx-open-launch-app’]});
4. 通过ready接口处理成功验证
wx.ready(function () { // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中});
使用说明
所有开放标签都能像普通的HTML标签一样在页面中直接使用，不需要再进行额外的处理。
如果所使用的标签允许提供插槽，由于插槽中模版的样式是和页面隔离的，因此需要注意在插槽中定义模版的样式。插槽模版及样式均需要通过进行包裹。另外，对于具名插槽还需要通过slot属性声明插槽名称，下文标签插槽中的default插槽为默认插槽，可不声明插槽名称。
对于标签事件，均可通过event.detail获得详细信息。如果无特殊说明，下文标签事件说明中的返回值均指代event.detail中的内容。
另外，需要注意以下几点：
页面中与布局和定位相关的样式，如position: fixed; top -100;等，尽量不要写在插槽模版的节点中，请声明在标签或其父节点上；
对于有CSP要求的页面，需要添加白名单frame-src https://*.qq.com webcompt:，才能在页面中正常使用开放标签。

四、关于IOS通用链接和安卓的APP Links链接
iOS端我们更推荐您采取Universal link方式，Andriod端目前只能采取URL Scheme这种方式。
（Andriod端本来有个App link的方式，体验更好，但是目前不能在国内大陆使用，后续U-Share会支持App link拉起的方式）

五、app通过向系统写入一个系统文件才能实现通过链接访问app

六、实现方式
a标签、iframe、location.href

参考地址：
https://www.jianshu.com/p/21380058d609/（博客）
https://juejin.cn/post/6844903664155525127?searchId=2024022110163306FB28F1FD13CAD4D0CC（博客）
https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_Open_Tag.html#%E4%BD%BF%E7%94%A8%E6%AD%A5%E9%AA%A4（微信开放标签）
https://www.npmjs.com/package/callapp-lib（集成npm包）
https://www.553668.com/manong/1254.html（微信开放标签实战）