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

H5在线预览

Android APK 下载地址

Github

Gitee

1、前言

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

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

若是有欠缺的地方，或者有更好的想法，你们能够多多交流，文章最后能够加我。

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

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

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是正则表达式中第一个括号内容。

3、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应用名称

4、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)
  })
}
复制代码

5、问题解决

5.1 怎么获取应用真正的名称和版本信息？

必定要使用plus.runtime.getProperty(plus.runtime.appid, (wgtinfo) =>())，回调函数返回的wgtinfo对象的versionCode作判断，wgtinfo.version是版本字符串，wgtinfo.name是app应用名称

5.2 APP端，模板中v-for不能调用方法，如：v-for="xxx in func(xxx)"，这种状况下，func方法不会调用。具体原理不太清楚，还请大佬能解释一下不？

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

6、后续计划

• 消息推送

你们也能够提出想要的模板或功能

7、效果

H5

Android APK

开源不易，且用且珍惜！

赞助做者

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