feat: 添加微信小程序跳转功能及相关配置

- 新增微信开放标签 wx-open-launch-app 支持
- 更新 Vite 配置以识别微信自定义标签
- 添加侧边栏小程序跳转按钮及背景图片
- 调整首页布局和背景图片
- 更新微信 JS-SDK 配置添加 openTagList
This commit is contained in:
maclien
2025-07-24 21:42:24 +08:00
parent f4d23e0083
commit da92a510db
6 changed files with 26 additions and 5 deletions
Binary file not shown.

After

Width:  |  Height:  |  Size: 100 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.8 KiB

+14 -1
View File
@@ -1,5 +1,5 @@
<template>
<div class="side-menu fixed z-index-1 bottom-0 right-0 mb50 mr30">
<div class="side-menu fixed z-index-1 bottom-0 right-0 mb50 mr30 fn-flex fn-flex-center fn-flex-column">
<ul class="ulib-r750 bg-000-op60 text-center">
<li class="" v-for="(item, index) in menuItems" :key="index" >
<template v-if="name">
@@ -20,6 +20,14 @@
</template>
</li>
</ul>
<div v-if="route.path=='/'" class="mt20 imgsize-100X100 text-center font-24 pos-rel">
<img src="@/assets/side-link.png" alt="">
<wx-open-launch-app id="launch-btn" :appid="third_mp.appId" :username="third_mp.username" :path="third_mp.path" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;">
<component :is="'script'" type="text/wxtag-template">
<div class="btn" style="position: absolute;top: 0;left: 0;width: 100%;height: 100%;opacity: 0;">打开小程序</div>
</component>
</wx-open-launch-app>
</div>
</div>
</template>
@@ -36,6 +44,11 @@ const menuItems = [
{ name: '首页', icon: 'icon-custom icon-home', path: '/' },
{ name: '我的', icon: 'icon-custom icon-my', path: '/my' }
]
const third_mp = {
appId: 'wx740f441fe242082c',
username: 'gh_abd358c96583',
path: '/pages/guide/localPolicy'
}
</script>
<style>
+3 -2
View File
@@ -6,10 +6,11 @@
<transition name="fade">
<div v-if="!is_first_load" class="home-page relative" style="min-height: 100vh;">
<div class="home-bg absolute left-0 top-0 right-0 bottom-0" ></div>
<div :style="'padding-top:'+(370/7.5)+'vw;'"></div>
<div v-if="cityInfo&&cityInfo.cityName" class="absolute right-0 top-0 mr30 mt50 z-index-1">
<div @click.stop="handleShowCityList" class="bg-fff font-24 pl15 pr15 pt10 pb10 ulib-r10">{{ cityInfo.cityName }}<van-icon name="play" /></div>
</div>
<div class="relative pt220 ml30 mr30">
<div class="relative ml30 mr30">
<div class="home-options bg-fff ulib-r20 inner30">
<div class="home-step-bg"></div>
@@ -535,7 +536,7 @@ const getCityBrands = async () => {
background-size: 100% auto;
background-position: top center;
background-repeat: no-repeat;
background-image: url('/src/assets/index-bg.jpg')
background-image: url('/src/assets/index-bg-0724.jpg')
}
.home-step-bg{
width: 630px;
+2 -1
View File
@@ -123,7 +123,8 @@ export const WechatJSSDK = {
timestamp: config.timestamp,
nonceStr: config.nonceStr,
signature: config.signature,
jsApiList: config.jsApiList
jsApiList: config.jsApiList,
openTagList: ['wx-open-launch-app']
});
window.wx.ready(() => {
+7 -1
View File
@@ -10,7 +10,13 @@ export default defineConfig({
'@': '/src' // Map '@' alias to 'src' directory
}
},
plugins: [vue()],
plugins: [vue({
template: {
compilerOptions: {
isCustomElement: (tag) => tag.startsWith('wx-')
}
}
})],
css: {
postcss: {
plugins: [