多平台管理系统模板uniapp-admin
所属分类:WEB开发
开发工具:JavaScript
文件大小:4188KB
下载次数:4
上传日期:2020-03-04 11:45:57
上 传 者:
kun。
说明: 一套完整的uni-app管理系统前端系统
(A complete front-end system of uni app management system)
文件列表:
多平台管理系统模板uniapp-admin\api\api.js (2053, 2020-02-21)
多平台管理系统模板uniapp-admin\App.vue (4381, 2020-02-21)
多平台管理系统模板uniapp-admin\colorui\animation.css (2593, 2020-02-21)
多平台管理系统模板uniapp-admin\colorui\components\cu-custom.vue (1434, 2020-02-21)
多平台管理系统模板uniapp-admin\colorui\icon.css (71349, 2020-02-21)
多平台管理系统模板uniapp-admin\colorui\main.css (64334, 2020-02-21)
多平台管理系统模板uniapp-admin\common\css\common.css (2841, 2020-02-21)
多平台管理系统模板uniapp-admin\common\css\iconfont.css (4071, 2020-02-21)
多平台管理系统模板uniapp-admin\common\css\uni.css (25322, 2020-02-21)
多平台管理系统模板uniapp-admin\common\lib\md5.min.js (9202, 2020-02-21)
多平台管理系统模板uniapp-admin\common\lib\u-charts.min.js (92253, 2020-02-21)
多平台管理系统模板uniapp-admin\components\mescroll-uni\mescroll-uni-option.js (1618, 2020-02-21)
多平台管理系统模板uniapp-admin\components\mescroll-uni\mescroll-uni.css (3881, 2020-02-21)
多平台管理系统模板uniapp-admin\components\mescroll-uni\mescroll-uni.js (29850, 2020-02-21)
多平台管理系统模板uniapp-admin\components\mescroll-uni\mescroll-uni.vue (11813, 2020-02-21)
多平台管理系统模板uniapp-admin\components\tui\tui-datetime.vue (9201, 2020-02-21)
多平台管理系统模板uniapp-admin\components\uni-badge\uni-badge.vue (2247, 2020-02-21)
多平台管理系统模板uniapp-admin\components\uni-card\uni-card.vue (5797, 2020-02-21)
多平台管理系统模板uniapp-admin\components\uni-goods-nav\uni-goods-nav.vue (4298, 2020-02-21)
多平台管理系统模板uniapp-admin\components\uni-icons\uni-icons.vue (46241, 2020-02-21)
多平台管理系统模板uniapp-admin\components\uni-list\uni-list.vue (743, 2020-02-21)
多平台管理系统模板uniapp-admin\components\uni-list-item\uni-list-item.vue (4925, 2020-02-21)
多平台管理系统模板uniapp-admin\components\uni-nav-bar\uni-nav-bar.vue (4766, 2020-02-21)
多平台管理系统模板uniapp-admin\components\uni-popup\uni-popup.vue (3771, 2020-02-21)
多平台管理系统模板uniapp-admin\components\uni-status-bar\uni-status-bar.vue (439, 2020-02-21)
多平台管理系统模板uniapp-admin\components\uni-tag\uni-tag.vue (3311, 2020-02-21)
多平台管理系统模板uniapp-admin\components\watch-login\css\icon.css (72564, 2020-02-21)
多平台管理系统模板uniapp-admin\components\watch-login\watch-button.vue (3278, 2020-02-21)
多平台管理系统模板uniapp-admin\components\watch-login\watch-input.vue (4400, 2020-02-21)
多平台管理系统模板uniapp-admin\config\index.js (487, 2020-02-21)
多平台管理系统模板uniapp-admin\FILE_PREVIEW.md (22268, 2020-02-21)
多平台管理系统模板uniapp-admin\hybrid\html\build\pdf.js (731653, 2020-02-21)
多平台管理系统模板uniapp-admin\hybrid\html\build\pdf.js.map (1207855, 2020-02-21)
多平台管理系统模板uniapp-admin\hybrid\html\build\pdf.worker.js (1651447, 2020-02-21)
多平台管理系统模板uniapp-admin\hybrid\html\build\pdf.worker.js.map (3133372, 2020-02-21)
多平台管理系统模板uniapp-admin\hybrid\html\web\cmaps\78-EUC-H.bcmap (2404, 2020-02-21)
多平台管理系统模板uniapp-admin\hybrid\html\web\cmaps\78-EUC-V.bcmap (173, 2020-02-21)
多平台管理系统模板uniapp-admin\hybrid\html\web\cmaps\78-H.bcmap (2379, 2020-02-21)
多平台管理系统模板uniapp-admin\hybrid\html\web\cmaps\78-RKSJ-H.bcmap (2398, 2020-02-21)
多平台管理系统模板uniapp-admin\hybrid\html\web\cmaps\78-RKSJ-V.bcmap (173, 2020-02-21)
... ...
---
title: "基于uni-app多平台管理系统模板uniapp-admin"
author: silianpan
date: 2019-10-26
output: word_document
---
## 基于uni-app多平台管理系统模板uniapp-admin
[H5在线预览](http://113.62.127.199/ua/)
[Android APK 下载地址](http://silianpan.cn/wp-content/uploads/2019/10/ua1.0.apk)
[Github](https://github.com/silianpan/uniapp-admin)
[Gitee](https://gitee.com/twofloor/uniapp-admin)
### 一、前言
uniapp-admin是基于uni-app开发的管理系统模板。该模板集成了如下的功能:
* **UI方面**:登陆模板、顶部固定搜索框、顶部滑动选项卡、字段信息卡片、一周信息卡片、时间轴
* **功能方面**:下拉刷新上拉加载功能、文件在线预览功能
* **内置组件**:底部标签导航、顶部导航栏、商品导航、uni ui
* **第三方插件**
* **UI库** [colorUI css库](http://ext.dcloud.net.cn/plugin?id=239)、[ThorUI组件库](https://ext.dcloud.net.cn/plugin?id=556)([参考UI方案](https://ask.dcloud.net.cn/article/35489))
* **其他** [uCharts高性能跨全端图表](https://ext.dcloud.net.cn/plugin?id=271)、[mescroll-支持uni-app的下拉刷新上拉加载组件 ](https://ext.dcloud.net.cn/plugin?id=343)、[日期时间选择器tui-datetime](http://ext.dcloud.net.cn/plugin?id=239)
* **解决方案(重要)**
* 文件在线预览方案,另见文章[《跨平台(uni-app)文件在线预览解决方案》](https://github.com/silianpan/uniapp-admin/blob/master/FILE_PREVIEW.md)
* 开发环境和生产环境跨域方案
* APP整包升级/更新方案
* API调用方案
* 消息推送方案,另见文章[《uni-app消息推送方案》](https://github.com/silianpan/uniapp-admin/blob/master/PUSH_MESSAGE.md)
如果有欠缺的地方,或者有更好的想法,大家可以**多多交流**,文章最后可以加我。
### 二、开发环境和生产环境跨域方案
> 跨域的解决方法之一就是采用*******
#### 2.1 开发环境
* 在manifest.json源码视图中,修改h5部分,添加端口port和***proxy。
```json
"h5" : {
"devServer" : {
"port" : 9090,
"disableHostCheck" : true,
"proxy" : {
"/ua/ua-service" : {
"target" : "http://localhost:8080",
"changeOrigin" : true,
"secure" : false,
"pathRewrite" : {
"^/ua" : ""
}
},
"/ua-service" : {
"target" : "http://localhost:8080",
"changeOrigin" : true,
"secure" : false
}
}
},
"title" : "uniapp-admin",
"router" : {
"mode" : "hash",
"base" : "/ua"
}
}
```
* 根据不同平台,自定义全局配置baseUrl,[参考代码](https://github.com/silianpan/uniapp-admin/blob/master/config/index.js)
> 原理:h5端配置api前缀,然后proxy***(在manifest.json的proxy);
> APP端不存在跨域问题,直接配置全域名或ip地址即可
```js
/**
* ip地址或域名
*/
const ipAddress = 'http://localhost:8080'
// 文件访问地址
const fileAddr = 'http://localhost:8082/fileUpload/'
/**
* api前缀
*/
const apiPrefix = '/ua-service'
/**
* 针对不同平台的baseUrl
*/
const getBaseUrl = () => {
// #ifdef H5
return apiPrefix
// #endif
// #ifndef H5
return ipAddress + apiPrefix
// #endif
}
export default {
/**
* 针对不同平台的baseUrl
*/
baseUrl: getBaseUrl(),
fileAddr
}
```
* 在ui.request的参数选项中配置baseUrl,[参考代码](https://github.com/silianpan/uniapp-admin/blob/master/api/api.js)
```js
// 设置默认配置
minRequest.setConfig((config) => {
config.baseURL = globalConfig.baseUrl
return config
})
```
#### 2.2 生产环境
> 生产环境的跨域,典型的方案就是采用Nginx***
配置如下:
```conf
# 前端访问***
location /ua {
alias /root/ua;
index index.html index.htm;
try_files $uri $uri/ /index.html?/$request_uri;
}
# 服务端***,对应开发环境proxy
location ~/ua/ua-service/* {
rewrite ^/ua/(.*)$ /$1 break;
proxy_pass http://service;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
proxy_connect_timeout 360000s;
proxy_read_timeout 360000s;
proxy_send_timeout 360000s;
}
# 服务端***,对应开发环境proxy
location ~/ua-service/* {
proxy_pass http://service;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
proxy_connect_timeout 360000s;
proxy_read_timeout 360000s;
proxy_send_timeout 360000s;
}
```
其中*proxy_pass http://service*的service是配置在nginx的http{}下的后端服务
```config
upstream service {
server 127.0.0.1:8080 max_fails=1 fail_timeout=10s;
}
```
rewrite ^/ua/(.*)$ \/\$1 break;是路径替换,第一个参数是正则表达式,\$1是正则表达式中第一个括号内容。
### 三、APP整包升级/更新方案
参考文档,[uni-app 整包升级/更新方案 ](https://ask.dcloud.net.cn/article/34972),另外也有,[uni-app 资源在线升级/热更新](https://ask.dcloud.net.cn/article/35667)
本项目是采用整包升级更新方案,如下:
```js
/**
* app整包更新检测
*/
appUpgrade() {
//#ifndef APP-PLUS
uni.showToast({
title: '目前只支持Android版本软件更新',
icon: 'none'
})
//#endif
//#ifdef APP-PLUS
uni.getSystemInfo({
success: sysInfo => {
let platform = sysInfo.platform
plus.runtime.getProperty(plus.runtime.appid, (wgtinfo) => {
// app版本字符串如:1.1.0
// this.appInfo.version = wgtinfo.version
// app名称
// this.appInfo.name = wgtinfo.name
let params = {
appid: plus.runtime.appid,
// app整数版本号,如110,一定要用versionCode做判断
version: wgtinfo.versionCode,
platform: platform
}
this.$minApi.findUpgradeApp(params).then(appRes => {
if (appRes.appid) {
uni.showModal({
title: "下载更新提示",
content: appRes.note,
showCancel: false,
confirmText: '确定',
success: sucRes => {
if (sucRes.confirm) {
plus.runtime.openURL(appRes.url)
// uni.downloadFile({
// url: appRes.url,
// success: res => {}
// })
}
}
})
} else {
uni.showToast({
title: '已经是最新版本了。',
icon: 'none'
})
}
})
})
}
})
//#endif
}
```
注意:一定要使用plus.runtime.getProperty(plus.runtime.appid, (wgtinfo) =>()),回调函数返回的wgtinfo对象的versionCode做判断,wgtinfo.version是版本字符串,wgtinfo.name是app应用名称
### 四、API调用方案
核心是调用uni.request,[参考代码](https://github.com/silianpan/uniapp-admin/blob/master/utils/MinRequest.js)
```js
request(options = {}) {
options.baseURL = options.baseURL || this[config].baseURL
options.dataType = options.dataType || this[config].dataType
options.url = MinRequest[isCompleteURL](options.url) ? options.url : (options.baseURL + options.url)
options.data = options.data
options.header = { ...options.header,
...this[config].header
}
options.method = options.method || this[config].method
options = { ...options,
...MinRequest[requestBefore](options)
}
return new Promise((resolve, reject) => {
options.success = function(res) {
resolve(MinRequest[requestAfter](res))
}
options.fail = function(err) {
reject(MinRequest[requestAfter](err))
}
uni.request(options)
})
}
```
### 五、消息推送方案
另见文章[《uni-app消息推送方案》](https://github.com/silianpan/uniapp-admin/blob/master/PUSH_MESSAGE.md)
### 六、问题解决
#### 6.1 怎么获取应用真正的名称和版本信息?
一定要使用plus.runtime.getProperty(plus.runtime.appid, (wgtinfo) =>()),回调函数返回的wgtinfo对象的versionCode做判断,wgtinfo.version是版本字符串,wgtinfo.name是app应用名称
#### 6.2 APP端,模板中v-for不能调用方法,如:v-for="xxx in func(xxx)",这种情况下,func方法不会调用。具体原理不太清楚,还请大佬能解释一下不?
解决办法:提前将数据格式化好,然后套上模板。
### 七、后续计划
- [x] 消息推送
大家也可以提出想要的模板或功能
### 八、效果
#### H5
#### Android APK
####
开源不易,且用且珍惜!
赞助作者
转载请注明:[溜爸 基于uni-app多平台管理系统模板uniapp-admin](http://silianpan.cn/index.php/2019/10/26/uniapp_admin/)
近期下载者:
相关文件:
收藏者: