微信开放标签wx-open-launch-app

移动互联网时代，“用户增长”成为每个公司关注的重点话题。
促活拉新是大多数公司的核心，为了将更多用户引导到客户端内，那么主要的渠道有哪些？又是通过什么样的方式回流到客户端内呢？

从系统来区分：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: [], // 必填，需要使用的JS接口列表
openTagList: ['wx-open-launch-app'] // 可选，需要使用的开放标签列表，例如['wx-open-launch-app']
});

加入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 在接入小程序的时候已经做了，可惜了我的辛苦）。这里我用击穿来实现的。
1. 击穿实现 https://www.lilnong.top/static/html/touchstart-click.html
2. 因为渲染慢非同步，所以我在真实使用的时候换了另一种方案实现的，拼外渲染，然后绝对定位。
3. 然后就是剪贴板复制的问题。需要在 touchend 的时候处理 https://www.lilnong.top/static/html/copy-execCommand.html
使用 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 也可以看到