На основе шаблона мультиплатформенной системы управления uni-app uniapp-admin

Выпущен uniapp-admin 2.0.0!

• Более полное руководство по разработке
• Настройка темы: поддержка цветовой темы и темного режима, страница красивее
• Интернационализация/многоязычность: интернационализация содержимого приложения и pages.json, поддержка N языков.
• Представляем iconfont: поддержка массивных значков шрифтов
• Внедрить платформу управления интерфейсом rap2: поддержка онлайн-симуляции фиктивных данных
• Запрос интерфейса: baseURL можно настроить отдельно для разных API
• Скорректируйте план обновления приложения: плавное обновление стало проще
• Push-сообщения, предварительный просмотр документов в Интернете, междоменные и другие решения

онлайн-документация

Совет: отсканируйте QR-код Android с помощью мобильного браузера.
Имя пользователя: admin Пароль: admin

кодовый адрес

Github

Gitee

Введение

  uniapp-admin — шаблон системы управления, разработанный на базе uni-app. Шаблон объединяет следующие функции:

• аспект пользовательского интерфейса: шаблон лендинга, верхнее фиксированное окно поиска, верхняя скользящая вкладка, карточка с информацией о поле, карточка с информацией о неделе, временная шкала.
• Функциональные аспекты: функция обновления и загрузки по запросу, функция онлайн-просмотра файлов.
• Встроенные компоненты: Навигация по нижней вкладке, верхняя панель навигации, навигация по продукту, универсальный пользовательский интерфейс.
• сторонние плагины
  • библиотека пользовательского интерфейса css-библиотека colorUI,Библиотека компонентов ThorUI(Эталонная схема пользовательского интерфейса)
  • разное uCharts высокопроизводительная перекрестная диаграмма,mescroll-support pull-down-refresh загрузочный компонент uni-app,средство выбора даты и времени tui-datetime
• Решение (важно)
  • Решение для онлайн-просмотра файлов, см. также статью«Кроссплатформенное (универсальное) решение для онлайн-просмотра файлов»
  • Междоменное решение для среды разработки и производственной среды
  • План обновления/обновления всего пакета APP
  • Схема вызова API

  Если чего-то не хватает или есть идея получше, вы можетемного общения, вы можете добавить меня в конце статьи.

2. Междоменное решение между средой разработки и производственной средой.

Одним из решений в разных областях является использованиеиграет роль

2.1 Среда разработки

• В исходном представлении manifest.json измените раздел h5 и добавьте порт порта и прокси-сервер.

"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, а потом проксировать прокси (прокси в manifest.json); На стороне приложения нет междоменной проблемы, вы можете напрямую настроить полное доменное имя или 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
}

• Настройте baseUrl в параметрах ui.request,Код ссылки

// 设置默认配置
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* — это серверная служба, настроенная под http{} nginx.

upstream service {
  server 127.0.0.1:8080 max_fails=1 fail_timeout=10s;
}

rewrite ^/ua/(.*) \/\1 break — замена пути, первый параметр — регулярное выражение, а $1 — содержимое первой скобки в регулярном выражении.

3. План обновления/обновления всего пакета приложений

справочная документация,решение для обновления/обновления всего пакета 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) =>()) для оценки versionCode объекта wgtinfo, возвращаемого функцией обратного вызова, wgtinfo.version — это строка версии, а wgtinfo .name — это имя приложения.

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. Схема отправки сообщений

См. также статью"решение для отправки сообщений в одном приложении"

6. Решение проблем

6.1 Как получить настоящее имя и информацию о версии приложения?

Обязательно используйте plus.runtime.getProperty(plus.runtime.appid, (wgtinfo) =>()) для оценки versionCode объекта wgtinfo, возвращаемого функцией обратного вызова, wgtinfo.version — это строка версии, а wgtinfo.name это имя приложения

6.2 На стороне приложения v-for в шаблоне не может вызывать методы, такие как: v-for="xxx in func(xxx)", в этом случае метод func вызываться не будет. Конкретный принцип не ясен, не могли бы вы его объяснить?

Решение: отформатируйте данные заранее, а затем примените шаблон.

7. План дальнейших действий

• сообщение

Вы также можете предложить шаблоны или функции, которые вы хотите

8. Эффект

С открытым исходным кодом не просто, но пользуйся и лелеяй

Спонсируемый автор

Для перепечатки указать:Sliding Dad » На основе шаблона мультиплатформенной системы управления uni-app uniapp-admin