对做H5的前端同学来说，网页跳转app肯定是个没少头疼的需求。在这里我就不说各种跳转方案了，感兴趣的同学可以参考：juejin.cn/post/684490…
微信原本一直不支持非合作方的网页在app内进行跳转，可能是被吐槽的太多，今年2021年7月份出来一个新功能，支持H5网页通过微信提供的开放标签进行app跳转。关于网页跳转app的各种配置，在这里就不在赘述，请自行移步微信官方文档，下面聊聊开发过程中可能会踩坑的地方。作为一个萌新，感觉除了配置稍稍有点麻烦，其他部分还是比较顺利的。总结起来，有三个问题，vue框架运行时报无法编译开放标签错误、按钮样式、JS-SDK配置时jsApiList不能为空数组，无论是否需要。
vue运行无法编译开放标签
该章节一下内容请都忽略,直接使用vue2提供的ignoredElements配置选项,具体配置请移步官网.
vue的话由于它是在运行时匹配非原生html标签，进行编译，这样一来就会导致编译错误。所以，不能在页面上直接写死开放标签，应该在页面写上一个开放标签的父元素，等组件mounted以后动态插入。代码如下：
export function wx_launch(info){
var btns = document.querySelectorAll('#launch-box'); //获取元素
btns.forEach(btn=>{
let width = btn.clientWidth
let height = btn.clientHeight
let html = `<wx-open-launch-app style="width:100%;height:100%;display:block;"
id="launch-btn"
appid="wxbffc17d2ef4bb9a7"
extinfo="${info}">
<template>
<style>
.btn {
width: ${width}px;
height: ${height}px;
line-height: ${height}px;
background: rgba(0,0,0,0);
text-align: center;
font-size: 14px;
font-weight: 600;
color: #FFFFFF;
}
</style>
<div class="btn">${btn.innerHTML}</div>
</template>
</wx-open-launch-app>`;
btn.innerHTML = html; // html字符串赋值 })
// 点击按钮 正常跳转触发
var launchs = document.querySelectorAll('launch-btn');
launchs.forEach(launch=>{
launch.addEventListener("launch", function (e) {
alert('alert("launch")')
});
// 点击跳转 抛出异常
launch.addEventListener("error", function (e) {
if(e.detail.errMsg=='launch:fail'){
self.location = '../../guideDownload.html'
}
});
})}
这里我自己封装了一个js函数，在页面mounted的时候调用该函数。
按钮样式
承接上面的代码，我们继续按钮样式，微信开发文档上说不建议在开放标签里面的模板标签上面写绝对定位等样式，由于大部分的H5页面都是做了响应式的，在这里我就是吧所有样式写在了父元素上面，然后将开放标签中的模板样式的背景设置为background: rgba(0,0,0,0);，大小与父元素一致，由于这个方法可能用在很多不同场景，在这里按钮的提示语，我是通过父元素的innerHtml动态获取的。（写文章时，突然发现可以把绝对定位样式写在微信开放标签上面，没有实践过，不知道好不好用呢，有兴趣的小伙伴可以看看）
JS-SDK配置中的jsApiList不能为空数组
这个就很简单了，意思就是说在JS-SDK的config配置时，配置项jsApiList必须要传入一个api的接口，不能为空数组，由于本公司之前的代码也没有为微信定制过功能，在开发过程时，就踩坑传了空数组，导致头秃的可能性又增加了那么一丢丢
