Wix Repeater 中的 YouTube 视频填充难题：详细指南

在 WIX Repeater 中填充 YouTube 视频

问题

许多人都在 Wix 平台上开发网站时遇到这样一个难题：如何将 YouTube 视频填充到 Wix Repeater 中。它涉及通过 API 调用从 YouTube 播放列表中获取视频数据，但许多人在这方面遇到了困难。

解决方法

步骤 1：引入 Wix 数据模块

首先，你需要通过添加以下行将 Wix 数据模块导入你的脚本：

import wixData from 'wix-data';

步骤 2：设置变量和常量

然后，你需要设置一些变量和常量：

• ITEMS_PER_PAGE：每页要加载的视频数量。
• currentPage：当前页码。
• isLoading：指示是否正在加载视频的布尔值。
• DEBUG_MODE：启用或禁用调试日志的布尔值。

步骤 3：在页面加载时加载更多视频

在页面加载时，调用 loadMoreVideos() 函数开始加载视频。

步骤 4：创建 Repeater 数据数组

创建并初始化一个空数组 $w('#repeater1').data = [];。

步骤 5：处理 Repeater 项就绪事件

添加 onItemReady 事件处理程序 $w('#repeater1').onItemReady(repeater1_itemReady);。

步骤 6：在 Repeater 项就绪时填充数据

在 repeater1_itemReady 函数中，填充 text1、text2 和 imageX1 控件。

步骤 7：获取 YouTube 数据

在 loadMoreVideos 函数中，通过调用 YouTube Data API 获取播放列表数据。

步骤 8：解析并格式化数据

使用 data.items.map() 函数解析和格式化 YouTube 数据，创建视频对象。

步骤 9：附加视频到 Repeater 数据

将新视频对象附加到 Repeater 数据中 $w('#repeater1').data = currentData.concat(videos);。

步骤 10：增加当前页码

更新 currentPage 以跟踪当前页码 currentPage++;。

完整代码示例

$w.onReady(function () {
    loadMoreVideos();
    $w('#repeater1').data = [];
    $w('#repeater1').onItemReady(repeater1_itemReady);
});

async function loadMoreVideos() {
    if (!isLoading) {
        isLoading = true;
        try {
            const response = await fetch(`https://www.googleapis.com/youtube/v3/playlistItems?part=snippet&playlistId=YOUR_PLAYLIST_ID&key=YOUR_YOUTUBE_API_KEY&maxResults=10&startIndex=${(currentPage - 1) * 10}`);
            const data = await response.json();
            if (data.items) {
                const videos = data.items.map(item => ({
                    videoId: item.snippet.resourceId.videoId,
                    title: item.snippet.title,
                    thumbnailUrl: item.snippet.thumbnails.default.url
                }));
                $w('#repeater1').data = $w('#repeater1').data.concat(videos);
                currentPage++;
            }
        } catch (error) {
            console.error('Error loading videos:', error);
        }
        isLoading = false;
    }
}

function repeater1_itemReady($item, itemData, index) {
    $item('#text1').text = `https://www.youtube.com/watch?v=${itemData.videoId}`;
    $item('#text2').text = itemData.title;
    $item('#imageX1').src = itemData.thumbnailUrl;
}

常见问题解答

1. 如何更改加载的视频数量？

调整 ITEMS_PER_PAGE 常量的值即可。

2. 如何启用调试日志？

将 DEBUG_MODE 常量设置为 true。

3. 如何获取更多 YouTube 数据，比如视频或发布日期？

修改 API 调用以请求更多字段，例如：https://www.googleapis.com/youtube/v3/playlistItems?part=snippet,contentDetails&playlistId=YOUR_PLAYLIST_ID&key=YOUR_YOUTUBE_API_KEY&maxResults=10&startIndex=${(currentPage - 1) * 10}。

4. 如何在加载视频时显示加载指示符？

可以使用 show() 和 hide() 函数在加载视频时控制加载指示符的可见性。

5. 如何在 Wix Repeater 中播放视频？

在 Wix Repeater 中播放视频需要使用视频播放器组件，并使用 itemData.videoId 值作为视频源。