乐趣区

微信回流-开放标签-wxopenlaunchapp

jiezi

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

从 系统 来区分：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: [], // 必填，需要使用的 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…
退出移动版