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,4 @@
+{
+    "component": true,
+    "usingComponents": {}
+}
@@ -0,0 +1,44 @@
+.add-to-miniprogram-tip {
+    position: fixed;
+    z-index: 9999;
+    pointer-events: none; // 让点击事件穿透到内容区域
+
+    .tip-content {
+        background: rgba(0, 0, 0, 0.8);
+        border-radius: 12rpx;
+        padding: 24rpx 32rpx;
+        display: flex;
+        align-items: center;
+        gap: 24rpx;
+        max-width: 600rpx;
+        pointer-events: auto; // 内容区域可以点击
+        box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.3);
+        position: relative;
+    }
+
+    .tip-text {
+        font-size: 26rpx;
+        color: #ffffff;
+        line-height: 1.5;
+        flex: 1;
+    }
+
+    .tip-close {
+        font-size: 26rpx;
+        color: #07c160;
+        font-weight: 500;
+        white-space: nowrap;
+        cursor: pointer;
+    }
+
+    .tip-arrow {
+        position: absolute;
+        top: -15rpx;
+        width: 0;
+        height: 0;
+        border-left: 12rpx solid transparent;
+        border-right: 12rpx solid transparent;
+        border-bottom: 16rpx solid rgba(0, 0, 0, 0.8);
+        pointer-events: none;
+    }
+}
@@ -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,
+            });
+        },
+    },
+});
@@ -0,0 +1,12 @@
+<view
+    class="add-to-miniprogram-tip"
+    wx:if="{{show}}"
+    style="top: {{top}}px; right: {{right}}px;">
+    <!-- 三角形箭头 -->
+    <view class="tip-arrow" style="right: {{arrowRight}}px;"></view>
+    <!-- Tip内容 -->
+    <view class="tip-content">
+        <view class="tip-text">点击上方添加到我的小程序，方便下次使用！</view>
+        <view class="tip-close" bind:tap="onClose">关闭</view>
+    </view>
+</view>