使用微信wx-open-launch-app 来唤醒 app的组件

根据微信官方的文档将相应的配置都搞定后 wx-open-launch-app 就和div一样正常使用该组件即可

<template>
  <div style="position: relative" @click="customOpenApp">
    <slot></slot>
    <wx-open-launch-app
      id="launch-btn"
      appid="appid"
      :extinfo="extrainfo"
      class="app-open-launch"
      @ready="ready"
      @error="handleError"
    >
      <component :is="'script'" type="text/wxtag-template">
        <div style="width: 100vw; height: 100vh"></div>
      </component>
    </wx-open-launch-app>
  </div>
</template>

<script setup>
const extrainfo = ref('')
// 更新 extrainfo 跳转的值 不传方法走默认的 
// 默认返回空对象是 
// 也可以使用updateInfo 方法来在组件外面作一些逻辑
// 微信内该模版无法添加点击事件，也无法监听，冒泡事件不生效
const props = defineProps({
  updateInfo: {
    type: Function,
    default: () => { return {} }
  }
})

const setExtraInfo = async (data) => {
  //这里设置要传入的参数 data 或者根据你的需求处理的一些逻辑
  const params = {}
  extrainfo.value = params ? JSON.stringify({ ...params }) : ''
}

const ready = () => {
  const data = props.updateInfo()
  setExtraInfo(data)  
}
const handleError = e => {
  alert(`跳转失败${JSON.stringify(e)}`)
}

const customOpenApp = (e) => {
  //这里做一些不在微信时的跳转
  // const data = props.updateInfo()
}
</script>

<style lang="less" scoped>
.app-open-launch {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10001;
}
</style>