微信官方文档：https://developers.weixin.qq.com/doc/service/guide/h5/opentag.html#

注意事项

1. 必须通过 HTTPS 访问
2. 页面必须在公众号已配置的 JS 安全域名下
3. <wx-open-launch-weapp> 标签必须在页面加载完成后插入，不能提前
4. 样式必须写在 <template> 内的 <style> 标签中，外部样式无效
5. 调试时可用微信开发者工具的「公众号网页调试」功能

页面使用

<template>
  <view class="container">
    <!-- 占位容器 -->
    <view v-html="openWeappBtnHtml"></view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue'

const openWeappBtnHtml = ref('')

onMounted(() => {
  // 仅在微信浏览器中才渲染按钮
  if (isWechat()) {
    openWeappBtnHtml.value = `
      <wx-open-launch-weapp
        id="launch-btn"
				appid="所需跳转的小程序appid，即小程序对应的以wx开头的id"
        path="所需跳转的小程序内页面路径及参数"
      >
        <template>
          <style>
            .btn {
              display: block;
              width: 200px;
              height: 50px;
              background-color: #07c160;
              color: white;
              text-align: center;
              line-height: 50px;
              border-radius: 5px;
            }
          </style>
          <div class="btn">打开小程序</div>
        </template>
      </wx-open-launch-weapp>
    `
  }
})

// 判断是否微信浏览器
function isWechat() {
  const ua = navigator.userAgent.toLowerCase()
  return ua.includes('micromessenger')
}
</script>

<style>
/* 注意：wx-open-launch-weapp 是 inline 元素，建议设置 display: block */
#launch-btn {
  display: block;
  width: 200px;
  margin: 20px auto;
}
</style>