收藏
回答

微信开放标签wx-open-launch-weapp在iframe框架页面不显示?

在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>

回答关注问题邀请回答
收藏

1 个回答

  • 大山
    大山
    03-12

    开放标签本身就套了一层 iframe 标签,可能和这个有关系。

    03-12
    有用
    回复 2
    • 犀利小肥龙
      犀利小肥龙
      03-13
      嗯嗯,是有这可能。wx.config()在iframe框架内不执行,所以我把wx.config()的操作放在了父页面,然后在子页面使用parent.wx的方式来执行jsApi、openTag的操作。jsApi是可以调用起来的,但是开放标签还是没有显示出来😭😭😭
      03-13
      回复
    • 犀利小肥龙
      犀利小肥龙
      03-22
      官方回复了暂不支持嵌在iframe框架内😓
      03-22
      2
      回复
登录 后发表内容