You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
102 lines
2.7 KiB
102 lines
2.7 KiB
# Billiard App - 台球馆小程序开发规范 |
|
|
|
## 项目技术栈 |
|
|
|
- **框架**: Taro 4.0.9 |
|
- **UI 框架**: React 18 |
|
- **语言**: TypeScript |
|
- **状态管理**: MobX 6 |
|
- **UI 组件库**: @taroify/core 0.9.0 |
|
- **样式**: SCSS |
|
- **构建工具**: Webpack 5 |
|
- **包管理器**: npm |
|
|
|
## 项目结构 |
|
|
|
``` |
|
billiard-app/ |
|
├── src/ |
|
│ ├── pages/ # 页面目录 |
|
│ │ ├── index/ # 首页 |
|
│ │ ├── store/ # 门店列表 |
|
│ │ ├── scan/ # 扫码 |
|
│ │ ├── message/ # 消息 |
|
│ │ └── user/ # 个人中心 |
|
│ ├── store/ # MobX 状态管理 |
|
│ ├── custom-tab-bar/ # 自定义 TabBar |
|
│ ├── constants/ # 常量配置 |
|
│ ├── app.ts # 入口文件 |
|
│ └── app.config.ts # 全局配置 |
|
├── config/ # 编译配置 |
|
├── babel.config.js # Babel 配置 |
|
└── package.json # 项目依赖 |
|
``` |
|
|
|
## 代码规范 |
|
|
|
### 1. MobX 使用 |
|
|
|
所有组件必须用 `observer` 包裹才能响应状态变化： |
|
|
|
```typescript |
|
import { observer } from 'mobx-react' |
|
import { userStore } from '../../store' |
|
|
|
const MyPage = observer(() => { |
|
const { userInfo } = userStore |
|
return <View>{userInfo?.nickname}</View> |
|
}) |
|
``` |
|
|
|
### 2. Taroify 组件 |
|
|
|
按需导入（已配置 babel-plugin-import）： |
|
|
|
```typescript |
|
import { Button, Toast } from '@taroify/core' |
|
import { HomeOutlined } from '@taroify/icons' |
|
``` |
|
|
|
### 3. TypeScript |
|
|
|
所有变量和函数必须有类型定义。 |
|
|
|
### 4. 样式规范 |
|
|
|
- 使用 SCSS |
|
- designWidth 为 750 |
|
- 使用 px单位,会自动转换为 rpx |
|
- 使用 BEM 命名规范 |
|
- 非特殊说明,不要使用PX |
|
|
|
## 常用命令 |
|
|
|
```bash |
|
# 开发 |
|
npm run dev:weapp # 微信小程序 |
|
npm run dev:h5 # H5 |
|
|
|
# 编译 |
|
npm run build:weapp # 编译微信小程序 |
|
npm run build:h5 # 编译 H5 |
|
``` |
|
|
|
## 注意事项 |
|
|
|
1. MobX 组件必须用 `observer` 包裹 |
|
2. Taroify 样式已引入, |
|
3: 组件优先查看 taroify ui 库是否支持,再根据设计ui样式进行微调可使用 mcp 检查taroify 组件和api: |
|
``` |
|
- mcp_taroifymcp_list-components：查看所有可用组件 |
|
- mcp_taroifymcp_get-component-docs：获取组件详细文档 |
|
- mcp_taroifymcp_get-component-props：获取组件 Props 和 API |
|
- mcp_taroifymcp_list-component-example：查看组件示例 |
|
``` |
|
3. 修改 TabBar 需同时更新 `custom-tab-bar/` 和 `app.config.ts` |
|
4. 状态持久化使用 `Taro.setStorageSync` |
|
|
|
## 相关文档 |
|
|
|
- [Taro 官方文档](https://taro-docs.jd.com/) |
|
- [Taroify 文档](https://taroify.github.io/taroify.com/) |
|
- [MobX 文档](https://mobx.js.org/)
|
|
|