uniapp快速开发模板(封装request、集成uview、图鸟、在线更新)

项目说明

本项目可以快速搭建uni-app项目,封装request，集成z-paging(下拉刷新，上拉加载)，带页面拦截器，请求锁，请求loading，集成uview,图鸟UI，集成在线更新组件。

接口开发

接口地址：api/env.js，修改服务器地址：

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，在里面定义相关接口地址即可。

import request from '@/utils/request'
//列表
export const getList = data => request.get('/api/list', data)
//登陆
export const login = data => request.post('/api/login', data)
//登陆用户信息
export const baseInfo = data => request.get('/api/baseinfo', data)
//检测版本升级
export const checkVersion = data => request.post('/api/checkVersion', data,false)

说明：

export const baseInfo ，这个baseInfo就是在页面中请求时调用的名称。

request.get ，这个是用post还是get请求。

页面中调用的方法：

GET或POST调用如下：（无须导入接口方法，已在全局文件中main.js引入）

//请求参数
const params = {
    page: pageNo,
    limit: pageSize
}

this.$api.getList(params).then(res => {

})

注：POST或GET调用，则修改api/api.js中对应的接口的类型即可。

其中：this.$api.getList 即对应api/api.js中的getList

页面拦截器

本项目集成了页面拦截器，页面拦截器即表示在白名单的页面URL不拦截，其他页面则拦截。

场景：办公OA APP，只有登陆页面不需要拦截，其他页面则需要拦截。

拦截器与token搭配使用，若是本地无TOKE,APP启动时打开首页，则自动会跳转到登陆页。若本地存在TOKEN，则打开首页时不会再要求登陆。

页面拦截器文件在utlis/interceptor.js，设置：

以OA为例，登陆页不需要拦截则设置如下，若要添加其他页面，则再添加其他页面即可。

// 页面白名单，不受拦截
const whiteList = [
    '/pages/pubilc/login',
]

在线升级

本项目集成了在线升级组件，文件在：components/appUpdate，是否更新需要服务器返回如下JSON信息：

{
        "code": 0,
        "platform": "android",
        "version": "1.3.0",
        "downUrl": "下载地址",
        "updateContent": "修复BUG",
        "force" : 0
    }

code为0时会提示更新，1则不弹出更新窗口。

集成UI

本项目含集成了uview,图鸟，z-paging，具体使用方法见官方文档。

uview官方文档：介绍 | uView - 多平台快速开发的UI框架 - uni-app UI框架

图鸟官方文档：介绍 | TuniaoUI

z-paging官方文档：介绍 | z-paging文档

其他说明

下载地址：https://ext.dcloud.net.cn/plugin?id=15295

下载说明：建议单独下载文件后并解压，并在HB中打开目录进行演示，不要覆盖现在项目。

注：本项目中接口服务器和数据为mock数据，运行即可看到数据。

登陆： 随机输入用户名和密码都可以登陆成功。