微信瀏覽器內 h5 直接喚醒 app 之 微信開放標籤 wx-open-launch-app

池中物willian發表於2020-07-13
瀏覽器H5APP

以前微信瀏覽器內想要直接喚醒 app 要麼接微信的應用寶要麼你是騰訊的乾兒子。
而在微信在2020年5月分推出了“微信開放標籤”功能
wx-open-launch-app 用於微信瀏覽器內直接喚醒 app ，也可通過攜帶引數直接進入app相應的內頁。
現在不是乾兒子，只要按照規定接入微信SDK就直接可以使用此功能。
 
一、適用環境
微信版本要求為：7.0.12及以上。 系統版本要求為：iOS 10.3及以上、Android 5.0及以上
 
二、接入微信JS-SDK
按微信JS-SDK要求繫結安全域，並通過config介面注入許可權驗證配置
 
wx.config({
    appId: '',
    debug: true,
    timestamp: '',
    nonceStr: '',
    signature: '',
    jsApiList: [
        'onMenuShareTimeline', // 分享給好友
        'onMenuShareAppMessage', // 分享到朋友圈
    ],
    openTagList: ['wx-open-launch-app’] // 獲取開放標籤許可權
});

需要注意的點：
3、wx.config 內列出使用到的 openTagList
 
在微信開發者工具內開啟你的網頁測試如果顯示
{errMsg: "config:ok”}

說明你已經接入JS-SDK成功了

遺憾的是截至2020年7月13號為止，微信開發者工具還是無法支援微信開放標籤的除錯功能，只能在手機上除錯並且是在加了微信安全域名的伺服器環境下除錯，著實麻煩

 

三、在 VUE 專案內使用 wx-open-launch-app
由於 wx-open-launch-app 這個標籤在VUE專案編譯時識別不了會報錯，得在main.js檔案內加上忽略報錯的程式碼
// 忽略自定義元素標籤丟擲的報錯
Vue.config.ignoredElements = [
    'wx-open-launch-app',
];

new Vue({

    el: '#app',

    template: '<app/>',

    components: { app }
})

wx-open-launch-app 標籤元件

<wx-open-launch-app
    :id="id"
    class="launch-btn"
    :appid="appId"
    :extinfo="extinfoStr"
    >
    <script type="text/wxtag-template">
        <style>.btn {height: 96px;}</style>
        <div class="btn">開啟app</div>
    </script>
</wx-open-launch-app>

注意
1、標籤內的原本的 <template> slot 需要替換成 <script type="text/wxtag-template”>
2、經過測試發現標籤內定義的樣式真的很尷尬，且不受控制，所以我們直接將標籤用 CSS 絕對定位並設透明度為 opacity: 0, 蓋在了我們原本的設計圖上
3、透明度為 opacity: 0 的標籤 <script type="text/wxtag-template"> 不能為空，否則寬高會被解析為0，也就是按鈕根本點選不到
4、標籤內 appid 填寫的是 微信公眾號內填寫的你們 app 的 appid
5、extinfo 內填的是傳遞給喚起 app 的資料，而我們發現微信7.0.15版本在ios上，有概率會接收資料失敗，不知道是微信的問題還是我們IOS的寫法問題
6、在 VUE 的 mounted 生命週期回撥函式內偵聽開放標籤的回撥事件
mounted(){
    var btn = document.getElementById(this.id)
    btn.addEventListener('launch', e => {
        // 在此處可設定貼上板內資料，資料是傳遞給 app 的引數進，
        console.log('success');
    });
    btn.addEventListener('error', e => {
        // 在此處可設定貼上板內資料，資料是傳遞給 app 的引數進，
        console.log('fail', e.detail);
        // 喚醒失敗的情況下，可用於降級處理比如在此處跳轉到應用寶
    });
}

7、如果微信版本低於7.0.12 開放標籤是無法使用的，所以最好在開放標籤外套一層 DIV 用於點選事件，在事件中斷段微信版本號如果低於，則降級到應用寶之類的方案

<div @click="launch">
    <wx-open-launch-app
        :id="id"
        class="launch-btn"
        :appid="appId"
        :extinfo="extinfoStr" 
      >
      <script type="text/wxtag-template">
        <style>.btn {height: 96px;}</style>
        <div class="btn">開啟app</div>
      </script>
    </wx-open-launch-app>
  </div>
launch(){
    // 在此處可設定貼上板內資料，資料是傳遞給 app 的引數進
    if(!this.enable){
        // 不支援標籤降級處理
    }
}

 

四、最後當然是封裝成專案中的一個元件

<template>
  <div @click="launch">
    <wx-open-launch-app
        :id="id"
        class="launch-btn"
        :appid="appId"
        :extinfo="extinfoStr" 
      >
      <script type="text/wxtag-template">
        <style>.btn {height: 96px;}</style>
        <div class="btn">開啟app</div>
      </script>
    </wx-open-launch-app>
  </div>
</template>
<script>
  import globalConfig from '@assets/js/config'
  import { copyToClipboard } from '@assets/js/utils'
  import { getWeixinVersion, onBridgeReady } from '@assets/js/weixin/weixin'
  
  let idIndex = 0
  export default {
    name: 'LaunchButton',
    props: {
      extinfo: {
        type: Object,
        default: ''
      },
    },
    watch: {
      extinfo: {
        handler(n){
          this.extinfoStr = JSON.stringify(n)
        },
        immediate: true
      }
    },
    data() {
      idIndex++
      return {
        id: 'wxopenLanchAppId' + idIndex,
        appId: globalConfig.WEIXIN_APP_ID,
        enable: false,
        extinfoStr: '',
      }
    },
    methods: {
      redirectToApp(){
        setTimeout(()=>{
          window.location.href = globalConfig.YING_YONG_BAO
        }, 400)
      },
      setClipboard(){
        console.log('start copy')
        let copyObject = {
          app: 'yogo'
        }
        for(var k in this.extinfo){
          copyObject[k] = this.extinfo[k]
        }
        copyObject = JSON.stringify(copyObject)

        copyToClipboard(copyObject)
        console.log('end copy')
      },
      launch(){
        this.setClipboard()
        if(!this.enable){
          this.redirectToApp()
        }
      }
    },
    created(){
      // 微信版本號大於 7.0.12 開放標籤才可進行 喚醒 app 跳轉
      const wxVersion = getWeixinVersion()
      if(wxVersion){
        let v = wxVersion.split('.')
        if(v[0]>=7){
          if(v[1]>=0){
            if(v[2]>=12){
              this.enable = true
            }
          }
        }
      }
    },
    mounted(){
      var btn = document.getElementById(this.id)
      btn.addEventListener('launch', e => {
        this.setClipboard()
        console.log('success');
      });
      btn.addEventListener('error',  e => {
        console.log('fail', e.detail);
        this.setClipboard()
        this.redirectToApp()
      });
    }
  }
</script>
<style lang="scss" scoped>
  .launch-btn{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    opacity: 0;
    // background: red;
  }
</style>

 

五、參考微信官方連結
接入指南
微信內網頁跳轉 app 功能
JS-SDK使用步驟
開放標籤說明文件

注：轉載請註明出處部落格園：sheldon(willian12345@126.com)

https://github.com/willian12345

 

 

 

相關文章