<view v-html="html"></view>

      setTimeout(function() {

        that.html = '<wx-open-launch-weapp id="launch-btn" username="xxx">\

          <template>\

            <button>小程序跳转</button>\

          </template>\

          </wx-open-launch-weapp>'

      }, 2000)

我这边出现同样问题，处理了下，得等加载完配置后再载入就可以了

vue提示组件未注册：

// 3.0之前
Vue.config.ignoredElements = ['wx-open-launch-weapp']

// 3.0之后
const app = createApp({})
app.config.compilerOptions.isCustomElement = tag => tag.startsWith('wx-open-launch-weapp')
微信开放标签 发布了才会显示 微信开发者工具也会显示

亲测可以 https://blog.csdn.net/CherryCola_zjl/article/details/111165702

<template>

  <div class="content">

    <img class="logo" src="~assets/images/logo.png" alt="">

    <p class="text">正在打开“花生大学”微信小程序</p>

    <div class="open" @click="isWeixin ? open : ''">打开小程序</div>

    <div class="weapp" v-if="isWeixin" >

      <wx-open-launch-weapp username="gh_2986a360565d" path="/pages/index/index.html">       

        <script type="text/wxtag-template">         

          <style>

            .btn {

              height: 4000px; !impoartant; 

              width: 5000px; !important;

              background-color: #f04146;

              color: #ffffff;

            }

          </style>

          <div class="btn">跳转小程序</div>      

        </script>     

      </wx-open-launch-weapp> 

    </div>

  </div>

</template>

<script>

export default {

  data() {

    return {

      isWeixin: false,

      wxData: {}

    }

  },

  methods: {

    async wxmini(){

      const res = await fetch('/clawApi/getShareConfig', {

        method: 'POST',

        headers: { 'Content-Type': 'application/json; charset=utf-8' },

        body: JSON.stringify({

          url: window.location.href

        })

      }).then(response => response.json())

        .then(data => {

          return data

        });

      console.log(res)

      this.wxData = res?.data

      const { timestamp, appID, nonceStr, signature } = this.wxData

      wx.config({ // eslint-disable-line

        debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印

        appId: appID, // 必填，公众号的唯一标识

        timestamp, // 必填，生成签名的时间戳

        nonceStr: nonceStr, // 必填，生成签名的随机串

        signature: signature, // 必填，签名

        jsApiList: ['onMenuShareTimeline'], // 必填，需要使用的JS接口列表

        openTagList: ['wx-open-launch-weapp'] // 可选，需要使用的开放标签列表，例如['wx-open-launch-app']

      });

      /* eslint-disable */

      wx.ready(function () {

          console.log('ready')

      });

    }

  },

  mounted() {

    const ua = navigator.userAgent.toLowerCase()

    const isWXWork = ua.match(/wxwork/i) == 'wxwork'

    this.isWeixin = !isWXWork && ua.match(/micromessenger/i) == 'micromessenger'

    if(this.isWeixin) {

      const oScript = document.createElement('script');

      oScript.type = 'text/javascript';

      oScript.src = 'https://res2.wx.qq.com/open/js/jweixin-1.6.0.js';

      oScript.onload = this.wxmini

      document.body.appendChild(oScript);

    }

  },

  head() {

    return {

      script: [

        {

          src: "https://changba.com/njwap/stats/index/entry?id=1212",

          type: "text/javascript",

          charset: "utf-8"

        }

      ]

    }

  }

}

</script>

<style lang="scss" scoped root-value="37.5">

.content {

  width: 375px;

  height: 100vh;

  margin: 0 auto;

  overflow: hidden;

  font-family: PingFangSC-Regular;

  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: center;

  position: relative;

}

.logo {

  width: 150px;

  height: 150px;

  margin-top: -50px;

}

.text {

  width: 100%;

  font-size: 20px;

  text-align: center;

}

.open {

  width: 200px;

  height: 50px;

  background-color: #f04146;

  margin-top: 30px;

  border-radius: 30px;

  color: #fff;

  font-size: 18px;

  display: flex;

  justify-content: center;

  align-items: center;

}

.weapp {

  position: fixed;

  top: 0;

  bottom: 0;

  left: 0;

  right: 0;

  z-index: 100000;

  font-size: 100px;

  overflow: hidden;

  opacity: 0;

}

</style>

请问是必须要在微信浏览器才能用是吧？其他浏览器或者app中的h5页中是拉不起小程序的吧？

https://www.dengwz.com/archives/137 看这篇文章

<template>
  <div class="home">
    <wx-open-launch-weapp
      id="launch-btn"
      username="gh_"
      @launch="handleLaunchFn"
      @error="handleErrorFn"
    >
      <script type="text/wxtag-template">
        <style>.btn { display: flex;align-items: center; }</style>
        <button class="wx-btn">跳转小程序</button>
      </script>
    </wx-open-launch-weapp>
  </div>
</template>


<script src="//res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
<script>
export default {
  data () {
    return {
    }
  },
  mounted () {
  },
  methods: {
    handleLaunchFn (e) {
      console.log(e)
    },
    handleErrorFn(e){
      console.log('fail', e.detail);
    }
  }
}
</script>

https://www.jianshu.com/p/559c29c80fd9

react中使用wx-open-launch-weapp不显示？

解决了么？