card-layout-miniprogram

一个参考 tdesign-miniprogram 目录结构的卡片组件库。可在本仓库直接调试，也可通过 npm 发布供其它小程序引用。

目录结构

card-layout-miniprogram/
├── miniprogram/                # 组件源码（发布产物）
│   ├── components/
│   │   └── card-tag/           # 示例组件
│   └── app.json/app.js/...     # 直接在目录下调试需要的最小工程
├── example/                    # 引用组件库的示例小程序，方便本地测试
├── types/                      # 类型声明
├── package.json
├── tsconfig.json
└── README.md

本地开发

1. pnpm install 安装依赖。
2. 在 miniprogram/components 下新增组件（参考 card-tag）。逻辑写在 .ts 中，运行 pnpm run build 编译为 .js。
3. 直接使用 微信开发者工具 打开 packages/card-layout-miniprogram/miniprogram 或 packages/card-layout-miniprogram/example 目录，即可预览组件。

npm 发布流程

1. 更新 package.json 的 version 等信息。
2. 执行 pnpm run clean && pnpm run build，确保产物最新。
3. npm login（如未登录），然后 npm publish --access public。
4. 业务小程序中 npm install card-layout-miniprogram 后，在页面 usingComponents 中引用：

{
  "usingComponents": {
    "card-tag": "card-layout-miniprogram/miniprogram/components/card-tag/card-tag"
  }
}

构建 npm 后即可在 WXML 使用 <card-tag text="重要" />。

示例组件：card-tag

用于在卡片上展示状态或标签，提供 text、theme、round 三个属性，可按需扩展其它组件。