feat:V2.5.4 增加添加到我的小程序Tip

2025-12-18 09:43:27 +08:00
parent a8ed4a2cfc
commit e97dd8f159
12 changed files with 142 additions and 3 deletions
@@ -0,0 +1,69 @@
+Component({
+    options: {},
+    /**
+     * 组件的属性列表
+     */
+    properties: {},
+    /**
+     * 组件的初始数据
+     */
+    data: {
+        show: false, // 是否显示Tip
+        top: 0, // Tip距离顶部的距离
+        right: 0, // Tip距离右侧的距离
+        arrowRight: 0, // 箭头距离右侧的距离
+    },
+    /**
+     * 组件生命周期
+     */
+    lifetimes: {
+        attached() {
+            // 检查用户是否已关闭过Tip
+            const tipClosed =
+                wx.getStorageSync('addToMiniprogramTipClosed') || false;
+
+            // 如果用户未关闭过，则显示Tip
+            if (!tipClosed) {
+                this.setData({
+                    show: true,
+                });
+            }
+
+            // 获取胶囊按钮位置信息
+            const menuButtonInfo = wx.getMenuButtonBoundingClientRect();
+            const windowInfo = wx.getWindowInfo();
+            console.log('windowInfo', windowInfo);
+            console.log('menuButtonInfo', menuButtonInfo);
+            // 计算Tip的位置
+            // Tip应该在胶囊按钮下方，箭头向上指向胶囊按钮
+            const top = 10; // 胶囊按钮下方20px
+            const right = windowInfo.windowWidth - menuButtonInfo.right; // 距离右侧的距离，与胶囊按钮右对齐
+
+            // 计算箭头位置：箭头应该指向胶囊按钮的中心
+            // 胶囊按钮中心相对于Tip内容区域的右侧位置
+            const capsuleCenterX = menuButtonInfo.left + 28;
+            const tipRightEdge = windowInfo.windowWidth - right;
+            const arrowRight = tipRightEdge - capsuleCenterX; // 箭头距离Tip右侧的距离
+
+            this.setData({
+                top: top,
+                right: right,
+                arrowRight: arrowRight,
+            });
+        },
+    },
+    /**
+     * 组件的方法列表
+     */
+    methods: {
+        /** 关闭Tip */
+        onClose() {
+            // 保存关闭状态到本地存储
+            wx.setStorageSync('addToMiniprogramTipClosed', true);
+            // 隐藏Tip
+            this.setData({
+                show: false,
+            });
+        },
+    },
+});