132 lines
4.2 KiB
Markdown
132 lines
4.2 KiB
Markdown
|
## 项目说明
|
|||
|
|
|
|||
|
|
本项目可以快速搭建uni-app项目,封装request，集成z-paging(下拉刷新，上拉加载)，带页面拦截器，请求锁，请求loading，集成uview，集成在线更新组件,集成本地调试工具vconsole、分包。
|
|||
|
|
|
|||
|
|
## 接口开发
|
|||
|
|
|
|||
|
|
接口服务器地址文件：**api/env.js**，修改服务器地址：
|
|||
|
|
|
|||
|
|
```json
|
|||
|
|
let BASE_URL
|
|||
|
|
//开发环境中
|
|||
|
|
if (process.env.NODE_ENV === 'development') {
|
|||
|
|
// 开发环境
|
|||
|
|
BASE_URL = 'https://mock.apifox.com/m1/3553664-0-default' //开发环境请求地址
|
|||
|
|
} else {
|
|||
|
|
// 生产环境
|
|||
|
|
BASE_URL = 'https://mock.apifox.com/m1/3553664-0-default' //生成环境请求地址
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
export default BASE_URL
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
接口文件：**api/api.js**，在里面定义相关接口地址即可。
|
|||
|
|
|
|||
|
|
```json
|
|||
|
|
//列表，GET方式请求
|
|||
|
|
export const getList = data => request.get('/api/list', data)
|
|||
|
|
//登陆，POST方式请求
|
|||
|
|
export const login = data => request.post('/api/login', data)
|
|||
|
|
//检测版本升级，POST方式请求，第三个参数(false)不显示loading加载
|
|||
|
|
export const checkVersion = data => request.post('/api/checkVersion', data,false)
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
页面中调用的方法：
|
|||
|
|
|
|||
|
|
GET或POST调用如下：（无须导入接口方法，已在全局文件main.js中引入）
|
|||
|
|
|
|||
|
|
```json
|
|||
|
|
//请求参数
|
|||
|
|
const params = {
|
|||
|
|
page: pageNo,
|
|||
|
|
limit: pageSize
|
|||
|
|
}
|
|||
|
|
//getList即对应api.js中的接口
|
|||
|
|
this.$api.getList(params).then(res => {
|
|||
|
|
//todo....
|
|||
|
|
})
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 页面拦截器
|
|||
|
|
|
|||
|
|
本项目集成了页面拦截器，页面拦截器即表示在白名单的页面URL不拦截，其他页面则拦截。
|
|||
|
|
|
|||
|
|
场景：办公OA APP，只有登陆页面不需要拦截，其他页面则需要拦截。
|
|||
|
|
|
|||
|
|
拦截器与token搭配使用，若是本地无TOKE,APP启动时打开首页，则自动会跳转到登陆页。若本地存在TOKEN，则打开首页时不会再要求登陆。
|
|||
|
|
|
|||
|
|
页面拦截器配置文件在**config/config.js**
|
|||
|
|
|
|||
|
|
以OA为例，登陆页不需要拦截则设置如下，还可添加其他不需要拦截的页面。
|
|||
|
|
|
|||
|
|
```json
|
|||
|
|
let config = {
|
|||
|
|
//不拦截页面路径
|
|||
|
|
whiteList: [
|
|||
|
|
'/pages/public/login'
|
|||
|
|
],
|
|||
|
|
token : 'token', //本地存储token的变量名
|
|||
|
|
login_page : '/pages/public/login' //拦截后跳转的登陆页路径
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
注：封装请求文件（/utils/request.js）中，若服务器返回错误码大于400,则也跳转登陆页。
|
|||
|
|
|
|||
|
|
```
|
|||
|
|
if(res.code > 400){
|
|||
|
|
clearStorageSync('token')
|
|||
|
|
useRouter(systemConfig.login_page, 'reLaunch')
|
|||
|
|
}else{
|
|||
|
|
reslove(res)
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 在线升级
|
|||
|
|
|
|||
|
|
本项目集成了在线升级组件（仅支持APP），文件在：**components/appUpdate**，是否更新需要服务器返回如下JSON信息：
|
|||
|
|
|
|||
|
|
```json
|
|||
|
|
{
|
|||
|
|
"code": 0,
|
|||
|
|
"platform": "android",
|
|||
|
|
"version": "1.3.0",
|
|||
|
|
"downUrl": "下载地址",
|
|||
|
|
"updateContent": "修复BUG",
|
|||
|
|
"force" : 0
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
> code为0时会提示更新，1则不弹出更新窗口。
|
|||
|
|
>
|
|||
|
|
> 测试更新弹出窗口，可修改api.js中的检测更新接口地址为：/api/checkVersion2
|
|||
|
|
|
|||
|
|
## 本地调试工具vconsole
|
|||
|
|
|
|||
|
|
本项目集成了本地调试工具vconsole，主要用于在生成APP或小程序后方便调试检查错误。
|
|||
|
|
|
|||
|
|
若不需要开启，可以修改配置文件config/config.js是否开启：
|
|||
|
|
|
|||
|
|
`vconsole_status: 1, //是否启用调试工具，1为启用，0不启用`
|
|||
|
|
|
|||
|
|
## 分包
|
|||
|
|
|
|||
|
|
增加分包功能，分包功能主要针对微信小程序，分包配置在pages.json中subPackages段内。如果不需要分包可以删除，并修改manifest.json 中"mp-weixin“段中 ` "subPackages" : true` 删除。
|
|||
|
|
|
|||
|
|
## 集成UI
|
|||
|
|
|
|||
|
|
本项目含集成了uview,z-paging，具体使用方法见官方文档。
|
|||
|
|
|
|||
|
|
uview官方文档：[介绍 | uView - 多平台快速开发的UI框架 - uni-app UI框架](https://v1.uviewui.com/components/intro.html)
|
|||
|
|
|
|||
|
|
z-paging官方文档：[介绍 | z-paging文档](https://z-paging.zxlee.cn/start/intro.html)（非常方便的实现上拉加载、下拉刷新等功能）
|
|||
|
|
|
|||
|
|
## 其他说明
|
|||
|
|
|
|||
|
|
**下载说明：建议单独下载文件后并解压，并在HB中打开目录进行演示，不要覆盖现在项目。**
|
|||
|
|
|
|||
|
|
注：本项目中接口服务器和数据为mock数据，运行即可看到数据。
|
|||
|
|
|
|||
|
|
登陆： 随机输入用户名和密码都可以登陆成功。
|
|||
|
|
|
|||
|
|
如果在使用过程中遇到问题，可以在评论区反馈也可加微信liuyan814。
|