首先在main.ts里面写入以下内容

const app = createApp(App)
app.config.compilerOptions.isCustomElement = (tag) => {
	return tag.startsWith('wx-open-launch-weapp')
}

在vite.config.ts里面写

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
export default defineConfig({
    plugins: [vue({
      template: {
        compilerOptions: {
	      isCustomElement: (tag) => tag.includes('wx-open-launch-weapp')
	    }
      }
    })]
})

在页面中写入

<template>
  <div class="applet">
    <wx-open-launch-weapp
      :id="jumpAppletId"
      username=""
      :path="jumpAppletSrc"
      :style="{width: '100%', height: '100%', display: 'block', position: 'relative'}"
    >
      <div
        v-is="'script'"
        type="text/wxtag-template"
        style="display: block;"
      >
        <div v-is="'style'">
          .applet-btn {
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          display: flex;
          align-items: center;
          justify-content: center;
          color: transparent;
          font-size: 12px;
          margin: auto;
          width: 100%;
          height: 100%;
          padding: 0;
          border: none;
          background-color: transparent;
          }
        </div>
        <button class="applet-btn">
          打卡小程序
        </button>
      </div>
    </wx-open-launch-weapp>
  </div>
</template>
<script setup lang="ts">
import { onMounted } from 'vue'
const props = withDefaults(defineProps<{
  jumpAppletSrc: string,
  jumpAppletId: string
}>(), {
	jumpAppletId: 'launchBtn'
})
const emit = defineEmits(['jumpApplet'])

onMounted(() => {
	let btn = document.getElementById(props.jumpAppletId)
	btn.addEventListener('launch', (e: any) => {
		if (e.detail) {
			emit('jumpApplet')
		}
	})
})
</script>

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐