uniapp-admin
Muti-platform management system for uniapp, H5, Android, IOS, Min Program.
基于uni-app管理系统模板，支持H5、Android、IOS和小程序
uniapp-admin 2.0.0 重磅发布！
- 更加完善的开发指南
- 主题定制：支持颜色主题和深色模式，页面更加美观
- 国际化/多语言：应用内容和pages.json国际化，支持N种语言
- 引入iconfont：海量字体图标支持
- 引入rap2接口管理平台：支持在线Mock数据模拟
- 接口请求：不同API可以单独配置baseURL
- 调整App升级方案：无缝升级更容易
- 消息推送，在线文档预览，跨域等多种解决方案
在线文档
提示：Android二维码使用手机浏览器扫
用户名：admin 密码：admin
代码地址
一、前言
uniapp-admin是基于uni-app开发的管理系统模板。该模板集成了如下的功能：
- UI方面：登陆模板、顶部固定搜索框、顶部滑动选项卡、字段信息卡片、一周信息卡片、时间轴
- 功能方面：下拉刷新上拉加载功能、文件在线预览功能
- 内置组件：底部标签导航、顶部导航栏、商品导航、uni ui
- 第三方插件
- 解决方案(重要)
- 文件在线预览方案，另见文章《跨平台（uni-app）文件在线预览解决方案》
- 开发环境和生产环境跨域方案
- APP整包升级/更新方案
- API调用方案
- 消息推送方案，另见文章《uni-app消息推送方案》
如果有欠缺的地方，或者有更好的想法，大家可以多多交流，文章最后可以加我。
二、开发环境和生产环境跨域方案
跨域的解决方法之一就是采用代理
2.1 开发环境
- 在manifest.json源码视图中，修改h5部分，添加端口port和代理proxy。
"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，参考代码
原理：h5端配置api前缀，然后proxy代理（在manifest.json的proxy）； APP端不存在跨域问题，直接配置全域名或ip地址即可
/**
* 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，参考代码
// 设置默认配置
minRequest.setConfig((config) => {
config.baseURL = globalConfig.baseUrl
return config
})2.2 生产环境
生产环境的跨域，典型的方案就是采用Nginx代理
配置如下：
# 前端访问代理
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{}下的后端服务
upstream service {
server 127.0.0.1:8080 max_fails=1 fail_timeout=10s;
}
rewrite ^/ua/(.*)$ /$1 break;是路径替换，第一个参数是正则表达式，$1是正则表达式中第一个括号内容。
三、APP整包升级/更新方案
参考文档，uni-app 整包升级/更新方案 ，另外也有，uni-app 资源在线升级/热更新
本项目是采用整包升级更新方案，如下：
/**
* 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，参考代码
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消息推送方案》
六、问题解决
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方法不会调用。具体原理不太清楚，还请大佬能解释一下不？
解决办法：提前将数据格式化好，然后套上模板。
七、后续计划
- 消息推送
大家也可以提出想要的模板或功能
