feat: 分享

pages/index/index.vue

 <template>
-	<view class="container">
-		<Home v-if="globalStore.curTabIndex == 0"></Home>
-		<Brand v-if="globalStore.curTabIndex == 1"></Brand>
-		<Integral v-if="globalStore.curTabIndex == 2"></Integral>
-		<My v-if="globalStore.curTabIndex == 3"></My>
-		<TabBar :curTabIndex="globalStore.curTabIndex" @tabClick="handleTabClick" />
-	</view>
+  <view class="container">
+    <Home v-if="globalStore.curTabIndex == 0" />
+    <Brand v-if="globalStore.curTabIndex == 1" />
+    <Integral v-if="globalStore.curTabIndex == 2" />
+    <My v-if="globalStore.curTabIndex == 3" />
+    <TabBar :curTabIndex="globalStore.curTabIndex" @tabClick="handleTabClick" />
+  </view>
 </template>
 
-<script>
-	import TabBar from '@/components/TabBar.vue'
-	import Home from '@/views/Home.vue';
-	import Brand from '@/views/Brand.vue';
-	import Integral from '@/views/Integral.vue';
-	import My from '@/views/My.vue';
-	import { useGlobalStore } from '@/stores/global.js';
+<script setup>
+import { ref, getCurrentInstance } from "vue";
+import { onLoad, onShareAppMessage, onShareTimeline } from "@dcloudio/uni-app";
+import TabBar from "@/components/TabBar.vue";
+import Home from "@/views/Home.vue";
+import Brand from "@/views/Brand.vue";
+import Integral from "@/views/Integral.vue";
+import My from "@/views/My.vue";
+import { useGlobalStore } from "@/stores/global.js";
 
-	export default {
-		setup() {
-			const globalStore = useGlobalStore();
-			return {
-				globalStore
-			}
-		},
-		onLoad(options) {
-			// 如果有页面参数,设置对应的tab页
-			if(options.pageType) {
+const globalStore = useGlobalStore();
+const { proxy } = getCurrentInstance();
+const $baseUrl = proxy.$baseUrl;
 
-				switch(options.pageType) {
-					case 'home':
-						this.globalStore.setCurTabIndex(0)
-						break;
-					case 'brand':
-						this.globalStore.setCurTabIndex(1)
-						break;
-					case 'integral':
-						this.globalStore.setCurTabIndex(2)
-						break;
-					case 'my':
-						this.globalStore.setCurTabIndex(3)
-						break;
-				}
+const shareOptions = {
+  0: {
+    title: "8000万中国妈妈信赖的育儿品牌",
+    path: "/pages/index/index?pageType=home",
+    imageUrl: $baseUrl + "share/share_home.png",
+  },
+  1: {
+    title: "飞鹤提供家庭营养一站式解决方案",
+    path: "/pages/index/index?pageType=brand",
+    imageUrl: $baseUrl + "share/share_brand.png",
+  },
+  2: {
+    title: "超凡吸收！更多妈妈推荐的奶粉",
+    path: "/pages/index/index?pageType=integral",
+    imageUrl: $baseUrl + "share/share_integral.png",
+  },
+};
 
-			}
-		},
-		methods: {
-			handleTabClick({
-				index,
-				item
-			}) {
-				console.log('Tab clicked:', index, item)
-				// 这里可以根据index或item进行相应的页面跳转或其他操作
-				this.globalStore.setCurTabIndex(index)
-			}
-		},
-		components: {
-			TabBar,
-			Home,
-			Brand,
-			Integral,
-			My
-		}
-	};
+function handleTabClick({ index }) {
+  globalStore.setCurTabIndex(index);
+}
+
+onLoad((options) => {
+  if (options.pageType) {
+    switch (options.pageType) {
+      case "home":
+        globalStore.setCurTabIndex(0);
+        break;
+      case "brand":
+        globalStore.setCurTabIndex(1);
+        break;
+      case "integral":
+        globalStore.setCurTabIndex(2);
+        break;
+      case "my":
+        globalStore.setCurTabIndex(3);
+        break;
+    }
+  }
+});
+
+onShareAppMessage(() => {
+  const pageType = globalStore.curTabIndex;
+  return shareOptions[pageType] || shareOptions[0];
+});
+
+onShareTimeline(() => {
+  const pageType = globalStore.curTabIndex;
+  return shareOptions[pageType] || shareOptions[0];
+});
 </script>
 
 <style lang="scss" scoped>
-	.container {
-		min-height: 100vh;
-		background-color: #f5f5f5;
+.container {
+  min-height: 100vh;
+  background-color: #f5f5f5;
 
-		.content {
-			padding-bottom: 100rpx; // 为底部TabBar留出空间
-		}
-	}
+  .content {
+    padding-bottom: 100rpx; // 为底部TabBar留出空间
+  }
+}
 
-	.content {
-		display: flex;
-		flex-direction: column;
-		align-items: center;
-		justify-content: center;
-	}
+.content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
 
-	.logo {
-		height: 200rpx;
-		width: 200rpx;
-		margin-top: 200rpx;
-		margin-left: auto;
-		margin-right: auto;
-		margin-bottom: 50rpx;
-	}
+.logo {
+  height: 200rpx;
+  width: 200rpx;
+  margin-top: 200rpx;
+  margin-left: auto;
+  margin-right: auto;
+  margin-bottom: 50rpx;
+}
 
-	.text-area {
-		display: flex;
-		justify-content: center;
-	}
+.text-area {
+  display: flex;
+  justify-content: center;
+}
 
-	.title {
-		font-size: 36rpx;
-		color: #8f8f94;
-	}
+.title {
+  font-size: 36rpx;
+  color: #8f8f94;
+}
 </style>
\ No newline at end of file