86 lines
2.9 KiB
Markdown
86 lines
2.9 KiB
Markdown
|
# 村客宝 UniApp
|
|||
|
|
|
|||
|
|
基于uni-app框架开发的村客宝移动端应用，支持H5、微信小程序、App等多端部署。
|
|||
|
|
|
|||
|
|
## 项目结构
|
|||
|
|
|
|||
|
|
```
|
|||
|
|
├── api # API接口目录
|
|||
|
|
├── components # 自定义组件
|
|||
|
|
├── pages # 页面文件目录
|
|||
|
|
│ ├── index # 首页
|
|||
|
|
│ ├── login # 登录页面
|
|||
|
|
│ └── agreement # 协议页面
|
|||
|
|
├── static # 静态资源
|
|||
|
|
│ ├── images # 图片
|
|||
|
|
│ └── icons # 图标
|
|||
|
|
├── store # Vuex状态管理
|
|||
|
|
├── utils # 工具函数
|
|||
|
|
│ ├── auth.js # 认证相关工具函数
|
|||
|
|
│ ├── common.js # 通用工具函数
|
|||
|
|
│ └── request.js # 请求工具函数
|
|||
|
|
├── App.vue # 应用配置，用来配置App全局样式以及监听应用生命周期
|
|||
|
|
├── main.js # Vue初始化入口文件
|
|||
|
|
├── manifest.json # 配置应用名称、appid、logo、版本等打包信息
|
|||
|
|
├── pages.json # 配置页面路由、导航条、选项卡等页面类信息
|
|||
|
|
└── uni.scss # 全局样式变量
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 功能特性
|
|||
|
|
|
|||
|
|
- **支持多种登录方式**：手机号验证码登录、密码登录、微信授权登录、Apple登录
|
|||
|
|
- **完整的token认证机制**：JWT令牌管理，自动刷新token，过期处理
|
|||
|
|
- **统一的网络请求封装**：请求拦截器，响应拦截器，错误处理
|
|||
|
|
- **多端适配**：一套代码，同时支持H5、微信小程序、App
|
|||
|
|
- **UI框架集成**：基于uView 2.x UI框架，提供丰富的组件和样式
|
|||
|
|
- **主题定制**：全局样式变量，支持自定义主题
|
|||
|
|
|
|||
|
|
## 开发环境
|
|||
|
|
|
|||
|
|
- **Node.js**: v14.x及以上
|
|||
|
|
- **HBuilderX**: 3.x及以上版本
|
|||
|
|
|
|||
|
|
### 安装依赖
|
|||
|
|
|
|||
|
|
1. 使用HBuilderX打开项目
|
|||
|
|
2. 点击菜单栏 "工具 -> 插件安装"，安装"scss/sass编译"插件
|
|||
|
|
3. 点击菜单栏 "工具 -> 插件安装"，安装"uView-UI"插件
|
|||
|
|
|
|||
|
|
## 运行和发布
|
|||
|
|
|
|||
|
|
### 运行到浏览器
|
|||
|
|
|
|||
|
|
1. 在HBuilderX中，点击"运行 -> 运行到浏览器"
|
|||
|
|
2. 选择浏览器，如Chrome
|
|||
|
|
|
|||
|
|
### 运行到微信小程序
|
|||
|
|
|
|||
|
|
1. 在HBuilderX中，点击"运行 -> 运行到小程序模拟器 -> 微信开发者工具"
|
|||
|
|
2. 确保已安装并配置了微信开发者工具
|
|||
|
|
|
|||
|
|
### 发布为H5
|
|||
|
|
|
|||
|
|
1. 在HBuilderX中，点击"发行 -> 网站H5发布"
|
|||
|
|
2. 配置发布信息，点击发布
|
|||
|
|
|
|||
|
|
### 发布为微信小程序
|
|||
|
|
|
|||
|
|
1. 在HBuilderX中，点击"发行 -> 小程序发布 -> 微信小程序"
|
|||
|
|
2. 配置小程序AppID等信息，点击发布
|
|||
|
|
|
|||
|
|
### 发布为App
|
|||
|
|
|
|||
|
|
1. 在HBuilderX中，点击"发行 -> 原生App-云打包"
|
|||
|
|
2. 配置证书等信息，选择打包平台（Android/iOS），点击发布
|
|||
|
|
|
|||
|
|
## 技术栈
|
|||
|
|
|
|||
|
|
- **uni-app**：跨平台前端框架
|
|||
|
|
- **Vue.js**：前端框架
|
|||
|
|
- **Vuex**：状态管理
|
|||
|
|
- **uView UI**：UI组件库
|
|||
|
|
- **SCSS**：CSS预处理器
|
|||
|
|
|
|||
|
|
## License
|
|||
|
|
|
|||
|
|
MIT
|