运营模块组件

运营模块包含 3 个组件，适用于 应用首页、功能页面、自定义页面。

运营模块包含 3 个组件：首页榜单（xiaoyi-home-rank-cards）、双卡行动（xiaoyi-dual-action-cards）、小程序广告（xiaoyi-mp-ad）。适用于应用首页、功能页面、自定义页面。服务表单页不可用。

UI管理 → 页面配置 → 设计 → 运营模块·运营 / UI 编辑人员

移动端宽度与左右留白

灵萌客户端基于 uni-app，移动端设计稿逻辑宽度为 750rpx，编辑器画布预览与真机一致。

只需设置宽度与左边距即可，不必再单独填右边距。适用于卡片、轮播、图片等需要距屏幕边缘一点距离的块级组件。

• 750rpx = 屏幕逻辑全宽
• 若希望组件两侧留空且整体居中：在样式 Tab 将宽度设为 720rpx，左边距设为 15rpx
• 720 + 15 + 15 = 750，即左右各 15rpx 边距

保存 → 启用 → 客户端验证

画布内改完不等于对用户生效，须按顺序完成以下三步。

多区域部署时，列表顶栏「区域筛选」决定配置归属；客户端区域不一致时会出现「保存了但 App 没变化」。

1. 1
   保存顶栏点击「保存」，可选勾选更新列表封面图
2. 2
   启用返回 UI管理 → 页面配置列表，对目标配置点击「启用」
3. 3
   客户端验证App 切换到与编辑时相同的区域，查看真实效果（工具栏预览仅为截图）

通用说明

运营模块组件仅 home / feature / custom 页面可添加；圈子页与服务表单页不可用。

接口数据类组件（如首页榜单）在编辑器画布显示演示数据，真实榜单须在客户端验证。

样式与点击动作文档

首页榜单（xiaoyi-home-rank-cards）

横向滑动的三榜卡片：热帖榜、话题榜、优质用户榜。支持静态配置或区域发现接口。

• 仅 home / feature / custom 页面可添加
• 接口模式下，编辑器画布仍显示演示数据，须保存后在客户端验证
• 榜单 type 对应：热帖 note、话题 topic、优质 user

1. 1
   添加组件左侧运营模块 → 首页榜单（xiaoyi-home-rank-cards）
2. 2
   选数据来源「使用接口数据」开启则客户端请求接口；关闭则用静态配置行
3. 3
   配置各榜启用热帖/话题/优质榜，设标题、顺序 order、每类展示条数
4. 4
   配置点击动作为卡片级、行级分别设置跳转（话题详情、用户主页等）
5. 5
   保存并验收保存 → 启用 → App 验证三榜数据与横滑、点击跳转

什么时候用首页/发现页展示热帖、热门话题、优质用户三榜；适合放在 Feed 列表上方的运营位

使用接口数据开启后用户端请求接口；关闭则用静态配置

跟随当前区域 / 固定 region_id为是时传用户当前区域 ID；留空=全站

接口 limit四段数据各取 Top N，服务端上限 50；默认 10

总开关 / 每类条数 limit显示/隐藏整个榜单区域；卡片内展示行数默认 3

滑动提示显示提示、提示文案、字号/字重/颜色

卡片外观卡片间距 20rpx、卡片圆角 24rpx

各榜（热帖/话题/优质）启用、顺序 order、标题文案、标题图标名/大小/颜色

点击动作话题榜卡片/热帖榜卡片/优质榜卡片；话题行/热帖行/优质用户行

编辑器数据和线上一致吗不一致 — 接口模式下画布为演示；线上按发现接口拉取 Top N。

某榜不显示检查该榜「启用」开关；或接口返回空 — 确认区域内有足够内容。

点了某行没跳转未配置行级点击动作 — 属性里分别为热帖行/话题行/优质用户行配置。

双卡行动（xiaoyi-dual-action-cards）

左右两张行动卡片并排展示，引导用户完成两个并列操作。两卡宽度按 flex 比例分配。

• 仅 home / feature / custom 页面可添加
• 左、右卡气泡内容为图标或图片二选一，不可同时生效

1. 1
   添加组件左侧运营模块 → 双卡行动（xiaoyi-dual-action-cards）
2. 2
   配置左卡背景、气泡（图标或图片二选一）、标题/描述、leftClickAction
3. 3
   配置右卡同上；右卡可额外配右侧插图 URL 与尺寸
4. 4
   保存并验收保存 → 启用 → App 分别点击左右卡验证跳转

什么时候用两个并列引导（如「发帖」+「找搭子」、「买」+「卖」）；适合金刚区下方的行动区

布局两卡间距 12rpx、单卡内边距 24rpx、左卡宽度占比 42、右卡 58

左卡 / 右卡背景色/圆角、气泡内容（图标或图片二选一）、标题/描述、字号/颜色/字重

右卡额外右侧插图 URL、插图宽/高/圆角、文与图间距

气泡公共气泡背景、内边距/圆角、气泡内图标字号

点击动作leftClickAction / rightClickAction

气泡图标和图片同时显示二选一 — 同时填写时建议只保留一种，避免叠压。

左右卡点了没反应分别检查 leftClickAction / rightClickAction 是否已配置。

右卡插图被裁切调插图宽高与圆角；插图 URL 须为有效公网地址。

小程序广告（xiaoyi-mp-ad）

插入微信小程序流量主广告；H5/App 端展示占位图。

unit-id 须在微信公众平台流量主后台创建广告位后获取。未开通流量主时小程序端无广告展示。

• 仅 home / feature / custom 页面可添加
• unit-id 仅影响微信小程序端；H5/App 始终显示占位图

1. 1
   创建广告位微信公众平台 → 流量主 → 创建广告位，获取 unit-id
2. 2
   添加组件左侧运营模块 → 小程序广告（xiaoyi-mp-ad）
3. 3
   填写 unit-id属性 Tab 填入广告单元 ID；配置占位图（H5/App 用）
4. 4
   保存并验收保存 → 启用 → 微信小程序端验证广告展示（H5/App 看占位图）

什么时候用首页/功能页底部或模块间插入变现广告；仅微信小程序端展示真实广告

广告位 unit-id流量主后台获取的广告单元 ID（小程序端必填）

自动刷新间隔（秒）0 表示不刷新；≥30 才生效

占位图 — 图片地址 / 显示模式 / 高度 / 圆角H5/App 端展示；widthFix 等

占位图点击动作H5/App 端点击占位图时的跳转（不作用于微信小程序原生广告）

小程序里广告不显示未开通流量主、unit-id 错误或审核未通过 — 检查微信后台广告位状态。

H5 里看到占位图正常吗正常 — 原生广告仅微信小程序端生效，H5/App 显示占位图。

自动刷新不生效间隔须 ≥30 秒；填 0 表示不自动刷新。

相关文档

表单/服务组件