在H5页面中,父页面使用了iframe框架嵌套子页面,子页面的wx-open-launch-weapp标签没有显示出来;如果单独访问子页面是可以显示的
// 父页面代码
<div>
<iframe src="./xxx.html" frameborder="0" style="width: 100%; height: 100vh;"></iframe>
</div>
// 子页面代码
<div id="wechat-web-container" class="hidden">
<p>点击以下按钮打开“小程序名字”</p>
<!--
username:必填,所需跳转的小程序原始id,即小程序对应的以gh_开头的id;
path:非必填,所需跳转的小程序内页面路径及参数(默认小程序的初始页面【即首页】)
-->
<wx-open-launch-weapp id="launch-btn" username="gh_XXX" path="/pages/XXX">
<!-- 第一种: 不适用于Vue.js开发的项目,template标签会冲突 -->
<template>
<style>
.open-btn {
display: block;
margin: 0 auto;
padding: 8px 24px;
width: 200px;
height: 45px;
border: none;
border-radius: 4px;
background-color: #07c160;
color: #fff;
font-size: 18px;
text-align: center;
}
</style>
<button class="open-btn">打开小程序</button>
</template>
<!-- 第二种:几乎适用于所有前端框架开发的项目 -->
<!-- <script type="text/wxtag-template">
<style>
.open-btn {
display: block;
margin: 0 auto;
padding: 8px 24px;
width: 200px;
height: 45px;
border: none;
border-radius: 4px;
background-color: #07c160;
color: #fff;
font-size: 18px;
text-align: center;
}
</style>
<button class="open-btn">打开小程序</button>
</script> -->
</wx-open-launch-weapp>
</div>
开放标签本身就套了一层 iframe 标签,可能和这个有关系。