https://developers.weixin.qq.com/miniprogram/dev/framework/

微信公众号使用的是测试号，h5页面想要跳转微信小程序（该小程序已发布上线），使用了开放标签，配置都已成功，但是点击始终无反应，请问该怎么解决？

微信版本已经达到开放标签要求，h5使用vue开发。

与测试号有关系吗？

以下三种方法均试过，都没有效果

<div style="width:100px;height:100px;background:red">
    <wx-open-launch-weapp id="launch-btn" username="gh_123132" path="pages/xxxxx/xxxxx.html" ref="launchBtn" @ready="handleLaunchFn" @launch="handleLaunchFn"
                @error="handleErrorFn">
      <template>
        <style>
        .btn {
          width: 200px;
          height: 45px;
          line-height: 45px;
          text-align: center;
          font-size: 17px;
          border-radius: 22.5px;
          color: #fff;
        }
        </style>
        <button class="btn">启动APP</button>
      </template>
    </wx-open-launch-weapp>
  </div>

wx.ready(function () {
  alert('wx.ready====')
  // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
   var btn = document.getElementById("launch-btn");
   alert(btn);
  
  ①第一种方法
   try {
     btn.addEventListener("ready", function (e) {
       alert("ready");
    });
    btn.addEventListener("launch", function (e) {
      alert("success");
    });
    btn.addEventListener("error", function (e) {
      alert("小程序打开失败");
      alert("fail", e.detail);
    });
  } catch (e) {
    alert(e.message)
  }

②第二种方法
try {
     this.$refs.launchBtn.addEventListener("ready", function (e) {
       alert("ready");
    });
    this.$refs.launchBtn.addEventListener("launch", function (e) {
      alert("success");
    });
    this.$refs.launchBtn.addEventListener("error", function (e) {
      alert("小程序打开失败");
      alert("fail", e.detail);
    });
  } catch (e) {
    alert(e.message)
  }
});

③第三种方法
methods: {
    handleReadyFn(e) {
      alert("ready")
    },
    handleLaunchFn(e) {
      alert("launch")
    },
    handleErrorFn(e) {
      alert("error")
    },
}