<template>
  <!-- position:absolute;left:0;top:0;width:100%;height:100% -->
  <div class="wx-open-app">
    <wx-open-launch-app
      id="launch-btn"
      ref="launchBtnRef"
      :appid="state.appid"
      :extinfo="state.extinfo"
      @ready="handleReadyFn"
    >
      <div v-is="'script'" type="text/wxtag-template" >
        <div
          class="btn"
            style="
            width: 334px;
            height: 52px;
            background: #FF8024;
            border-radius: 26px;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 18px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #FFFFFF;
          "
          >
            打开APP
        </div>
      </div>
    </wx-open-launch-app>
  </div>
</template>

<script lang="ts" setup >
import { reactive } from 'vue';
import { ref } from 'vue'

// export interface IProps {
//   appid?: string
//   extinfo?: string
// }
// wxe87236d542cd0f94 // wxeb44a864bdd935be // wxd61f929a1c72280a
const state = reactive({
  appid: 'wxeb44a864bdd935be',
  extinfo: ''
})

const launchBtnRef = ref()

const handleReadyFn = () => {

    launchBtnRef.value.addEventListener("launch", function () {
      console.log('launch');
    });

    launchBtnRef.value.addEventListener("error", function (e: any) {
      console.log('error:', e.detail);
      window.location.href = `https://sj.qq.com/myapp/detail.htm?apkName=com.zaojiao.app`;
    });

}


</script>
 
<style  >


</style>


