乐趣区

基于uniapp多平台管理系统模板uniappadmin

<center class=”half”>
<img src=”http://silianpan.cn/wp-conten…; width=”230″/>
<img src=”http://silianpan.cn/wp-conten…; width=”285″/>
<img src=”http://silianpan.cn/wp-conten…; width=”220″/>
</center>

H5 在线预览

Android APK 下载地址

Github

Gitee

一、前言

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

  • UI 方面:登陆模板、顶部固定搜索框、顶部滑动选项卡、字段信息卡片、一周信息卡片、时间轴
  • 功能方面:下拉刷新上拉加载功能、文件在线预览功能
  • 内置组件:底部标签导航、顶部导航栏、商品导航、uni ui
  • 第三方插件

    • UI 库 colorUI css 库、ThorUI 组件库(参考 UI 方案)
    • 其他 uCharts 高性能跨全端图表、mescroll- 支持 uni-app 的下拉刷新上拉加载组件、日期时间选择器 tui-datetime
  • 解决方案(重要)

    • 文件在线预览方案,另见文章《跨平台(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,参考代码

原理: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; 是路径替换,第一个参数是正则表达式,&dollar;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
}

<span style=”color:red”> 注意:一定要使用 plus.runtime.getProperty(plus.runtime.appid, (wgtinfo) =>()),回调函数返回的 wgtinfo 对象的 versionCode 做判断,wgtinfo.version 是版本字符串,wgtinfo.name 是 app 应用名称 </span>

四、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.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 方法不会调用。具体原理不太清楚,还请大佬能解释一下不?

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

六、后续计划

  • [] 消息推送

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

七、效果

H5

<img src=”http://silianpan.cn/wp-conten…; width=”120″ alt=”h5″/>

Android APK

<img src=”http://silianpan.cn/wp-conten…; width=”120″ alt=”android-apk”/>

<center> 开源不易,且用且珍惜!</center>

<center style=”font-size:20px”> 赞助作者 </center>

<center class=”half”>
<img src=”http://silianpan.cn/wp-conten…; width=”240″/>
<img src=”http://silianpan.cn/wp-conten…; width=”240″ />
</center>

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

退出移动版