项目概述

这是一个基于 UniApp + Vue3 + TypeScript 的微信小程序项目模板。它提供了一个基础的项目结构和一些常用的工具函数，方便快速开发微信小程序。

技术栈

UniApp: 跨平台开发框架，用于构建微信小程序。
Vue3: 渐进式 JavaScript 框架，用于构建用户界面。
TypeScript: JavaScript 的超集，提供类型检查和更好的开发体验。
uView-Plus: 基于 UniApp 的 UI 组件库。
z-paging: 一个用于处理分页加载的组件库。
Vuex: 状态管理库。

目录结构

.
├── api/                   # 接口相关
│   ├── modules/           # 业务接口
│   └── request.ts         # 请求封装
├── common/                # 公共资源
│   ├── styles/            # 全局样式
│   │   ├── common.css     # codefun原子类样式
│   │   └── base.scss      # 全局样式变量
│   └── utils/             # 工具函数
│       └── tool.ts        # 常用工具函数
├── components/            # 公共组件
├── lib/                   # 第三方库
│   └── luch-request/      # luch-request 网络请求库
├── pages/                 # 主包页面
│   └── index/             # 首页
│       └── index.vue      # 首页页面
├── subPages/              # 分包页面
├── store/                 # 状态管理
│   └── index.ts           # Vuex store
├── uni_modules/           # uni-app 组件
│   └── z-paging/          # 分页组件库
├── uview-plus/            # uView-Plus 组件库
├── App.vue               # 应用入口
├── main.ts               # 主入口文件
├── pages.json            # 页面配置
├── manifest.json         # 应用配置
├── uni.scss              # 全局样式变量
├── vite.config.js        # Vite 编译配置
├── .env                  # 环境变量
├── .nvmdrc              # Node.js 版本要求
└── tsconfig.json         # TypeScript 配置

开发环境与运行

环境要求

Node.js (版本信息在 .nvmdrc 文件中指定，当前为 20.0.0)
npm 或 yarn

安装依赖

npm install

运行项目

由于这是一个 UniApp 项目，通常需要使用 HBuilderX 或其他支持 UniApp 的 IDE 来运行和调试。具体的运行命令取决于你的开发环境。

构建项目

同样，构建项目也需要使用 HBuilderX 或相应的 CLI 工具。

代码规范与开发约定

样式

全局样式文件位于 common/styles/ 目录下，包括 common.css 和 base.scss。
common.css 提供了codefun原子类样式，用于快速布局。
base.scss 提供了SCSS变量和mixins，以及常用的样式类生成器。
样式规范应遵循项目中已有的风格。

TypeScript

严格遵循TypeScript规范，使用类型注解。
遵循函数式编程范式。
方法类函数应该使用 function 进行定义。
避免出现超过4个以上的 ref，超过4个则使用 reactive。
页面的生命周期需要通过 @dcloudio/uni-app 依赖进行按需导入，如(import { onLoad } from '@dcloudio/uni-app')。
全局变量都集中放置于代码顶部。
变量名使用小驼峰命名法。
常量名使用全大写。
状态类变量命名参考 isLogin、isOpen。
事件类方法命名参考 handleClick、onSelect。
变量都应该写有注释说明、类型说明。
所有 Promise 类方法使用 async await 写法，避免出现 .then 嵌套，并进行容错、错误抛出处理。
字符串拼接使用ES6的模板语法。
TypeScript规范应遵循项目中已有的风格。

静态资源

静态资源变量 ASSETSURL 已进行全局暴露，可以在 <template></template> 中直接使用。
所有静态资源URL应该使用 ASSETSURL 进行拼接，如：${ASSETSURL}simple.png。

工具函数 (tool.ts)

common/utils/tool.ts 文件提供了一系列常用的工具函数：

提示与加载: alert, loading, hideLoading
页面跳转: navigateTo, redirectTo, reLaunch, switchTab, navigateBack
本地存储: storage, removeStorage, getStorageInfo
其他功能: copy (复制文本), saveImageToPhotos (保存图片), requestPayment (微信支付), upload (文件上传), loadFont (加载字体)

网络请求

网络请求使用 lib/luch-request 库进行封装。
全局配置在 api/request.ts 中定义，包括基础URL、请求头、SSL验证等。
包含请求和响应拦截器，用于处理通用逻辑（如错误提示、鉴权等）。
各业务板块的接口都应存放在 api/modules 下，并将单个接口进行导出以便页面按需导入。

组件

项目集成了 uView-Plus 和 z-paging 两个组件库。
uView-Plus 组件已通过 easycom 自动导入，可以直接使用，如：<u-button>、<u-icon>。
全局组件放在 components/ 目录下。
页面独立组件放在页面根目录下的 components/。
每个组件应该附带 README.MD 文档。
组件编写应遵循项目中已有的风格。

页面

页面配置在 pages.json 中管理。
主包页面放在 pages/ 目录下，分包页面放在 subPages/ 目录下。
页面使用 Composition API (setup语法糖) 编写。
注释、结构规范应遵循项目中已有的风格。

5.5 KiB Raw Blame History Unescape Escape