更新记录
1.0.7(2024-01-08)
删除vconsole(在APP中无法使用)
1.0.6(2023-12-29)
更新注册登陆、我的中的一些页面示例及相关接口。
1.0.5(2023-12-23)
修复点击我的,无反应的BUG 删除图鸟UI
查看更多平台兼容性
Vue2 | Vue3 |
---|---|
√ | × |
App | 快应用 | 微信小程序 | 支付宝小程序 | 百度小程序 | 字节小程序 | QQ小程序 |
---|---|---|---|---|---|---|
HBuilderX 3.93 app-vue | √ | √ | √ | √ | √ | √ |
钉钉小程序 | 快手小程序 | 飞书小程序 | 京东小程序 |
---|---|---|---|
√ | √ | √ | √ |
H5-Safari | Android Browser | 微信浏览器(Android) | QQ浏览器(Android) | Chrome | IE | Edge | Firefox | PC-Safari |
---|---|---|---|---|---|---|---|---|
√ | √ | √ | √ | √ | √ | √ | √ | √ |
项目说明
本项目可以快速搭建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/3553664-0-default' //开发环境请求地址
} else {
// 生产环境
BASE_URL = 'https://mock.apifox.com/m1/3553664-0-default' //生成环境请求地址
}
export default BASE_URL
统一接口管理文件: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中引入)
//请求参数
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为例,登陆页不需要拦截则设置如下,还可添加其他不需要拦截的页面。
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信息:
{
"code": 0,
"platform": "android",
"version": "1.3.0",
"downUrl": "下载地址",
"updateContent": "修复BUG",
"force" : 0
}
code为0时会提示更新,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文档(非常方便的实现上拉加载、下拉刷新等功能)
其他说明
下载说明:建议单独下载文件后并解压,并在HB中打开目录进行演示,不要覆盖现在项目。
注:本项目中接口服务器和数据为mock数据,运行即可看到数据。
登陆: 随机输入用户名和密码都可以登陆成功。
如果在使用过程中遇到问题,可以在评论区反馈也可加微信liuyan814。