vue3中使用wx-open-launch-weapp
vue3中公众号跳转小程序的开放标签使用
·
首先在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>
更多推荐
已为社区贡献1条内容
所有评论(0)