微信回流 - 开放标签 （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及以上。
开放标签说明文档

接入开放标签

1. 与微信JS-SDK类似，也需要绑定安全域名（登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。）、引入JS文件（https://res.wx.qq.com/open/js...）等步骤。

2. 注入配置信息，通过 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> 进行代替

打开客户端指定页面

1. 剪贴板，因为剪贴板是旧有的逻辑，所以我们希望第一版可以尽快的使用起来（结果 openSDK 在接入小程序的时候已经做了，可惜了我的辛苦）。这里我用击穿来实现的。

   1. 击穿实现 https://www.lilnong.top/static/html/touchstart-click.html
   2. 因为渲染慢非同步，所以我在真实使用的时候换了另一种方案实现的，拼外渲染，然后绝对定位。
   3. 然后就是剪贴板复制的问题。需要在 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 跳转到 下载页。

开放标签特征

1. 无法接收事件冒泡、事件捕获。
2. 异步渲染
3. 本质上可以理解为 webComponent。 template 理解为插槽，想要获取可以通过 content。控制台开启 Shadow DOM 也可以看到

微信公众号：前端linong

相关资料

1. https://github.com/jawidx/web...
2. https://www.jianshu.com/p/136...