vue3中使用wx-open-launch-weapp

最新推荐文章于 2025-02-05 17:30:01 发布

VirtuousIntro

最新推荐文章于 2025-02-05 17:30:01 发布

阅读量3.2k

点赞数 1

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/qq_40039641/article/details/131396760

版权

文章展示了如何在Vue项目中使用Vite配置处理wx-open-launch-weapp组件，以便在页面上创建一个跳转到小程序的按钮。通过在main.ts和vite.config.ts中设置编译选项，并在模板中定义组件和事件监听，当用户点击按钮时触发小程序跳转事件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先在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>