From cf2b125910a9971cbbb1d1b5fc522bf4ef1007f1 Mon Sep 17 00:00:00 2001 From: Timi Date: Fri, 5 Dec 2025 10:53:40 +0800 Subject: [PATCH] add wechat mp prompt --- Frontend_wechat_mp.md | 69 +++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 69 insertions(+) create mode 100644 Frontend_wechat_mp.md diff --git a/Frontend_wechat_mp.md b/Frontend_wechat_mp.md new file mode 100644 index 0000000..42ac37e --- /dev/null +++ b/Frontend_wechat_mp.md @@ -0,0 +1,69 @@ +## 系统上下文 + +这是一个 微信小程序 框架的项目，它的主要功能为记录情侣的私有旅行日记，日记包含照片、视频和普通文本，功能为上传、归档，以及未来旅行计划管理 + +## 技术栈和限制 + +- 运行时：微信 +- 语言：Typescript +- 框架: 微信小程序自有框架，可使用 NPM +- 样式：Less, TDesign + +## 硬性规定 + +- 数值比较应该使用小于，即使常量在前变量在后 +- CSS、LESS 的属性应当尽量缩写，如使用 background 而不是 background-color +- CSS、LESS 的单位优先使用 rem，除非 % 或 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 调用, 通过存储进行缓存或协调