之前微信浏览器内想要直接唤醒 app 要么接微信的应用宝要么你是腾讯的干儿子。
而在微信在2020年5月分推出了“微信开放标签”功能
wx-open-launch-app 用于微信浏览器内直接唤醒 app ，也可经过携带参数直接进入app相应的内页。
如今不是干儿子，只要按照规定接入微信SDK就直接能够使用此功能。
1、适用环境
微信版本要求为：7.0.12及以上。 系统版本要求为：iOS 10.3及以上、Android 5.0及以上
2、接入微信JS-SDK
按微信JS-SDK要求绑定安全域，并经过config接口注入权限验证配置
wx.config({ appId: '', debug: true, timestamp: '', nonceStr: '', signature: '', jsApiList: [ 'onMenuShareTimeline', // 分享给好友 'onMenuShareAppMessage', // 分享到朋友圈 ], openTagList: ['wx-open-launch-app’] // 获取开放标签权限 });
须要注意的点：
三、wx.config 内列出使用到的 openTagList
在微信开发者工具内打开你的网页测试若是显示
{errMsg: "config:ok”}
说明你已经接入JS-SDK成功了css
遗憾的是截至2020年7月13号为止，微信开发者工具仍是没法支持微信开放标签的调试功能，只能在手机上调试而且是在加了微信安全域名的服务器环境下调试，着实麻烦html
3、在 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 标签组件ios
<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>
注意
一、标签内的本来的 <template> slot 须要替换成 <
script type="text/wxtag-template”>
二、通过测试发现标签内定义的样式真的很尴尬，且不受控制，因此咱们直接将标签用 CSS 绝对定位并设透明度为 opacity: 0, 盖在了咱们本来的设计图上
三、透明度为 opacity: 0 的标签 <script type="text/wxtag-template">
不能为空，不然宽高会被解析为0，也就是按钮根本点击不到
四、标签内 appid 填写的是
微信公众号内填写的大家 app 的 appid
五、extinfo 内填的是传递给唤起 app 的数据，而咱们发现微信7.0.15版本在ios上，有几率会接收数据失败，不知道是微信的问题仍是咱们IOS的写法问题
六、在 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.0.12 开放标签是没法使用的，因此最好在开放标签外套一层 DIV 用于点击事件，在事件中断段微信版本号若是低于，则降级到应用宝之类的方案git
<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){ // 不支持标签降级处理 } }
4、最后固然是封装成项目中的一个组件github
<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>
5、参考微信官方连接
接入指南
微信内网页跳转 app 功能
JS-SDK使用步骤
开放标签说明文档
注：转载请注明出处博客园：sheldon(willian12345@126.com)浏览器
https://github.com/willian12345安全