从系统来区分：Android、iOS。
从方式来区分：网页（拼多多、思否、掘金、知乎 大多数公司都是这种方式）、口令（支付宝、淘宝、拼多多 主要网页被封了）、图片&视频（抖音 过年的时候发现的，把图片保存本地就可以回流）
从环境、渠道来区分：微信内（重要渠道）、QQ内、各厂商的浏览器内(短信方式。vivo、oppo、qq浏览器、华为、小米)
环境复杂多变，简单说一下我司之前的逻辑：
- Android 安卓
- 微信内
- 方案一：应用宝，变相给应用宝拉新。
- 方案二：右上角浏览器打开，然后使用 scheme 。
- 方案三：下载头，目前被微信拦截了，成了变相给 QQ 浏览器拉新了
- 方案四：公网代理到本机。需要设置一堆的权限才可以使用
- QQ 内
- 其他环境
- URL Scheme， 一般都是 iframe 去触发。
- Intent 跳手机自带的应用市场
- iOS
- 微信内
- Universal Links 通用链接，iOS 9+ 系统
- 右上角浏览器打开
- 系统拦截 param 回流
- safari 中使用 scheme
- QQ 内
- 其他环境
这逻辑我要吐了，问题是时不时的还要改动一下。安稳不了多久就不行了。
突然五一前的一天，微信开放平台多出了一个功能 微信内网页跳转APP功能，然后我们就接入了一下。
开放标签
微信版本要求为：7.0.12及以上。 系统版本要求为：iOS 10.3（感觉 13 以下体验好差，我们人为处理了一下）及以上、Android 5.0及以上。
接入开放标签
- 与微信JS-SDK类似，也需要绑定安全域名（登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。）、引入JS文件（https://res.wx.qq.com/open/js...）等步骤。
- 注入配置信息，通过
openTagList字段申请所需要的开放标签。
wx.config({ debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印 appId: '', // 必填，公众号的唯一标识 timestamp: , // 必填，生成签名的时间戳 nonceStr: '', // 必填，生成签名的随机串 signature: '',// 必填，签名 jsApiList: ['onMenuShareTimeline','onMenuShareAppMessage','onMenuShareQQ','onMenuShareWeibo','onMenuShareQZone'], // 必填，需要使用的JS接口列表 openTagList: ['wx-open-launch-app'] // 可选，需要使用的开放标签列表，例如['wx-open-launch-app'] });
3.加入DOM
<wx-open-launch-app id="launch-btn" appid="your-appid" extinfo="your-extinfo" > <template> <style>.btn { padding: 12px }</style> <button class="btn">App内查看<button> </template> </wx-open-launch-app> <script> var btn = document.getElementById('launch-btn'); btn.addEventListener('launch', function (e) { console.log('success'); }); btn.addEventListener('error', function (e) { // "launch:fail" 调用失败，或安卓上该应用未安装，或iOS上用户在弹窗上点击确认但该应用未安装 // "launch:fail\_check fail" 校验App跳转权限失败，请确认是否正确绑定AppID console.log('fail', e.detail); }); </script>
vue 中使用。template 冲突
使用 <script type="text/wxtag-template"><script> 进行代替
打开客户端指定页面
- 剪贴板，因为剪贴板是旧有的逻辑，所以我们希望第一版可以尽快的使用起来（结果 openSDK 在接入小程序的时候已经做了，可惜了我的辛苦）。这里我用击穿来实现的。
- 击穿实现 https://www.lilnong.top/static/html/touchstart-click.html
- 因为渲染慢非同步，所以我在真实使用的时候换了另一种方案实现的，拼外渲染，然后绝对定位。
- 然后就是剪贴板复制的问题。需要在 touchend 的时候处理 https://www.lilnong.top/static/html/copy-execCommand.html
2.使用 DOM 上的 extinfo 属性来实现。格式自定义，由跳转的 App 解析处理。对应iOS微信 openSDK 中的 messageExt 字段（LaunchFromWXReq.message.messageExt），或对应 Android 微信openSDK中的 messageExt 字段
（ShowMessageFromWX.Req.message.messageExt），详细参见文档《App获取开放标签<wx-open-launch-app>中的extinfo数据》。
其他方式详解
URL Scheme
var _iframe = document.createElement('iframe'); _iframe.src = scheme; _iframe.style.display = 'none'; document.body.appendChild(_iframe); window.setTimeout(function(){ document.body.removeChild(_iframe); if((+new Date()) - openTime > 2500) { window.location.href = url; } }, 2000);
但是存在用户没有安装 App 的情况，所以使用 iframe 比较常见。
当用户没有安装时，通过 setTimeout 跳转到 下载页。
开放标签特征
- 无法接收事件冒泡、事件捕获。
- 异步渲染
- 本质上可以理解为 webComponent。 template 理解为插槽，想要获取可以通过
content。控制台开启Shadow DOM也可以看到
