一天一个SKILL——uniapp高频页面组件化「一」:常规聊天/朋友圈/「Tab」列表详情/我的页面/图片卡片即插即用,高度自定义

之前给大家介绍了 uniapp 的请求层、页面复刻&&图片裁剪和智能拉取填充、主题系统、代码审计以及一些设计和样式规范，还包括一些常规模板组件定义化等技能。

但我总觉得还差点意思。因为当产品一下子丢给你100个原型页面时，仅仅靠 一个骨架子 和 一些 主题系统 和样式规范是远远不够的。

就像一座大楼，这些页面就是具体的具有独立功能的房间如卫生间/客厅/游戏厅/餐厅/写字间/商场等等，我们目前只有水泥/石灰/地板/家具/玻璃这些材料。

光有这些还是远远不够的，小伙伴们最迫切需要的是具体有功能的房间。

对于程序来说，就是一个个具体的页面。

但如果照葫芦画瓢，直接写100个页面，那就直接原地起飞了，瞬间脑瓜子嗡嗡的，头发嘎嘎往下掉。

古法时代，我们都不会这么干，而是找相同相似的页面，并寻找 相似的组件 如按钮等，然后写一个公共的样式和组件，瞬间轻松许多。

没得毛病，这也是今天的主题，但现在的主人公 不是当年那个苦哈哈一个字母一个字母 不分昼夜敲键盘的 苦逼老登，而是 给钱就干活/不知疲倦/高度精密的AI智能体。

AI时代，我们不仅仅抽象这些样式和组件，更要去抽象页面。

有的小伙伴可能会使用uview等一些第三方框架，古法时代，这也是我得最爱，一个组件速度嘎嘎得，但是AI 时代，我不建议使用任何第三方组件库，原因如下：

• 引入和编译效率低，需要阅读相关文档，对新手来说极度容易出错；

• 部分还有收费机制；

• 很多隐藏bug，可能找不到人维护；

• 最大问题的是：组件样式极度不自由，需要透传改样式，最后得结果是一团乱麻

自己用AI 做组件高度自由化，不需要任何引入和导出，完全掌控，这同样是我做这些技能库得一个初衷。

一、初衷

最近在写一个高度复杂糅合社交与 商城的小程序，仔细一看发现很多页面 无不是下面几大类：

• [订单/模板/方案/计划等等]列表：顶部「全部/待付款/已发货/已完成」Tab，下面一个卡片一个卡片排下去；
• [模拟微信]聊天：底部固定输入框 + 左边你的话右边我的话，我的消息主题色高亮；
• [模拟微信]朋友圈：左边头像，右边正文 + 九宫格图，右下角 ⋯ 一点开点赞评论全出来；
• [商品/模板/方案等各种]详情：头图、价格标题、规格参数……就是多张卡片从上往下排；
• [各类我的页面/设置/通知/列表项等]我的页面：顶部头像昵称，下面一项一项的列表，右边带个箭头；
• [商品/模板/方案等等]图片卡片：上面一张图，下面一行标题一行描述。

再比如这种  tab+卡片列表项得（内容丰富得卡片，一般过多需要下来分页得那种）：

我观测到上面这些页面其实雷同率和使用率特别高，很多项目都会有这些页面，当然内容不一定完全一致，比如这里面右下角有一个icon，那个 多一个 标签啥的。

但整体架构异常雷同，打个最直接的比喻——这些页面好比庞大的猫科家族，它们有虎/猫/豹/山猫/豹猫/云豹/兔狲/沙猫/狞猫/猞猁 等等，但一眼瞟上去 就感觉特别的像。

尤其是它们得神态，即使你不认识一眼看上去就很像，不同得就是 体型/肤色/叫声 以及食物等。

于是我连夜将其抽象了出来，做出了这个：uniapp-page-components-skill。一来是给自己减负，而来是服务广大小伙伴。

继续干货。

二、6 类高频页面 + 1 个托底组件

内置了 7 个页面级组件：

base-card

其中 base-card 是超级自由的空壳组件，只定义了圆角 和内外边距，完全由外部实现，小伙伴完全可以添油加醋，实现更多细节。

所有卡片类布局，圆角、内边距、背景、描边、阴影，都不用你自己写，一个 base-card 全搞定：

<base-card:radius="'var(--radius-lg)'":padding="'var(--spacing-md)'":shadow="true":clickable="true" @click="onTap"><textclass="text-h3">订单标题</text><textclass="text-body">订单描述...</text><template #footer>    <text class="text-caption">2026-08-01</text></template></base-card>

而且页面组件的入参天然包含 base-card 的全部入参——比如 tab-list-page 和 profile-page 内部就是用 base-card 做托底，你传一个 card-props 就能统一调整所有卡片的圆角/间距：

<tab-list-page :card-props="{ radius: 'var(--radius-lg)' }" ... />

三、自由化三件套：slot / 透传 / 加参数

很多组件库的页面组件是"写死的模板"，套完想改就麻烦。这个 SKILL 反着来——自由度优先：

1. 内容全走 slot

列表项、消息气泡、动态卡、分组行……全部用 slot 暴露，作用域里给你 { item, index }：

<tab-list-pagev-model="tab":tabs="tabs":list="orders" @item-click="onClick"><template #item="{ item }">    <view class="order-head">      <text class="order-no">订单号：{{ item.no }}</text>      <text class="order-status">{{ item.statusText }}</text>    </view></template></tab-list-page>

2. BaseCard 入参透传

页面组件的入参包含 BaseCard 全部入参，上面已经演示过了。

3. 想加参数？直接加

组件用的是标准 interface Props + withDefaults，你觉得缺什么，直接在组件里加一个字段：

interface Props {// ... 已有入参  showHeader?: boolean// 你新加的}

不破坏既有用法，向后兼容。

当然，单个组件不宜过于庞大，如果BaseCard拓展了几十个参数，建议让AI 复制一份得，比如Order-BaseCard ，独立拓展独立场景得空壳组件。

四、承接主题系统技能

既然前面写了那么多规范，这里自然不能忘记初心。——所有组件的颜色、字号、间距、圆角，一律用 CSS 变量（来自 uniapp-theme-skill 主题系统）：

.is-self .chat-bubble {  background: var(--color-primary);   /* 我的消息高亮主题色 */  color: var(--white);}.base-card {  border-radius: var(--radius-card);  /* 卡片圆角随主题走 */}

项目哪天想换个主色，改一处主题配置，聊天气泡、按钮、Tab 指示条、价格色……全部跟着变，根本不用去翻页面。

建议小伙伴们一定要提前安排好 主题系统  和 样式规范，也就是前面介绍的技能。

一天一个 SKILL—— 前端uni-app主题系统：主色/圆角/尺寸全局去硬编码&规范化&一键切换，换肤效率提升 10 倍

一天一个SKILL——uniapp小程序请求层完整规范！一次搞定鉴权、Mock、SSE、异常抓取、接口防抖， 业务请求效率提高88%

一天一个SKILL—— uniapp小程序开发规范！20条红线+8份详解文档，代码质量直接拉满

当然 如果没使用也没关系，可以先使用技能实现具体得组件，后期再用相关得 技能将 主题和 尺寸 等 抽离出来。

五、使用

触发词/uniapp-page-components-skill

/uniapp-page-components-skill 帮我做个聊天页 / 朋友圈 / 详情页 / 我的页面/uniapp-page-components-skill 订单列表页，底部是卡片/uniapp-page-components-skill 做一个 Tab+列表的页面/uniapp-page-components-skill 图片卡片组件 / 空卡片组件 / BaseCard

拓展 BaseCard组件示例：

空卡片组件加两个入参，一个图片开关，一个图片路径。主要控制左侧图片显示，分为左中右三部分结构，左中独立一个区域 右侧贴边是 icon区域。

上手

# 1. 把要用的组件目录复制进项目（easycom 默认规则直接生效）src/components/├── base-card/base-card.vue├── chat-page/chat-page.vue└── ...# 2. pages.json 开启自动扫描{ "easycom": { "autoscan": true } }# 3. 页面里直接用，slot 填内容<view style="height:100vh">  <chat-page :messages="messages" title="小明" @send="onSend" /></view>

每个组件都带了默认参数和默认数据——比如 Tab 分组默认给「全部/进行中/已完成」，我的页面默认给「我的订单/收货地址/设置」，底部操作栏默认给「客服/购物车/加入购物车/立即购买」。复制就能跑通，再换真实数据。

实测案例【展示一些具有相同风格的页面】：

聊天页（原图）：

聊天页(完成的效果)：

剩下的留给小伙伴们自行探索

六、技能体系

建议体系化，尤其是 uniapp-theme-skill 与 uniapp-style-skill装好，一定要先将主题搞定：

骨架(app-generate) → 规范(standard) → 主题(theme) → 视觉(style)→ 页面(本SKILL) → 数据(request) → 审计(code-audit)

配合要点：

• 页面组件里的基础 UI（Tab 栏、输入框、底部按钮）是"默认实现"，项目里已有共享组件体系的话，用 #tab / #footer / #navbar / #plus-panel 这些 slot 把共享组件塞进去就行，不重复造轮子；
• 组件只展示数据、只 emit 事件，分页、发送、点赞这类副作用全在页面层走 request 封装，组件里不许直接 uni.request；
• 长列表分页（standard 红线 R05）由页面层的 loadMore 事件承接。

七、效果对比

完事

对于 复杂的场景 和极具个性化[某个UI大师设计的]的页面 ，这个SKILL 肯定无法完全覆盖，这里只是做一个常规的抽象。

小伙伴们当然可以直接复用这个 SKILL，也可以借鉴这套"托底组件 + slot 自由填充 + 主题变量"的组件化思路，把自己项目里的高频页面沉淀成组件，越积越多、越用越顺。

后期会继续抽象出更多相关的内容，如按钮组件/自定义头部菜单组件/自定义底部菜单组件/个性化弹框/popup/input等等来组件化更多常规常用，以及极具个性化的页面，小伙伴们一定要多多关注！

喜欢的童鞋一定要多多点赞收藏！

仓库地址：https://github.com/jiushiwon/wg-skills/tree/main/uniapp-page-components-skill