村客宝 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及以上版本
安装依赖
- 使用HBuilderX打开项目
- 点击菜单栏 "工具 -> 插件安装",安装"scss/sass编译"插件
- 点击菜单栏 "工具 -> 插件安装",安装"uView-UI"插件
运行和发布
运行到浏览器
- 在HBuilderX中,点击"运行 -> 运行到浏览器"
- 选择浏览器,如Chrome
运行到微信小程序
- 在HBuilderX中,点击"运行 -> 运行到小程序模拟器 -> 微信开发者工具"
- 确保已安装并配置了微信开发者工具
发布为H5
- 在HBuilderX中,点击"发行 -> 网站H5发布"
- 配置发布信息,点击发布
发布为微信小程序
- 在HBuilderX中,点击"发行 -> 小程序发布 -> 微信小程序"
- 配置小程序AppID等信息,点击发布
发布为App
- 在HBuilderX中,点击"发行 -> 原生App-云打包"
- 配置证书等信息,选择打包平台(Android/iOS),点击发布
技术栈
- uni-app:跨平台前端框架
- Vue.js:前端框架
- Vuex:状态管理
- uView UI:UI组件库
- SCSS:CSS预处理器
License
MIT