微信浏览器内 h5 直接唤醒 app 之微信开放标签 wx-open-launch-app

以前微信浏览器内想要直接唤醒 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’] // 获取开放标签权限

});

需要注意的点：

1、符合开放平台列出的要求 https://developers.weixin.qq.com/doc/oplatform/Mobile_App/WeChat_H5_Launch_APP.html

2、app 需要根据接入微信 sdk https://developers.weixin.qq.com/doc/oplatform/Mobile_App/Access_Guide/iOS.html

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>