在开发微信公众号时，有两个菜单需跳转至小程序。
由于菜单项是通过循环遍历出的，直接使用 wx-open-launch-weapp包裹住菜单项，发现在浏览器调试时，并不显示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.nav a {
display: block;
text-align: center;
border: 1px solid rgb(126, 115, 115);
width: 100px;
height: 100px;
margin: 10px;
}
.nav a i {
display: block;
margin: 0 auto;
width: 65px;
height: 65px;
}
.nav a i img {
display: block;
width: 100%
}
.nav a strong {
display: block;
font-size: 14px;
color: #333;
font-weight: 200;
}
</style>
</head>
<body>
<div class="nav">
<a href="javascript:void(0);">
<wx-open-launch-weapp style="width: 100%; height: 100%;" path="pages/webview/webview" username="gh_test1account">
<script type="text/wxtag-template">
<style>
img {
display: block;
width: 100%;
}
strong {
display: block;
font-size: 12px;
color: #333;
font-weight: 200;
}
</style>
<div class="toWrap">
<i>
<img src="https://img1.baidu.com/it/u=1955340679,2837494472&fm=26&fmt=auto">
</i>
<strong>来院导航</strong>
</div>
</script>
</wx-open-launch-weapp>
</a>
</div>
</body>
</html>
因此，采用plan B，在原菜单项上加一个div放置weapp组件，并定位在父元素上方，此时菜单可显示，且点击也可跳转。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.nav a {
display: block;
text-align: center;
border: 1px solid rgb(126, 115, 115);
width: 100px;
height: 100px;
margin: 10px;
}
.nav a i {
display: block;
margin: 0 auto;
width: 65px;
height: 65px;
}
.nav a i img {
display: block;
width: 100%
}
.nav a strong {
display: block;
font-size: 14px;
color: #333;
font-weight: 200;
}
.originA {
position: relative;
}
.weappContainer {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
</style>
</head>
<body>
<div class="nav">
<a href="javascript:void(0);" class="originA">
<i><img src="https://img1.baidu.com/it/u=1955340679,2837494472&fm=26&fmt=auto"></i>
<strong>来院导航</strong>
<div class="weappContainer">
<wx-open-launch-weapp style="width: 100%; height: 100%;" path="pages/webview/webview"
username="gh_test1account">
<script type="text/wxtag-template">
<style>
.toWrap{
display: flex;flex-direction: column;align-items: center;
width: 100%;
height: 100%;
opacity: 0;
}
img {
display: block;
width: 100%;
}
strong {
display: block;
font-size: 12px;
color: #333;
font-weight: 200;
}
</style>
<div class="toWrap">
<i>
<img src="https://img1.baidu.com/it/u=1955340679,2837494472&fm=26&fmt=auto">
</i>
<strong>来院导航</strong>
</div>
</script>
</wx-open-launch-weapp>
</div>
</a>
</div>
</body>
</html>