template-MP/README.md

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

安装依赖

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. 样式文件可按项目规范进行修改