更新记录

1.0.7（2024-01-08） 下载此版本

删除vconsole(在APP中无法使用)

1.0.6（2023-12-29） 下载此版本

更新注册登陆、我的中的一些页面示例及相关接口。

1.0.5（2023-12-23） 下载此版本

修复点击我的，无反应的BUG 删除图鸟UI

平台兼容性

项目说明

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

统一接口管理及调用

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

let BASE_URL
//开发环境中
if (process.env.NODE_ENV === 'development') {
  // 开发环境
  BASE_URL = 'https://mock.apifox.com/m1/-0-default'  //开发环境请求地址
} else {
  // 生产环境
  BASE_URL = 'https://mock.apifox.com/m1/-0-default'  //生成环境请求地址
}

export default BASE_URL

重要说明：服务器地址为apifox的mock地址，apifox于2024年5月份更换了域名，下载后，需要将上方的域名mock.apifox.com修改为mock.apifox.cn

统一接口管理文件：api/api.js，在里面定义相关接口地址即可(一行一个)。

//列表，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)

pages页面中调用的方法：

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

//============================GET请求===============================
//一、api.js中定义,并设置get方式
export const getList = data => request.get('/api/list', data)  

//请求参数
const params = {
    page: pageNo,
    limit: pageSize
}
//二、调用接口
this.$api.getList(params).then(res => {
    //todo....
})
//如果不需要传递参数，如：this.$api.getList().then...

//============================POST请求===============================
//一、api.js中定义,并设置post方式
export const getList = data => request.post('/api/list', data)  

//请求参数
const params = {
    page: pageNo,
    limit: pageSize
}
//二、调用接口
this.$api.getList(params).then(res => {
    //todo....
})
//如果不需要传递参数，如：this.$api.getList().then...

💡提示：以上POST或GET方式调用代码是一样的，只是请求方式(api.js)设置不同而已。

页面拦截器

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

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

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

页面拦截器配置文件在config/config.js

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

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)

本项目集成了在线升级功能，文件在：/utils/appUpdate.js，APP启动后，会请求接口地址：/api/checkVersion（可以自定义），若要更新需要服务器返回如下JSON信息：

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

💡code:0提示更新，code:1不更新，无弹出窗口。

测试更新弹出窗口，可修改api.js中的检测更新接口地址为：/api/checkVersion2

分包

 增加分包功能，分包功能主要针对微信小程序，分包配置在pages.json中subPackages段内。如果不需要分包可以删除，并修改manifest.json 中"mp-weixin“段中 "subPackages" : true 删除。

集成UI

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

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

z-paging官方文档：介绍 | z-paging文档（非常方便的实现上拉加载、下拉刷新等功能）

图标字体:

引入了图鸟图标库，在uview中使用方法如下：

<u-icon name="game"  custom-prefix="tn-icon"></u-icon>

或：

<text class="tn-icon-game"></text>

更多图标详见：图鸟_icon

💡说明： 1、不支持uview1中部分组件中定义的图标，如：

2、增加图标库可能会增加最终生成包的大小（如微信小程序），如果不需要，可以删除图标库，需要修改的地方有两处： （1）删除static/fonts/iconfont.css文件 （2）删除App.vue代码最下方的引用： @import "@/static/fonts/iconfont.css";

其他说明

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

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

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

如果在使用过程中遇到问题，可以在评论区反馈也可liuyan814。