Wix Strip图片随机器代码适配及多Strip关联配对图片触发咨询

一、官方原生随机代码适配步骤 #

你只需要修改3处代码和对应后台配置即可让原有代码正常运行：

• 先登录Wix编辑器，打开内容管理器（CMS），创建名为HomepageImages的数据集，新增类型为「图片」的image字段，把你需要在第一个Strip随机展示的所有图片上传到该数据集的对应条目里
• 选中第一个Strip内的图片组件，在右侧属性面板查看组件ID，把代码里的#image1替换为你实际的组件ID，保持#前缀不变
• 如果你的数据集命名不是HomepageImages，把代码中wixData.query("HomepageImages")引号内的内容替换为你的实际数据集名称

二、双Strip关联配对功能实现 #

要实现两个Strip的图片绑定展示，先修改数据集配置，再调整代码即可：

1. 数据集调整：在已有的HomepageImages数据集里新增类型为「图片」的pairedImage字段，给每条数据的image字段上传第一张Strip的图，pairedImage字段上传与之绑定的、要在第二个Strip展示的配对图
2. 调整后的完整代码如下：

import wixWindow from 'wix-window';
import wixData from 'wix-data';

$w.onReady(async function () {
    // 仅在浏览器端/预览模式执行，避免服务端渲染重复加载
    if (wixWindow.rendering.env === 'browser' || wixWindow.viewMode === 'Preview') {
        let res = await wixData.query("HomepageImages").find();
        let items = res.items;
        let count = items.length;
        // 随机取一条配对数据
        let rndIndex = Math.floor(Math.random() * count);
        let selectedPair = items[rndIndex];
        // 给第一个Strip的图片赋值
        $w('#image1').src = selectedPair.image;
        $w('#image1').show();
        // 给第二个Strip的配对图片赋值，把#image2替换为第二个Strip图片组件的实际ID
        $w('#image2').src = selectedPair.pairedImage;
        $w('#image2').show();
    }
});

3. 代码适配：把#image2替换为你第二个Strip内图片组件的实际ID，如果你设置的配对图片字段名不是pairedImage，把代码中对应的字段名替换即可。

三、生效注意事项 #

• 测试效果可以先切换到编辑器预览模式验证，发布前要把HomepageImages数据集的权限设置为「任何人可查看」，避免访客端无法加载图片
• 如果需要更多维度的配对内容（比如配对文案、跳转链接），只需要在数据集里新增对应字段，代码中新增对应组件的赋值逻辑即可

内容的提问来源于stack exchange，提问作者Silver Saarberg