H5利用微信开放标签唤起用户手机APP

本文主要是介绍H5利用微信开放标签唤起用户手机APP，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

APP壳子分享网页到微信，被分享人在微信打开网页后，利用公众号配置微信开放标签['wx-open-launch-app']，实现唤起APP

一、Vue2.x（2.6.11）

1. main.js

// main.jsimport Vue from 'vue';Vue.config.ignoredElements = ['wx-open-launch-app'];

2. awakeByWeChat.vue

// awakeByWeChat.vue
<template><wx-open-launch-appid="launch-btn":appid="公众号ID":extinfo="唤起app传递的参数"@error="onListenLaunchError"><script type="text/wxtag-template"><style>* {margin: 0;padding: 0;}button:focus {outline: none;}.defaultBtn {border: 0;height: 500px;outline: none;margin: 0 auto;font-weight: 500;}{{ btnStyle }}</style><button class="defaultBtn openBtn">{{ btnName }}</button></script></wx-open-launch-app>
</template><script>
export default {name: 'aweakAppByWeChat',props: {btnStyle: String, // 自定义按钮样式 `.btnClass{xx}`btnName: {type: String,default: '立即打开' // 自定义按钮名称}},data() {return {wxAppId: '',targetInfo: null, // 传递参数，格式需为字符串};},methods: {// wx 唤起失败异常处理, 降级处理跳转onListenLaunchError(e) {console.log('wx唤醒失败 | error', e.detail || e);this.$emit('launchError');}}
};
</script><style lang="less" scoped>
#launch-btn {position: absolute;top: 0;left: 0;right: 0;bottom: 0;opacity: 0;width: 100%;height: 100%;z-index: 99999;
}
</style>

二、Vue3.x（3.4.21）

1.main.js

// main.jsimport { createApp } from 'vue'const app = createApp(App)
app.config.compilerOptions.isCustomElement = (tag) => (tag.includes('wx-open-launch-app'))

2.vite.config.js

// vite.config.js
import { defineConfig } from 'vite'export default defineConfig({base: './',define: {__VUE_OPTIONS_API__: true // 关闭vue2中的 api属性},plugins: [vue({template: {compilerOptions: {isCustomElement: (tag:any) => tag.includes('wx-open-launch-app')}}})]
})

3.awakeByWeChat.vue

//awakeByWeChat.vue<template><wx-open-launch-appid="launch-btn":appid="props.wxId":extinfo="props.extinfo"@error="onListenLaunchError"><component :is="'script'" type="text/wxtag-template"><buttonstyle="display: block;border: 0;width: 100%;height: 500px;outline: none;margin: 0 auto;font-weight: 500;">{{ customName || "打开APP查看" }}</button></component></wx-open-launch-app>
</template><script lang="ts" setup>
const props = defineProps({wxId: {type: String,required: true,},extinfo: String,customName: String
});const emit = defineEmits(["launchError"]);const onListenLaunchError = (e) => {emit("launchError");console.log("WX唤起失败：", e.detail || e);// 执行降级操作
};
</script><style scoped lang="scss">
#launch-btn {position: absolute;top: 0;left: 0;right: 0;bottom: 0;opacity: 0;width: 100%;height: 100%;z-index: 99999;
}
</style>

这篇关于H5利用微信开放标签唤起用户手机APP的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---