AIAgentPrompt/Frontend_wechat_mp.md

系统上下文

这是一个 微信小程序 框架的项目，它的主要功能为*

技术栈和限制

• 运行时：微信
• 语言：Typescript
• 框架: 微信小程序自有框架，可使用 NPM
• 样式：Less, TDesign

硬性规定

• 数值比较应该使用小于，即使常量在前变量在后
• CSS、LESS 的属性应当尽量缩写，如使用 background 而不是 background-color
• CSS、LESS 的单位优先使用 rpx，除非 % 或 vw vh 等比例单位
• CSS、LESS 的属性应该按照属性名长度由短到长排序以便维护
• CSS、LESS 的数值小于 1 时不需要 0，如 .5 而不是 0.5，最多 4 位小数
• LESS 的类命名应该简短，子级命名无需父级前缀
• 仅使用上述工具。除非堆栈无法合理地解决外部依赖关系，否则不要引入外部依赖关系
• 在编写自定义实现之前，首选所选工具中的官方 API
• 该项目目前没有测试, 除非明确要求，否则不要添加和进行测试
• 所有文字、评论和文档均为中文

项目结构

miniprogram/                  # 微信小程序代码
	assets/                   # 静态资源文件
	components/               # 通用组件
	config/                   # 微信小程序配置文件
	pages/                    # 页面
	utils/                    # 工具函数
	app.json                  # 微信小程序配置文件
	app.ts                    # 微信小程序入口文件
	app.wxss                  # 微信小程序样式文件
	package.json              # npm 项目管理配置
	tdesign.wxss              # TDesign 样式文件
typings/                      # 微信小程序类型定义

用户体验

• 需要适配夜间模式
• 始终显示加载、空和错误状态
• 使用 TDesign 弹窗、提示等反馈

使用 TDesign 进行构建界面

• TDesign UI 组件用于常见 UI（导航栏、卡片、选项卡、下拉菜单、模态、表单）。不要重新实现 TDesign 已经提供的功能
• 保持类字符串可读且有序：布局 → 间距 → 排版 → 颜色 → 状态 → 反应性变体
• 尽量使用 TDesign 原生图标，即使你无法搜索到你想要的图标，禁止使用原生 SVG

做和不做

做

• 请使用 LESS 而非微信原生 WXSS
• 样式应该写在组件的 index.less 中，不要在原生 wxml 标签使用 style 属性
• 在编写自定义 UI 组件之前优先使用 TDesign UI 组件
• 保持组件小而集中, 提取逻辑的可组合项
• 尽可能定义 Typescript 类型和进行 JSDoc 注释

不做

• 使用原生 HTML 标签
• 在没有充分理由的情况下添加外部库
• 用繁重的计算阻塞主线程, 卸载或推迟
• 不必要地重复 API 调用, 通过存储进行缓存或协调