10

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

系统来区分: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

clipboard.png

相关资料

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

linong
28.8k 声望9.4k 粉丝

Read-Search-Ask