You've already forked template-MP
159 lines
4.8 KiB
Markdown
159 lines
4.8 KiB
Markdown
# UniApp 微信小程序快速开发模板
|
|
|
|
本模板是基于 UniApp + Vue3 + uView-Plus 的微信小程序项目模板，提供了一些常用的工具函数、组件和最佳实践。
|
|
|
|
## 目录结构
|
|
|
|
```
|
|
├── api/ # 接口相关
|
|
│ ├── modules/ # 业务接口
|
|
│ └── request.js # 请求封装
|
|
├── common/ # 公共资源
|
|
│ ├── styles/ # 全局样式
|
|
│ │ ├── common.css # codefun原子类样式
|
|
│ │ └── base.scss # 全局样式变量
|
|
│ └── utils/ # 工具函数
|
|
│ └── tool.js # 常用工具函数
|
|
├── components/ # 公共组件
|
|
├── uni_modules/ # uni-app 组件
|
|
│ └── z-paging/ # 分页组件库
|
|
├── lib/ # 第三方库
|
|
│ └── luch-request/ # luch-request 网络请求库
|
|
├── uview-plus/ # uView-Plus 组件库
|
|
├── mixins/ # Vue 混入
|
|
│ └── global.js # 全局混入
|
|
├── store/ # 状态管理
|
|
├── pages/ # 主包页面
|
|
├── subPages/ # 分包页面
|
|
├── App.vue # 应用入口
|
|
├── main.js # 主入口文件
|
|
├── pages.json # 页面配置
|
|
├── manifest.json # 应用配置
|
|
├── uni.scss # 全局样式变量
|
|
├── vite.config.js # Vite 编译配置
|
|
├── .nvmdrc # Node.js 版本要求
|
|
└── .env # 环境变量
|
|
```
|
|
|
|
## 使用方法
|
|
|
|
1. 将模板目录复制到你的项目目录中
|
|
2. 根据需要修改 package.json 中的项目名称和描述
|
|
3. 使用 npm install 安装依赖
|
|
4. 根据需要修改 pages.json 中的页面配置
|
|
5. 开始构建你的新项目
|
|
|
|
## 开发环境与运行
|
|
|
|
### 环境要求
|
|
|
|
* Node.js (版本信息在 `.nvmdrc` 文件中指定，当前为 20.0.0)
|
|
* npm 或 yarn
|
|
|
|
### 安装依赖
|
|
|
|
```bash
|
|
npm install
|
|
```
|
|
|
|
### 运行项目
|
|
|
|
由于这是一个 UniApp 项目，通常需要使用 HBuilderX 或其他支持 UniApp 的 IDE 来运行和调试。具体的运行命令取决于你的开发环境。
|
|
|
|
### 构建项目
|
|
|
|
同样，构建项目也需要使用 HBuilderX 或相应的 CLI 工具。
|
|
|
|
## 项目特性
|
|
|
|
### 核心依赖
|
|
- **dotenv** - 环境变量注入
|
|
|
|
### 样式系统
|
|
|
|
- common.css: 全局原子类样式
|
|
- base.scss: 实用的 SCSS 工具类
|
|
|
|
### 工具函数 (tool.js)
|
|
|
|
- alert: 文字轻提示
|
|
- loading/hideLoading: 显示/隐藏加载提示
|
|
- 页面跳转方法: navigateTo, redirectTo, reLaunch, switchTab, navigateBack
|
|
- 本地存储: storage, removeStorage, getStorageInfo
|
|
- copy: 复制文本到剪贴板
|
|
- saveImageToPhotos: 保存图片到相册
|
|
- requestPayment: 微信支付
|
|
- upload: 文件上传
|
|
- formatDate: 日期格式化
|
|
- deepClone: 深拷贝
|
|
- debounce/throttle: 防抖节流
|
|
- getValidator: 表单验证工具
|
|
- toggleDarkMode/getCurrentTheme: 暗黑模式切换
|
|
|
|
### 网络请求
|
|
|
|
- 基于 luch-request 的封装
|
|
- 自动添加 token
|
|
- 统一错误处理
|
|
- 请求缓存机制
|
|
- 请求重试机制
|
|
|
|
### 组件
|
|
|
|
- uView-Plus 组件库
|
|
- z-paging 分页组件
|
|
|
|
## 代码规范与开发约定
|
|
|
|
### 样式
|
|
|
|
- 全局样式文件位于 `common/styles/` 目录下
|
|
- 遵循项目中已有的风格
|
|
|
|
### JavaScript
|
|
|
|
- 严格遵循ES6规范
|
|
- 遵循JavaScript函数式编程范式
|
|
- 方法类函数应该使用 `function` 进行定义
|
|
- 页面的生命周期需要通过 `@dcloudio/uni-app` 依赖进行按需导入
|
|
- 全局变量都集中放置于代码顶部
|
|
- 变量名使用小驼峰命名法
|
|
- 常量名使用全大写
|
|
- 所有 `Promise` 类方法使用 `async` `await` 写法
|
|
- 在需要页面跳转、提示、加载、本地存储等功能的时候，优先使用工具函数
|
|
- 字符串拼接使用ES6的模板语法
|
|
|
|
### 静态资源
|
|
|
|
- 静态资源变量 `ASSETSURL` 已进行全局混入，可以在 `<template></template>` 中直接使用
|
|
|
|
### 网络请求
|
|
|
|
- 网络请求使用 `lib/luch-request` 库进行封装
|
|
- 包含请求和响应拦截器，用于处理通用逻辑
|
|
- 各业务板块的接口都应存放在 `api/modules` 下
|
|
|
|
### 组件
|
|
|
|
- 所有 `uni_modules` 目录中的组件无需导入直接可以进行使用
|
|
- `uView-Plus` 组件已通过 `easycom` 自动导入
|
|
|
|
### 页面
|
|
|
|
- 页面配置在 `pages.json` 中管理
|
|
- 页面使用 Composition API (setup语法糖) 编写
|
|
|
|
## 代码提交规范
|
|
|
|
- 提交信息应清晰描述变更内容
|
|
- 对于功能性的新增或修改，使用 `新增` 前缀
|
|
- 对于错误修复，使用 `修复` 前缀
|
|
- 对于性能优化、代码重构，使用 `优化` 前缀
|
|
- 对于文档更新，使用 `文档` 前缀
|
|
- 提交信息应使用中文
|
|
|
|
## 注意事项
|
|
|
|
1. 请根据实际项目需求进行修改和扩展功能
|
|
2. 代码文件可按项目规范进行修改替换
|
|
3. 样式文件可按项目规范进行修改 |