开源软件名称：

uniapp-admin

开源软件地址：

https://gitee.com/twofloor/uniapp-admin

开源软件介绍：

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

代码地址

Github

Gitee

一、前言

uniapp-admin是基于uni-app开发的管理系统模板。该模板集成了如下的功能：

UI方面：登陆模板、顶部固定搜索框、顶部滑动选项卡、字段信息卡片、一周信息卡片、时间轴
功能方面：下拉刷新上拉加载功能、文件在线预览功能
内置组件：底部标签导航、顶部导航栏、商品导航、uni ui
第三方插件
- UI库 colorUI css库、ThorUI组件库(参考UI方案)
- 其他 uCharts高性能跨全端图表、mescroll-支持uni-app的下拉刷新上拉加载组件、日期时间选择器tui-datetime
解决方案(重要)
- 文件在线预览方案，另见文章《跨平台（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;}# 服务端代理，对应开发环境proxylocation ~/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;}# 服务端代理，对应开发环境proxylocation ~/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)  })}