基于uni-app多平台管理系统模板uniapp-admin

旧城等待， 2023-06-10 09:29 3阅读 0赞

## uniapp-admin 2.0.0 重磅发布！ ##

*  更加完善的开发指南
 *  主题定制：支持颜色主题和深色模式，页面更加美观
 *  国际化/多语言：应用内容和pages.json国际化，支持N种语言
 *  引入iconfont：海量字体图标支持
 *  引入rap2接口管理平台：支持在线Mock数据模拟
 *  接口请求：不同API可以单独配置baseURL
 *  调整App升级方案：无缝升级更容易
 *  消息推送，在线文档预览，跨域等多种解决方案

### [在线文档][Link 1] ###

> 提示：Android二维码使用手机浏览器扫  
>   
> 用户名：admin 密码：admin

![h5][] ![android][]

### 代码地址 ###

[Github][]

[Gitee][]

![ua-gif][]

### 一、前言 ###

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

*  **UI方面**：登陆模板、顶部固定搜索框、顶部滑动选项卡、字段信息卡片、一周信息卡片、时间轴
 *  **功能方面**：下拉刷新上拉加载功能、文件在线预览功能
 *  **内置组件**：底部标签导航、顶部导航栏、商品导航、uni ui
 *  **第三方插件**
    
     *  **UI库** [colorUI css库][colorUI css]、[ThorUI组件库][ThorUI]([参考UI方案][UI])
     *  **其他** [uCharts高性能跨全端图表][uCharts]、[mescroll-支持uni-app的下拉刷新上拉加载组件 ][mescroll-_uni-app_]、[日期时间选择器tui-datetime][colorUI css]
 *  **解决方案(重要)**
    
     *  文件在线预览方案，另见文章[《跨平台（uni-app）文件在线预览解决方案》][uni-app]
     *  开发环境和生产环境跨域方案
     *  APP整包升级/更新方案
     *  API调用方案

如果有欠缺的地方，或者有更好的想法，大家可以**多多交流**，文章最后可以加我。

### 二、开发环境和生产环境跨域方案 ###

> 跨域的解决方法之一就是采用**代理**

#### 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，[参考代码][Link 2]

> 原理：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，[参考代码][Link 3]

// 设置默认配置
    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 _]，另外也有，[uni-app 资源在线升级/热更新][uni-app 1]

本项目是采用整包升级更新方案，如下：

/** * 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，[参考代码][Link 4]

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消息推送方案》][uni-app 2]

### 六、问题解决 ###

#### 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方法不会调用。具体原理不太清楚，还请大佬能解释一下不？ ####

解决办法：提前将数据格式化好，然后套上模板。

### 七、后续计划 ###

*  消息推送

大家也可以提出想要的模板或功能

### 八、效果 ###

#### 开源不易，且用且珍惜 ####

#### 赞助作者 ####

![b9c369443b192642f975be9020b3234e.png][] ![weixin.gif][]

转载请注明：[溜爸 » 基于uni-app多平台管理系统模板uniapp-admin][_ _uni-app_uniapp-admin]

[Link 1]: http://ua-doc.silianpan.cn
[h5]: http://silianpan.cn/wp-content/uploads/2020/08/wp_editor_md_5130d93e34fca6703f465b8d173cd042.jpg
[android]: http://silianpan.cn/wp-content/uploads/2020/08/wp_editor_md_5e73998d5012227676299f651d760cf2.jpg
[Github]: https://github.com/silianpan/uniapp-admin
[Gitee]: https://gitee.com/twofloor/uniapp-admin
[ua-gif]: http://silianpan.cn/wp-content/uploads/2020/08/ua.gif
[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
[uni-app]: https://juejin.im/post/6844903977591701517
[Link 2]: https://github.com/silianpan/uniapp-admin/blob/master/config/index.js
[Link 3]: https://github.com/silianpan/uniapp-admin/blob/master/api/api.js
[uni-app _]: https://ask.dcloud.net.cn/article/34972
[uni-app 1]: https://ask.dcloud.net.cn/article/35667
[Link 4]: https://github.com/silianpan/uniapp-admin/blob/master/utils/MinRequest.js
[uni-app 2]: https://juejin.im/post/6844903988056309773
[b9c369443b192642f975be9020b3234e.png]: http://silianpan.cn/wp-content/uploads/2019/10/b9c369443b192642f975be9020b3234e.png
[weixin.gif]: http://silianpan.cn/wp-content/themes/yusi1.0/img/weixin.gif
[_ _uni-app_uniapp-admin]: http://silianpan.cn/index.php/2019/10/26/uniapp_admin/