You've already forked template-MP
iflow描述文件调优
This commit is contained in:
139
IFLOW.md
139
IFLOW.md
@@ -8,23 +8,25 @@
|
||||
* **Vue3**: 渐进式 JavaScript 框架,用于构建用户界面。
|
||||
* **uView-Plus**: 基于 UniApp 的 UI 组件库。
|
||||
* **z-paging**: 一个用于处理分页加载的组件库。
|
||||
* **Vuex**: 状态管理库,用于统一管理应用状态(登录状态、用户信息等)。
|
||||
* **Vuex**: 状态管理库,用于统一管理应用状态。
|
||||
* **Vite**: 现代化构建工具,配置了自定义插件用于manifest.json的appid替换。
|
||||
* **luch-request**: 网络请求库,提供请求封装和拦截器功能。
|
||||
|
||||
## 目录结构
|
||||
|
||||
```
|
||||
.
|
||||
├── api/ # 接口相关
|
||||
│ ├── modules/ # 业务接口
|
||||
│ ├── modules/ # 业务接口(目录存在待完善)
|
||||
│ └── request.js # 请求封装
|
||||
├── common/ # 公共资源
|
||||
│ ├── styles/ # 全局样式
|
||||
│ │ ├── common.css # codefun原子类样式
|
||||
│ │ └── base.scss # 全局样式变量
|
||||
│ │ ├── common.css # codefun原子类样式(预留)
|
||||
│ │ └── base.scss # 全局样式变量(预留)
|
||||
│ └── utils/ # 工具函数
|
||||
│ └── tool.js # 常用工具函数
|
||||
├── components/ # 公共组件
|
||||
├── wxcomponents/ # 微信原生组件
|
||||
├── components/ # 公共组件(目录存在待完善)
|
||||
├── wxcomponents/ # 微信原生组件(目录存在待完善)
|
||||
├── uni_modules/ # uni-app 组件
|
||||
│ └── z-paging/ # 分页组件库
|
||||
├── lib/ # 第三方库
|
||||
@@ -33,54 +35,71 @@
|
||||
├── mixins/ # Vue 混入
|
||||
│ └── global.js # 全局混入
|
||||
├── pages/ # 主包页面
|
||||
│ └── index/ # 首页
|
||||
├── subPages/ # 分包页面
|
||||
│ └── welcome/ # 欢迎页
|
||||
├── static/ # 静态资源文件
|
||||
│ └── assets/ # 静态图片资源
|
||||
├── store/ # 状态管理
|
||||
├── subPages/ # 分包页面
|
||||
├── uni_modules/ # uni-app 组件
|
||||
│ └── z-paging/ # 分页组件库
|
||||
├── uview-plus/ # uView-Plus 组件库
|
||||
├── App.vue # 应用入口
|
||||
├── main.js # 主入口文件
|
||||
├── pages.json # 页面配置
|
||||
├── manifest.json # 应用配置
|
||||
├── uni.scss # 全局样式变量
|
||||
├── vite.config.js # Vite 编译配置
|
||||
├── .nvmdrc # Node.js 版本要求
|
||||
└── .env # 环境变量
|
||||
├── .nvmdrc # Node.js 版本要求
|
||||
├── .env # 环境变量
|
||||
├── .iflow/ # iFlow CLI 配置
|
||||
├── package.json # 项目依赖配置
|
||||
└── uni.promisify.adaptor.js # uni-app promise 适配器
|
||||
```
|
||||
|
||||
# 开发环境与运行
|
||||
## 开发环境与运行
|
||||
|
||||
## 环境要求
|
||||
### 环境要求
|
||||
|
||||
* Node.js (版本信息在 `.nvmdrc` 文件中指定,当前为 20.0.0)
|
||||
* Node.js (版本信息在 `.nvmdrc` 文件中指定,当前为 24.0.1)
|
||||
* npm 或 yarn
|
||||
|
||||
## 安装依赖
|
||||
### 当前依赖
|
||||
|
||||
```json
|
||||
{
|
||||
"dependencies": {
|
||||
"dotenv": "^17.2.2",
|
||||
"dayjs": "*",
|
||||
"vue": "^3.5.21"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### 安装依赖
|
||||
|
||||
```bash
|
||||
npm install
|
||||
```
|
||||
|
||||
## 运行项目
|
||||
### 运行项目
|
||||
|
||||
由于这是一个 UniApp 项目,通常需要使用 HBuilderX 或其他支持 UniApp 的 IDE 来运行和调试。具体的运行命令取决于你的开发环境。
|
||||
由于这是一个 UniApp 项目,通常需要使用 HBuilderX 或其他支持 UniApp 的 IDE 来运行和调试:
|
||||
|
||||
## 构建项目
|
||||
1. 使用 HBuilderX 打开项目
|
||||
2. 选择"运行到小程序模拟器"或"运行到手机或模拟器"
|
||||
3. 选择微信开发者工具
|
||||
|
||||
### 构建项目
|
||||
|
||||
同样,构建项目也需要使用 HBuilderX 或相应的 CLI 工具。
|
||||
|
||||
# 代码规范与开发约定
|
||||
## 代码规范与开发约定
|
||||
|
||||
## 样式
|
||||
### 样式
|
||||
|
||||
* 全局样式文件位于 `common/styles/` 目录下,包括 `common.css` 和 `base.scss`。
|
||||
* `common.css` 提供了codefun原子类样式,用于快速布局。
|
||||
* `base.scss` 提供了SCSS变量和mixins,以及常用的样式类生成器。
|
||||
* 样式规范应遵循项目中已有的风格。
|
||||
* 全局样式文件位于 `common/styles/` 目录下(目录结构预留,待完善)
|
||||
* `uni.scss` 提供了全局样式变量
|
||||
* 样式规范应遵循项目中已有的风格
|
||||
|
||||
## JavaScript
|
||||
### JavaScript
|
||||
|
||||
* 严格遵循ES6规范。
|
||||
* 遵循JavaScript函数式编程范式。
|
||||
@@ -98,44 +117,51 @@ npm install
|
||||
* 字符串拼接使用ES6的模板语法。
|
||||
* JavaScript规范应遵循项目中已有的风格。
|
||||
|
||||
## 静态资源
|
||||
### 静态资源
|
||||
|
||||
* 静态资源变量 `ASSETSURL` 已进行全局混入,可以在 `<template></template>` 中直接使用。
|
||||
* 静态资源变量 `ASSETSURL` 已进行全局混入(通过mixins/global.js),可以在 `<template></template>` 中直接使用。
|
||||
* 所有静态资源URL应该使用 `ASSETSURL` 进行拼接,使用方式为:`${ASSETSURL}simple.png`、`background-image: url($ASSETSURL + 'b23bbf0c4c8e59f88f8fd883cb5d6b27.png')`。
|
||||
|
||||
## 工具函数 (tool.js)
|
||||
### 工具函数 (tool.js)
|
||||
|
||||
`common/utils/tool.js` 文件提供了一系列常用的工具函数:
|
||||
|
||||
* **提示与加载**: `alert`, `loading`, `hideLoading`
|
||||
* **页面跳转**: `navigateTo`, `redirectTo`, `reLaunch`, `switchTab`, `navigateBack`
|
||||
* **本地存储**: `storage`, `removeStorage`, `getStorageInfo`
|
||||
* **其他功能**: `copy` (复制文本), `saveImageToPhotos` (保存图片), `requestPayment` (微信支付), `upload` (文件上传), `loadFont` (加载字体)
|
||||
* **其他功能**:
|
||||
* `copy` - 复制文本到剪贴板
|
||||
* `saveImageToPhotos` - 保存图片到相册
|
||||
* `requestPayment` - 微信支付
|
||||
* `upload` - 文件上传
|
||||
* `loadFont` - 加载字体
|
||||
|
||||
## 网络请求
|
||||
### 网络请求
|
||||
|
||||
* 网络请求使用 `lib/luch-request` 库进行封装。
|
||||
* 全局配置在 `api/request.js` 中定义,包括基础URL、请求头、SSL验证等。
|
||||
* 包含请求和响应拦截器,用于处理通用逻辑(如错误提示、鉴权等)。
|
||||
* 基础URL通过环境变量 `VITE_BASE_URL` 配置。
|
||||
* 各业务板块的接口都应存放在 `api/modules` 下,并将单个接口进行导出以便页面按需导入。
|
||||
|
||||
## 状态管理 (Vuex)
|
||||
### 状态管理 (Vuex)
|
||||
|
||||
* 项目集成了Vuex进行全局状态管理。
|
||||
* 状态管理文件位于 `store/index.js`。
|
||||
* 使用 `useStore` 钩子在组件中访问状态。
|
||||
* 使用 `createStore` 创建store实例。
|
||||
* 目前处于基础状态,包含空的state、mutations、actions和getters。
|
||||
|
||||
## 组件
|
||||
### 组件
|
||||
|
||||
* 项目集成了 `uView-Plus` 和 `z-paging` 两个组件库。
|
||||
* 所有 `uni_modules` 目录中的组件无需导入直接可以进行使用。
|
||||
* `uView-Plus` 组件已通过 `easycom` 自动导入,可以直接使用,如:`<u-button>`、`<u-icon>`。
|
||||
* 全局组件放在 `components/` 目录下。
|
||||
* 全局组件放在 `components/` 目录下(目录存在待完善)。
|
||||
* 页面独立组件放在页面根目录下的 `components/`。
|
||||
* 微信的原生组件放在页面根目录下的 `wxcomponents/`,并在使用了组件的对应页面路由配置中添加组件的引用属性 `"usingComponents": { "components": "/wxcomponents/components/components" }`。
|
||||
* 微信的原生组件放在页面根目录下的 `wxcomponents/`。
|
||||
* 组件编写应遵循项目中已有的风格。
|
||||
|
||||
## 分页功能
|
||||
### 分页功能
|
||||
|
||||
* 项目使用 `z-paging` 组件实现分页功能。
|
||||
* 分页组件通过 `v-model` 绑定数据,并使用 `@query` 事件处理数据查询。
|
||||
@@ -143,14 +169,38 @@ npm install
|
||||
* 通过 `paging.value?.reload()` 触发分页组件重新加载数据。
|
||||
* 通过 `paging.value?.complete()` 通知分页组件数据加载完成。
|
||||
|
||||
## 页面
|
||||
### 页面
|
||||
|
||||
* 页面配置在 `pages.json` 中管理。
|
||||
* 主包页面放在 `pages/` 目录下,分包页面放在 `subPages/` 目录下,如果页面不属于一级页面且没有包含在 `pages.json` 中的 `tabbar`,则应该放置在分包目录下。
|
||||
* 主包页面放在 `pages/` 目录下,分包页面放在 `subPages/` 目录下。
|
||||
* 页面使用 Composition API (setup语法糖) 编写。
|
||||
* 注释、结构规范应遵循项目中已有的风格。
|
||||
|
||||
## 代码提交规范
|
||||
### Vite 配置
|
||||
|
||||
* `vite.config.js` 包含了自定义插件用于在编译时替换 `manifest.json` 中的 appid
|
||||
* 仅在首次编译时执行,避免热重载时重复执行导致内存占用高
|
||||
* 支持环境变量配置:
|
||||
* `VITE_APPID` - 微信小程序APPID
|
||||
* `VITE_UNI_APPID` - uni-app APPID
|
||||
* `VITE_LIBVERSION` - 微信小程序基础库版本
|
||||
|
||||
### 环境配置
|
||||
|
||||
* 项目使用环境变量管理不同环境的配置,通过 `.env` 文件配置:
|
||||
* `VITE_BASE_URL` - 接口地址
|
||||
* `VITE_ASSETSURL` - 资源地址
|
||||
* `VITE_APPID` - 小程序APPID
|
||||
* `VITE_UNI_APPID` - UNI-APPID
|
||||
* `VITE_LIBVERSION` - 微信小程序基础库版本
|
||||
|
||||
### 全局配置
|
||||
|
||||
* `main.js` 中配置了 `uni.$zp` 全局配置:
|
||||
* `'empty-view-text'` - 空数据提示文字
|
||||
* `'refresher-enabled'` - 是否启用下拉刷新
|
||||
|
||||
### 代码提交规范
|
||||
|
||||
* 提交信息应清晰描述变更内容,如 `修复 搜索功能空值检查` 或 `新增 删除按钮功能`。
|
||||
* 对于功能性的新增或修改,使用 `新增` 前缀。
|
||||
@@ -159,8 +209,9 @@ npm install
|
||||
* 对于文档更新,使用 `文档` 前缀。
|
||||
* 提交信息应使用中文。
|
||||
|
||||
## 其他
|
||||
### 其他
|
||||
|
||||
* 页面中的分享功能应该使用原生的微信分享功能,通过 `button` 或 `<u-button>` 组件的 `open-type="share"` 属性实现。
|
||||
* 项目使用环境变量管理不同环境的配置,通过 `.env` 文件配置。
|
||||
* Vite配置文件 `vite.config.js` 包含了自定义插件用于在编译时替换 `manifest.json` 中的 appid。
|
||||
* 项目中的分享功能应该使用微信原生的分享功能,通过 `button` 或 `u-button` 组件的 `open-type="share"` 属性实现。
|
||||
* 项目中的头像编辑和获取功能应该使用微信原生获取头像昵称的开放能力,通过 `button` 或 `u-button` 组件的 `open-type="chooseAvatar"` 属性和其触发的 `@chooseavatar` 事件实现。
|
||||
* 项目中的昵称编辑和获取功能应该使用微信原生获取头像昵称的开放能力,通过 `input` 或 `u-input` 组件的 `open-type="nickname"` 属性实现。
|
||||
* 项目集成了promise适配器 `uni.promisify.adaptor.js`,用于统一处理异步操作。
|
||||
Reference in New Issue
Block a user