Просмотр исходного кода

优化视频分享功能,新增分享按钮点击事件,更新分享逻辑以包含视频标题和标签ID,提升用户体验。同时调整样式以增强分享按钮的可见性和交互性。

yangwenlan 1 год назад
Родитель
Сommit
650db881f1

+ 49 - 16
pages/video/detail.js

@@ -352,34 +352,67 @@ Page({
     wx.navigateBack();
   },
   
-  // 分享功能
-  onShare() {
-    wx.showShareMenu({
-      withShareTicket: true,
-      menus: ['shareAppMessage', 'shareTimeline']
-    });
+  // 分享按钮点击事件
+  onShareTap(e) {
+    // 阻止事件冒泡
+    e.stopPropagation();
   },
-  
+
   // 分享给朋友
-  onShareAppMessage() {
-    const videoInfo = this.data.videoInfo;
-    if (!videoInfo) return {};
+  onShareAppMessage(e) {
+    // 如果是从推荐视频分享
+    if (e.target && e.target.dataset.video) {
+      const video = e.target.dataset.video;
+      return {
+        title: video.title,
+        path: `/pages/video/detail?id=${video.id}&title=${encodeURIComponent(video.title)}&tag_id=${video.tag_ids[0]}`,
+        imageUrl: video.cover_image,
+        success: function(res) {
+          wx.showToast({
+            title: '分享成功',
+            icon: 'success',
+            duration: 1500
+          });
+        },
+        fail: function(res) {
+          wx.showToast({
+            title: '分享失败',
+            icon: 'none',
+            duration: 1500
+          });
+        }
+      };
+    }
     
+    // 默认分享当前视频
+    const videoInfo = this.data.videoInfo;
     return {
       title: videoInfo.title,
-      path: `/pages/video/detail?id=${videoInfo.id}`,
-      imageUrl: videoInfo.cover
+      path: `/pages/video/detail?id=${videoInfo.id}&title=${encodeURIComponent(videoInfo.title)}&tag_id=${videoInfo.tag_ids[0]}`,
+      imageUrl: videoInfo.cover,
+      success: function(res) {
+        wx.showToast({
+          title: '分享成功',
+          icon: 'success',
+          duration: 1500
+        });
+      },
+      fail: function(res) {
+        wx.showToast({
+          title: '分享失败',
+          icon: 'none',
+          duration: 1500
+        });
+      }
     };
   },
-  
+
   // 分享到朋友圈
   onShareTimeline() {
     const videoInfo = this.data.videoInfo;
-    if (!videoInfo) return {};
-    
     return {
       title: videoInfo.title,
-      query: `id=${videoInfo.id}`,
+      query: `id=${videoInfo.id}&title=${encodeURIComponent(videoInfo.title)}&tag_id=${videoInfo.tag_ids[0]}`,
       imageUrl: videoInfo.cover
     };
   },

+ 9 - 1
pages/video/detail.wxml

@@ -82,7 +82,15 @@
             </view>
   
             <view class="video-item-title">{{ item.title }}</view>
-           
+            <view class="share-button" catchtap="onShareTap">
+              <image
+                class="share-icon"
+                src="/assets/images/icons/icon-wechat.png"
+                catchtap="onShareTap"
+              ></image>
+              <text>分享</text>
+              <button class="share-cover-button" open-type="share" data-video="{{ item }}" catchtap></button>
+            </view>
           </view>
         </block>
       </view>

+ 76 - 7
pages/video/detail.wxss

@@ -470,20 +470,89 @@ page {
   right: 20rpx;
   bottom: 20rpx;
   display: flex;
-  flex-direction: column;
+  flex-direction: row;
   align-items: center;
   justify-content: center;
-  display: none;
+  background: #07c160;
+  border-radius: 40rpx;
+  padding: 7rpx 20rpx;
   z-index: 3;
+  border: 2rpx solid #fff;
 }
 
 .share-icon {
-  width: 50rpx;
-  height: 50rpx;
-  margin-bottom: 6rpx;
+  width: 48rpx;
+  height: 48rpx;
+  margin-right: 8rpx;
 }
 
 .share-button text {
-  font-size: 22rpx;
-  color: #07c160;
+  font-size: 28rpx;
+  color: #fff;
+  font-weight: 500;
+}
+
+.share-cover-button {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  opacity: 0;
+  z-index: 4;
+  padding: 0;
+  margin: 0;
+  border: none;
+  background: transparent;
+}
+
+.share-cover-button::after {
+  display: none;
+}
+
+/* 视频列表样式 */
+.video-list {
+  padding: 20rpx;
+}
+
+.video-item {
+  position: relative;
+  margin-bottom: 20rpx;
+  border-radius: 12rpx;
+  overflow: hidden;
+  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
+}
+
+.video-item::before {
+  content: "";
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.4);
+  z-index: 2;
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+
+.video-cover-container {
+  width: 100%;
+  height: 380rpx;
+}
+
+.video-cover {
+  width: 100%;
+  height: 100%;
+}
+
+.video-item-title {
+  position: absolute;
+  top: 20rpx;
+  left: 20rpx;
+  font-size: 42rpx;
+  font-weight: bold;
+  color: #fff;
+  margin-bottom: 10rpx;
+  display: -webkit-box;
+  width: 95%;
+  z-index: 3;
 }

+ 44 - 0
pages/video/video.js

@@ -357,5 +357,49 @@ Page({
         this.loadVideoList().then(() => {
             wx.stopPullDownRefresh()
         })
+    },
+
+    // 分享按钮点击事件
+    onShareTap(e) {
+        // 阻止事件冒泡
+        e.stopPropagation();
+    },
+
+    // 分享给朋友
+    onShareAppMessage(e) {
+        const video = e.target.dataset.video
+        if (!video) return {}
+        
+        return {
+            title: video.title,
+            path: `/pages/video/detail?id=${video.id}&title=${encodeURIComponent(video.title)}&tag_id=${video.tag_ids[0]}`,
+            imageUrl: video.cover_image,
+            success: function(res) {
+                wx.showToast({
+                    title: '分享成功',
+                    icon: 'success',
+                    duration: 1500
+                })
+            },
+            fail: function(res) {
+                wx.showToast({
+                    title: '分享失败',
+                    icon: 'none',
+                    duration: 1500
+                })
+            }
+        }
+    },
+
+    // 分享到朋友圈
+    onShareTimeline(e) {
+        const video = e.target.dataset.video
+        if (!video) return {}
+        
+        return {
+            title: video.title,
+            query: `id=${video.id}&title=${encodeURIComponent(video.title)}&tag_id=${video.tag_ids[0]}`,
+            imageUrl: video.cover_image
+        }
     }
 }) 

+ 3 - 1
pages/video/video.json

@@ -2,5 +2,7 @@
   "navigationStyle": "custom",
   "enablePullDownRefresh": true,
   "backgroundTextStyle": "dark",
-  "usingComponents": {}
+  "usingComponents": {},
+  "enableShareAppMessage": true,
+  "enableShareTimeline": true
 } 

+ 4 - 2
pages/video/video.wxml

@@ -51,12 +51,14 @@
 
             <view class="video-title">{{ item.title }}</view>
             <view class="video-play-count">{{ item.views }}w+人播放</view>
-            <view class="share-button">
+            <view class="share-button" catchtap="onShareTap">
               <image
                 class="share-icon"
-                src="/assets/images/icons/refresh.png"
+                src="/assets/images/icons/icon-wechat.png"
+                catchtap="onShareTap"
               ></image>
               <text>分享</text>
+              <button class="share-cover-button" open-type="share" data-video="{{ item }}" catchtap></button>
             </view>
           </view>
         </view>

+ 29 - 7
pages/video/video.wxss

@@ -167,22 +167,44 @@
   right: 20rpx;
   bottom: 20rpx;
   display: flex;
-  flex-direction: column;
+  flex-direction: row;
   align-items: center;
   justify-content: center;
-  display: none;
+  background: #07c160;
+  border-radius: 40rpx;
+  padding: 7rpx 20rpx;
   z-index: 3;
+  border: 2rpx solid #fff;
 }
 
 .share-icon {
-  width: 50rpx;
-  height: 50rpx;
-  margin-bottom: 6rpx;
+  width: 48rpx;
+  height: 48rpx;
+  margin-right: 8rpx;
 }
 
 .share-button text {
-  font-size: 22rpx;
-  color: #07c160;
+  font-size: 28rpx;
+  color: #fff;
+  font-weight: 500;
+}
+
+.share-cover-button {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  opacity: 0;
+  z-index: 4;
+  padding: 0;
+  margin: 0;
+  border: none;
+  background: transparent;
+}
+
+.share-cover-button::after {
+  display: none;
 }
 
 /* 加载状态样式 */