微信浏览器内 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>

 

五、参考微信官方链接 接入指南
https://developers.weixin.qq.com/doc/oplatform/Mobile_App/Access_Guide/iOS.html 微信内网页跳转 app 功效
https://developers.weixin.qq.com/doc/oplatform/Mobile_App/WeChat_H5_Launch_APP.html JS-SDK使用步骤
https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html#1 开放标签说明文档
https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_Open_Tag.html

注:转载请注明出处博客园:sheldon(willian12345@126.com)

https://github.com/willian12345

 

 

 

原创文章,作者:2d28新闻网,如若转载,请注明出处:https://www.2d28.com/archives/22782.html