微信迴流 - 開放標籤 （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: [], // 必填，須要使用的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...