微信内建浏览器：网页直达应用的操作指南及注意事项（针对前端开发者与开放标签）
最编程
2024-02-06 19:48:39
...
// 在vue中，如果配置好对应的公众号和开放平台，下面的操作就可以了
<wx-open-launch-app class="pullDivWechat" appid="开放平台移动应用Id"
:extinfo="你要传递给app的信息，需要商量传递的格式"
@ready="ready" @launch="launch" @error="error">
<div v-is="'script'" type='text/wxtag-template'>
<div style="width:750px;height:750px;"></div>
</div>
</wx-open-launch-app>
// ready 标签初始化成功 launch唤起app成功 error唤起失败了
// js中如果有需要使用这些回调函数,直接addEventListener添加
function addSelfEvent() {
const elements = document.querySelectorAll('.pullDivWechat');
// 循环是因为一个页面可能有多个唤起app的按钮，当时就因为这个看了好久，以为是添加不上
for (let i = 0; i < elements.length; i++) {
let element = elements[i];
element.addEventListener('ready', function (e) {
// js中，我是在这里添加的extinfo内容，
e.target.setAttribute('extinfo', 内容)
})
element.addEventListener('launch', function (e) {})
element.addEventListener('error', function (e) {})
}
}
// 样式方面，我直接给标签设置成和你要唤起app的按钮(图片)一样的大小，
// 定位到一样的位置，z-index+1，js控制一下显隐，只要在安卓+微信就显示这个标签就好了(我这里是这个要求)
// 这个操作就好像是，我要点击按钮，but，其实点的是开放标签
function showPullDiv() { // 控制标签显隐
$(".pullDivWechat").hide();
var ua_str = window.navigator.userAgent.toLowerCase();
var u = navigator.userAgent;
var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //g
// // 安卓微信客户端
if (/micromessenger/.test(ua_str) && isAndroid) {
$(".pullDivWechat").show();
}
}
// 样式大概就这样，直接把开放标签当成透明遮罩，盖到按钮上就好了
<style>
position: absolute;
top: 0px;
left: 0px;
z-index: 1;
overflow: hidden;
</style>
// 真正唤起app的按钮是插槽里写的东西，看微信开放论坛上说的是不能设置100%，没试(lazy)，所以这里有写overflow