android h5 唤醒微信,微信浏览器内 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/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',

];newVue({

el:'#app',

template:'',

components: { app }

})

wx-open-launch-app 标签组件

:id="id"class="launch-btn":appid="appId":extinfo="extinfoStr"

>

打开app

注意

1、标签内的原本的 slot 需要替换成

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 用于点击事件，在事件中断段微信版本号如果低于，则降级到应用宝之类的方案

:id="id"class="launch-btn":appid="appId":extinfo="extinfoStr"

>

打开app