You've already forked template-MP
iflow描述文件调优
This commit is contained in:
yuantao
212
IFLOW.md
212
IFLOW.md
@@ -26,7 +26,8 @@
|
||||
│ └── utils/ # 工具函数
|
||||
│ └── tool.js # 常用工具函数
|
||||
├── components/ # 公共组件（目录存在待完善）
|
||||
├── wxcomponents/ # 微信原生组件（目录存在待完善）
|
||||
├── wxcomponents/ # 微信原生组件
|
||||
│ └── painter/ # 海报绘制组件
|
||||
├── uni_modules/ # uni-app 组件
|
||||
│ └── z-paging/ # 分页组件库
|
||||
├── lib/ # 第三方库
|
||||
@@ -93,48 +94,74 @@ npm install
|
||||
|
||||
## 代码规范与开发约定
|
||||
|
||||
### 样式
|
||||
## 样式规范
|
||||
|
||||
* 全局样式文件位于 `common/styles/` 目录下（目录结构预留，待完善）
|
||||
* `uni.scss` 提供了全局样式变量
|
||||
* 样式规范应遵循项目中已有的风格
|
||||
* **全局样式**: 位于 `common/styles/` 目录
|
||||
* `common.css`: CodeFun原子类样式，用于快速布局
|
||||
* `base.scss`: SCSS变量、Mixins和常用样式类生成器
|
||||
* **样式规范**: 遵循项目中已有的样式风格，统一使用原子类
|
||||
|
||||
### JavaScript
|
||||
## JavaScript规范
|
||||
|
||||
* 严格遵循ES6规范。
|
||||
* 遵循JavaScript函数式编程范式。
|
||||
* 方法类函数应该使用 `function` 进行定义。
|
||||
* 避免出现超过4个以上的 `ref`，超过4个则使用 `reactive`。
|
||||
* 页面的生命周期需要通过 `@dcloudio/uni-app` 依赖进行按需导入，如(`import { onLoad } from '@dcloudio/uni-app'`)。
|
||||
* 全局变量都集中放置于代码顶部。
|
||||
* 变量名使用小驼峰命名法。
|
||||
* 常量名使用全大写。
|
||||
* 状态类变量命名参考 `isLogin`、`isOpen`。
|
||||
* 事件类方法命名参考 `onClick`、`onSelect`。
|
||||
* 变量都应该写有注释说明、类型说明。
|
||||
* 所有 `Promise` 类方法使用 `async` `await` 写法，避免出现 `.then` 嵌套，并进行容错、错误抛出处理。
|
||||
* 在需要页面跳转、提示、加载、本地存储、或其他功能的时候，优先使用工具函数 `common/utils/tool.js` 中存在的函数。
|
||||
* 字符串拼接使用ES6的模板语法。
|
||||
* JavaScript规范应遵循项目中已有的风格。
|
||||
* **ES6+**: 严格遵循ES6+语法规范
|
||||
* **函数式编程**: 优先使用函数式编程范式
|
||||
* **函数定义**: 使用 `function` 关键字定义方法函数
|
||||
* **响应式数据**:
|
||||
* 少于4个 `ref` 时直接使用 `ref`
|
||||
* 超过4个时使用 `reactive` 进行封装
|
||||
* **生命周期**: 通过 `@dcloudio/uni-app` 按需导入，如：
|
||||
```javascript
|
||||
import { onLoad, onShow, onHide } from '@dcloudio/uni-app'
|
||||
```
|
||||
* **变量命名**:
|
||||
* 小驼峰命名法: `userName`, `orderList`
|
||||
* 常量全大写: `MAX_LENGTH`, `DEFAULT_VALUE`
|
||||
* 状态类变量: `isLogin`, `isOpen`, `isLoading`
|
||||
* 事件方法: `onClick`, `onSelect`, `onSubmit`
|
||||
* **注释规范**: 变量和方法必须有注释说明和类型说明
|
||||
* **异步处理**: 所有Promise类方法使用 `async/await` 写法，避免 `.then` 嵌套
|
||||
* **字符串拼接**: 使用ES6模板语法 `` `string ${variable}` ``
|
||||
|
||||
### 静态资源
|
||||
## 静态资源
|
||||
|
||||
* 静态资源变量 `ASSETSURL` 已进行全局混入（通过mixins/global.js），可以在 `<template></template>` 中直接使用。
|
||||
* 所有静态资源URL应该使用 `ASSETSURL` 进行拼接，使用方式为：`${ASSETSURL}simple.png`、`background-image: url($ASSETSURL + 'b23bbf0c4c8e59f88f8fd883cb5d6b27.png')`。
|
||||
* **资源路径**: 使用全局混入的 `ASSETSURL` 变量
|
||||
* **使用方式**:
|
||||
```javascript
|
||||
// 在template中
|
||||
background-image: url($ASSETSURL + 'image.png')
|
||||
|
||||
// 在JavaScript中
|
||||
const imageUrl = `${ASSETSURL}image.png`
|
||||
```
|
||||
|
||||
### 工具函数 (tool.js)
|
||||
## 工具函数 (tool.js)
|
||||
|
||||
`common/utils/tool.js` 文件提供了一系列常用的工具函数：
|
||||
`common/utils/tool.js` 提供完整的工具函数库：
|
||||
|
||||
* **提示与加载**: `alert`, `loading`, `hideLoading`
|
||||
* **页面跳转**: `navigateTo`, `redirectTo`, `reLaunch`, `switchTab`, `navigateBack`
|
||||
* **本地存储**: `storage`, `removeStorage`, `getStorageInfo`
|
||||
* **其他功能**:
|
||||
* `copy` - 复制文本到剪贴板
|
||||
* `saveImageToPhotos` - 保存图片到相册
|
||||
* `requestPayment` - 微信支付
|
||||
* `upload` - 文件上传
|
||||
* `loadFont` - 加载字体
|
||||
### 提示与加载
|
||||
* `alert()`: 文字轻提示
|
||||
* `loading()`: 显示加载状态
|
||||
* `hideLoading()`: 隐藏加载状态
|
||||
|
||||
### 页面跳转
|
||||
* `navigateTo()`: 跳转到指定页面
|
||||
* `redirectTo()`: 关闭当前页面并跳转
|
||||
* `reLaunch()`: 关闭所有页面并跳转
|
||||
* `switchTab()`: 跳转到TabBar页面
|
||||
* `navigateBack()`: 返回上一页面
|
||||
|
||||
### 本地存储
|
||||
* `storage()`: 设置或获取本地存储
|
||||
* `removeStorage()`: 移除本地存储项
|
||||
* `getStorageInfo()`: 获取存储信息
|
||||
|
||||
### 其他功能
|
||||
* `copy()`: 复制文本到剪贴板
|
||||
* `saveImageToPhotos()`: 保存图片到相册
|
||||
* `requestPayment()`: 发起微信支付
|
||||
* `upload()`: 文件上传
|
||||
* `loadFont()`: 动态加载字体
|
||||
|
||||
### 网络请求
|
||||
|
||||
@@ -151,30 +178,65 @@ npm install
|
||||
* 使用 `createStore` 创建store实例。
|
||||
* 目前处于基础状态，包含空的state、mutations、actions和getters。
|
||||
|
||||
### 组件
|
||||
## 组件规范
|
||||
|
||||
* 项目集成了 `uView-Plus` 和 `z-paging` 两个组件库。
|
||||
* 所有 `uni_modules` 目录中的组件无需导入直接可以进行使用。
|
||||
* `uView-Plus` 组件已通过 `easycom` 自动导入，可以直接使用，如：`<u-button>`、`<u-icon>`。
|
||||
* 全局组件放在 `components/` 目录下（目录存在待完善）。
|
||||
* 页面独立组件放在页面根目录下的 `components/`。
|
||||
* 微信的原生组件放在页面根目录下的 `wxcomponents/`。
|
||||
* 组件编写应遵循项目中已有的风格。
|
||||
* `uni_modules` 目录中的组件无需导入直接可以进行使用。
|
||||
* **组件库**: 集成 `uView-Plus` 和 `z-paging`
|
||||
* **自动导入**: `uView-Plus` 通过 `easycom` 自动导入
|
||||
```javascript
|
||||
// 直接使用，无需import
|
||||
<u-button>按钮</u-button>
|
||||
<u-icon name="home" />
|
||||
```
|
||||
* **组件分类**:
|
||||
* **全局组件**: 放在 `components/` 目录
|
||||
* **页面组件**: 放在页面根目录的 `components/` 目录
|
||||
* **微信原生组件**: 放在页面根目录的 `wxcomponents/` 目录
|
||||
|
||||
### 分页功能
|
||||
## 分页功能
|
||||
|
||||
* 项目使用 `z-paging` 组件实现分页功能。
|
||||
* 分页组件通过 `v-model` 绑定数据，并使用 `@query` 事件处理数据查询。
|
||||
* 在页面中直接使用 `v-for` 循环渲染数据项，如：`<view class="item" v-for="item in dataList" :key="item.id">`。
|
||||
* 通过 `paging.value?.reload()` 触发分页组件重新加载数据。
|
||||
* 通过 `paging.value?.complete()` 通知分页组件数据加载完成。
|
||||
* **分页组件**: 使用 `z-paging` 实现高性能分页
|
||||
* **使用方式**:
|
||||
```vue
|
||||
<template>
|
||||
<z-paging
|
||||
ref="paging"
|
||||
v-model="dataList"
|
||||
@query="queryList"
|
||||
>
|
||||
<view v-for="item in dataList" :key="item.id">
|
||||
{{ item.name }}
|
||||
</view>
|
||||
</z-paging>
|
||||
</template>
|
||||
|
||||
### 页面
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
|
||||
const paging = ref(null)
|
||||
const dataList = ref([])
|
||||
|
||||
// 分页查询函数
|
||||
const queryList = async (pageNo, pageSize) => {
|
||||
try {
|
||||
const result = await api.getList({ pageNo, pageSize })
|
||||
paging.value.complete(result.data.list)
|
||||
} catch (error) {
|
||||
paging.value.complete(false)
|
||||
}
|
||||
}
|
||||
|
||||
// 刷新数据
|
||||
const refresh = () => {
|
||||
paging.value.reload()
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
* 页面配置在 `pages.json` 中管理。
|
||||
* 主包页面放在 `pages/` 目录下，分包页面放在 `subPages/` 目录下。
|
||||
* 页面使用 Composition API (setup语法糖) 编写。
|
||||
* 注释、结构规范应遵循项目中已有的风格。
|
||||
### 路由配置
|
||||
* **主包页面**: 放在 `pages/` 目录
|
||||
* **分包页面**: 放在 `subPages/` 目录
|
||||
* **TabBar配置**: 在 `pages.json` 中配置底部导航
|
||||
|
||||
### Vite 配置
|
||||
|
||||
@@ -200,18 +262,46 @@ npm install
|
||||
* `'empty-view-text'` - 空数据提示文字
|
||||
* `'refresher-enabled'` - 是否启用下拉刷新
|
||||
|
||||
### 代码提交规范
|
||||
## 代码提交规范
|
||||
|
||||
* 提交信息应清晰描述变更内容，如 `修复 搜索功能空值检查` 或 `新增 删除按钮功能`。
|
||||
* 对于功能性的新增或修改，使用 `新增` 前缀。
|
||||
* 对于错误修复，使用 `修复` 前缀。
|
||||
* 对于性能优化、代码重构（既不修复错误也不添加功能），使用 `优化` 前缀。
|
||||
* 对于文档更新，使用 `文档` 前缀。
|
||||
* 提交信息应使用中文。
|
||||
### 提交信息格式
|
||||
* **新增功能**: `新增 功能描述`
|
||||
* **错误修复**: `修复 问题描述`
|
||||
* **性能优化**: `优化 优化内容`
|
||||
* **文档更新**: `文档 更新内容`
|
||||
|
||||
### 示例
|
||||
```bash
|
||||
git commit -m "新增 推广海报生成功能"
|
||||
git commit -m "修复 购物车数量计算错误"
|
||||
git commit -m "优化 接口请求性能"
|
||||
```
|
||||
|
||||
### 其他
|
||||
|
||||
* 项目中的分享功能应该使用微信原生的分享功能，通过 `button` 或 `u-button` 组件的 `open-type="share"` 属性实现。
|
||||
* 项目中的头像编辑和获取功能应该使用微信原生获取头像昵称的开放能力，通过 `button` 或 `u-button` 组件的 `open-type="chooseAvatar"` 属性和其触发的 `@chooseavatar` 事件实现。
|
||||
* 项目中的昵称编辑和获取功能应该使用微信原生获取头像昵称的开放能力，通过 `input` 或 `u-input` 组件的 `open-type="nickname"` 属性实现。
|
||||
* 项目集成了promise适配器 `uni.promisify.adaptor.js`，用于统一处理异步操作。
|
||||
* 项目集成了promise适配器 `uni.promisify.adaptor.js`，用于统一处理异步操作。
|
||||
|
||||
## 最佳实践
|
||||
|
||||
### 页面开发
|
||||
* 使用Composition API (setup语法糖)
|
||||
* 遵循Vue3响应式原理
|
||||
* 合理使用computed和watch
|
||||
|
||||
### 组件开发
|
||||
* 保持组件单一职责
|
||||
* 使用props进行父子通信
|
||||
* 合理使用emits进行事件派发
|
||||
|
||||
### 状态管理
|
||||
* 合理划分store模块
|
||||
* 避免过度依赖全局状态
|
||||
* 及时清理不需要的状态
|
||||
|
||||
### 性能优化
|
||||
* 使用z-paging进行列表优化
|
||||
* 合理使用图片懒加载
|
||||
* 避免不必要的重复渲染
|
||||
Reference in New Issue
Block a user