AgentSkillsCN

add-miniapp-component

在 packages 下搭建新的 SmartUI 微应用组件,包括 index 文件、演示、测试,以及可选的 README。适用于用户希望添加新组件、从零开始创建组件,或搭建微应用组件时使用。

SKILL.md
--- frontmatter
name: add-miniapp-component
description: Scaffolds a new SmartUI miniapp component under packages, including index files, demo, test, and optional README. Use when the user wants to add a new component, create a component from scratch, or scaffold a miniapp component.

新增 SmartUI 组件

packages/<组件名>/ 下按本仓库约定搭好目录与文件,仅改 packages,不改 example。

步骤

1. 创建目录与基础文件

packages/<组件名>/ 下创建:

  • index.json"component": true,子组件在 usingComponents 中写相对路径,如 "smart-icon": "../icon/index"
  • index.ts:用 SmartComponent(来自 ../common/component)封装,按需从 ../mixins/ 引入
  • index.wxml:模板
  • index.less:样式(可为空)
  • 若需模板内计算再建 index.wxs仅写 ES5

2. 创建 demo

packages/<组件名>/demo/ 下创建:

  • index.jsonusingComponents 中声明本组件(如 "smart-xxx": "../index")和 demo-block"demo-block": "../../../example/components/demo-block/index"
  • index.wxml:用 <demo-block title="{{I18n.t('key')}}"> 包裹示例,文案一律用 I18n.t('key')
  • index.ts:Page 或 Component 逻辑
  • index.less:demo 用样式

3. 维护多语言

example/i18n/strings.jsonenzh 下为 demo 用到的 key 补全文案(如 basicUsagetitle 等)。

4. 添加测试

packages/<组件名>/test/ 下创建 demo.spec.ts

typescript
import path from 'path';
import simulate from 'miniprogram-simulate';

test('should render demo and match snapshot', () => {
  const id = simulate.load(path.resolve(__dirname, '../demo/index'), {
    rootPath: path.resolve(__dirname, '../../'),
  });
  const comp = simulate.render(id);
  comp.attach(document.createElement('parent-wrapper'));
  expect(comp.toJSON()).toMatchSnapshot();
});

执行 yarn test,必要时 npx jest -u 生成/更新快照。

5. 可选:README

新增或后续补全 README.mdREADME.en.md,结构参考同仓库其他组件(引入方式、代码演示、API)。README 内示例按中/英区块书写,不调用 I18n。

检查清单

  • 仅修改了 packages/<组件名>/,未改 example 业务代码
  • index.jsonusingComponents 路径正确
  • demo 文案均用 I18n.t('key'),且 key 已在 example/i18n/strings.json 的 en/zh 中维护
  • 存在 test/demo.spec.tsyarn test 通过(含快照)