TNote 微信小程序

TNote 是一个简洁高效的笔记微信小程序，支持快速记录和管理您的想法。

📱 功能特性

• ✅ 快速创建和编辑笔记
• ✅ 实时自动保存
• ✅ 响应式设计，适配各种设备
• ✅ 组件化架构，易于维护
• ✅ 统一的设计令牌系统
• ✅ TypeScript 支持（可选）

🏗️ 项目结构

TNote/
├── app.js                        # 小程序入口文件
├── app.json                      # 小程序全局配置
├── app.wxss                      # 全局样式
├── pages/                        # 页面目录
│   ├── home/                     # 首页
│   │   ├── home.js
│   │   ├── home.json
│   │   ├── home.wxml
│   │   └── home.wxss
│   └── detail/                   # 详情页
│       ├── detail.js
│       ├── detail.json
│       ├── detail.wxml
│       └── detail.wxss
├── components/                   # 组件目录
│   └── ui/                       # UI 组件
│       ├── Button/               # 按钮组件
│       │   ├── index.js
│       │   ├── index.json
│       │   ├── index.wxml
│       │   └── index.wxss
│       └── Card/                 # 卡片组件
│           ├── index.js
│           ├── index.json
│           ├── index.wxml
│           └── index.wxss
├── styles/                       # 样式系统
│   ├── tokens.wxss               # 设计令牌
│   ├── mixins.wxss               # 工具类
│   ├── typography.wxss           # 字体排版
│   └── utilities.wxss            # 通用工具类
├── assets/                       # 静态资源
│   └── icons/                    # 图标文件
│       ├── home.png
│       ├── home-active.png
│       ├── profile.png
│       └── profile-active.png
├── design/                       # 设计文件目录
├── project.config.json           # 微信小程序项目配置
├── sitemap.json                  # 站点地图配置
├── package.json                  # Node.js 依赖配置
├── .eslintrc.cjs                 # ESLint 配置
├── .prettierrc                   # Prettier 配置
├── .editorconfig                 # 编辑器配置
└── README.md                     # 项目说明文档

🚀 快速开始

1. 导入微信开发者工具

1. 下载并安装 微信开发者工具
2. 打开微信开发者工具
3. 选择「导入项目」
4. 填写项目信息：
   • 项目目录：选择本项目的根目录
   • AppID：选择「测试号」或填入您的小程序 AppID
   • 项目名称：TNote
5. 点击「导入」

2. 预览和调试

• 本地预览：在微信开发者工具中点击「预览」按钮
• 真机调试：点击「真机调试」按钮，用手机扫码
• 模拟器：直接在开发者工具中的模拟器中查看效果

3. 开发环境配置（可选）

如果需要使用代码格式化和 lint 功能：

# 安装依赖
npm install

# 代码格式化
npm run format

# 代码检查
npm run lint

# 修复可自动修复的代码问题
npm run lint:fix

🎨 设计系统

设计令牌

项目采用统一的设计令牌系统，定义在 src/styles/tokens.wxss 中：

• 颜色系统：主色、辅助色、功能色、中性色
• 字体系统：字号、字重、行高
• 间距系统：基于 8rpx 的间距标准
• 圆角系统：统一的圆角规范
• 阴影系统：多层次阴影效果

工具类

提供丰富的工具类，包括：

• Flexbox 布局
• 间距控制
• 文本样式
• 背景和边框
• 响应式工具

📦 组件库

UI 组件

• Button：多种样式和尺寸的按钮组件
• Card：卡片容器组件

使用示例

<!-- 使用按钮组件 -->
<ui-button type="primary" size="medium" bindtap="handleClick">
  点击按钮
</ui-button>

<!-- 使用卡片组件 -->
<ui-card title="标题" subtitle="副标题" icon="📝">
  卡片内容
</ui-card>

🛠️ 开发规范

代码风格

• 使用 2 个空格缩进
• 使用单引号
• 不使用分号
• 遵循 ESLint 和 Prettier 配置

命名规范

• 文件名：使用 kebab-case（短横线命名）
• 组件名：使用 PascalCase（帕斯卡命名）
• 变量名：使用 camelCase（驼峰命名）
• CSS 类名：使用 BEM 方法论

Git 提交规范

# 功能开发
git commit -m "feat: 添加笔记编辑功能"

# 问题修复
git commit -m "fix: 修复保存按钮点击问题"

# 样式调整
git commit -m "style: 调整按钮间距和颜色"

# 文档更新
git commit -m "docs: 更新 README 文档"

📱 兼容性

• 微信版本：7.0.0+
• 基础库版本：2.19.4+
• 支持平台：iOS、Android、微信开发者工具

🤝 贡献指南

1. Fork 本仓库
2. 创建功能分支：git checkout -b feature/your-feature
3. 提交更改：git commit -m 'feat: add your feature'
4. 推送分支：git push origin feature/your-feature
5. 提交 Pull Request

📄 许可证

本项目基于 MIT 许可证开源。

📞 联系我们

• 项目地址：[GitHub Repository]
• 问题反馈：[Issues]
• 邮箱：support@tnote.com

---

开始使用 TNote，让记录变得更简单！ ✨