cardLayout Miniprogram Starter

宽脉名片布局组件，

包含内容

• src/：干净的组件源码目录，当前自带一个 demo-card 示例组件。
• script/gulpfile.js：精简版构建流程，负责编译 src、同步到 miniprogram_dist，并把结果拷贝到 Demo。
• example/：最小可运行示例，会自动依赖 miniprogram_dist 中的组件。

快速开始

仓库内开发时请先在项目根目录执行 pnpm install。小程序包依赖自己的 TypeScript 版本和 miniprogram-api-typings，根 workspace 必须完成安装后再进行类型检查。

npm install
npm run dev      # 实时监听 src/ 与 example/，输出到 miniprogram_dist / example_dist
npm run build    # 进行一次完整的编译与 Demo 同步

首次或执行 npm run build 之后，将 example_dist 目录导入微信开发者工具即可预览。

开发自己的组件

1. 在 src/components 下复制 demo-card，调整文件名与实现代码。
2. 在 example/pages/home/index.json（或你自己的页面）里通过 usingComponents 引入新的组件。
3. 运行 npm run dev，组件改动会实时同步到 Demo。

文本截断说明

• src/components/card-layout/elements/text-element 的省略号渲染依赖组件内组装出的 textStyle。
• 当文本需要单行或多行省略号时，不要再通过内联样式注入 word-break: break-word，否则微信小程序会优先按任意断词布局，导致文本溢出后省略号显示异常。
• 单行省略号保持 white-space: nowrap；多行省略号继续使用 -webkit-line-clamp，只允许 word-break: break-all 参与折行。

导出空图片兜底

• src/vendor/wxml2canvas-2d 在导出名片或分享图时，会跳过 src 为空字符串、仅空白字符或缺失的图片节点。
• 这样处理是为了兼容“元素保持显示状态，但当前绑定值为空”的业务数据，避免单个空图片让整张名片导出失败。
• 该兜底只影响导出阶段的图片绘制，不会修改布局里的元素可见性，也不会改变文本、图标或分享背景图的导出逻辑。

发布流程

1. npm run build
2. 检查 miniprogram_dist（产物）与 example_dist（示例）是否符合预期。
3. miniprogram_dist 可直接发布到 npm / 私有仓库，example_dist 可作为 WeChat Demo。

下一步可以做什么？

• 增加更多组件文件夹并在 example 中编写页面示例。
• 根据项目需要扩展 script/gulpfile.js（如压缩、Less、单测等）。
• 接入你自己的发布脚本或 CI。