vk-uview-ui

插件市场地址： 点击前往

vk-uview-ui и uview-ui: в чём разница?

vk-uview-ui — это версия VK, основанная на uview-ui 1.8.3. По сути, vk-uview-ui остаётся uview-ui, но представляет собой «заветную» версию от VK, которая поддерживается ими.

uview-ui является рекомендуемым UI для клиентской части vk-unicloud быстрого фреймворка разработки. Многие пользователи VK используют uview-ui.

Поскольку автор uview-ui в настоящее время сосредоточен на версии nvue uView 2.0, у него нет времени поддерживать uView 1.0. Поэтому он выпустил свою заветную версию vk-uview-ui.

Здесь также следует поблагодарить автора uview-ui за его открытый вклад и ещё раз выразить признательность за открытый исходный код. Кроме того, vk-uview-ui также полностью открыт.

В чём разница между vk-uview-ui и uview-ui 1.8.3 с точки зрения функциональности?

• 1. Самое большое преимущество: одновременная поддержка Vue3.0 и Vue2.0. Сейчас uview-ui поддерживает Vue3.0 (это должно быть одним из немногих компонентов uniapp Vue3.0).
• 2. Выпущено в форме модулей uni_modules, что удобно для обновления одним щелчком мыши (компоненты будут автоматически загружаться по требованию, без необходимости вручную писать правила easycom (обратите внимание, что вам нужно удалить ранее написанные правила easycom, в корневом каталоге проекта pages.json)).
• 3. Некоторые компоненты были слегка скорректированы, и большинство изменений не повлияют на работу вашего предыдущего кода (например, после однократного нажатия на клавиатуре номерного знака автомобиля будет автоматически переключён на английскую + цифровую клавиатуру). Однако следующие изменения могут повлиять на работу вашего кода, пожалуйста, ознакомьтесь с ними, прежде чем решите, стоит ли использовать эту версию.
  • • 3.1. Статический источник данных для выбора провинции, города и района в u-picker использует данные из таблицы opendb-city-china в unicloud. Поскольку источник данных изменился, это может повлиять на вас.
  • • 3.2. Встроенная функция интернационализации uview-ui была удалена (её сложно реализовать в Vue3, поэтому автор решил её удалить).
  • • 3.3. Есть и другие незначительные изменения (эта версия была переработана несколько месяцев назад, когда только что вышел uniapp Vue3, но из-за большого количества ошибок в то время она не была выпущена, вы можете представить себе сцену, где автор столкнулся с ошибками, которые летали повсюду).
  • • 3.4. В Vue3.0 совместимость uniapp версии Vue3 в H5 APP (не nvue) и небольших программах WeChat хорошая, но для других небольших программ она пока недоступна.

_В настоящее время серьёзных проблем быть не должно, поскольку автор сам использует этот компонент для разработки своих проектов, поэтому вам не нужно беспокоиться о том, что он останется без поддержки.

Если вы поняли вышеизложенное, продолжайте читать, чтобы быстро начать работу.

Быстрый старт работы с Vue2.0

Даже если это версия Vue2, она также была оптимизирована по сравнению с оригинальной версией uView1.0, например, автомобиль автоматически переключается на английский язык после одного нажатия на номерной знак, а обратный отсчёт поддерживает миллисекунды и т. д.

Поддержка: H5, App(vue), небольшие программы WeChat, небольшие программы Alipay (другие небольшие программы не тестировались).

• 1. Импортируйте uView в main.js.

import uView from './uni_modules/vk-uview-ui';
Vue.use(uView);

• 2. Импортируйте базовый стиль в App.vue.

<style lang="scss">
	@import "./uni_modules/vk-uview-ui/index.scss";
</style>

• 3. Импортируйте глобальный файл переменных scss в uni.scss.

@import "@/uni_modules/vk-uview-ui/theme.scss";

Быстрый запуск с помощью Vue3.0

Не рекомендуется обновлять старые проекты до Vue3.0 (обновление очень сложное, рекомендуется рассмотреть возможность использования Vue3.0 для новых проектов).

Поддержка: H5, App(vue), небольшие программы WeChat (другие небольшие программы не тестировались)

В настоящее время обнаружена серьёзная ошибка в версии Vue3 H5 (проблема не связана с этим UI-фреймворком), разработка и отладка не вызывают проблем, но при публикации в хостинге переднего плана стиль становится беспорядочным. Было установлено, что проблема связана с HBX, и ожидается, что HBX исправит эту проблему (ошибка была исправлена в версии hbx3.3.0).

• 1. Предварительные шаги: измените версию vue в manifest.json на vue3.
• 2. Создайте новый файл index.html в корне проекта, содержимое файла следующее:

<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
		<title></title>
		<!--preload-links-->
		<!--app-context-->
		<!-- 配置H5的 web图标static/logo.png -->
		<link rel="icon" href="./static/logo.png" />
	</head>
	<body>
		<div id="app">
			<!--app-html-->
		</div>
		<script type="module" src="/main.js"></script>
	</body>
</html>

• 3. Импортируйте uView UI в main.js.

// 引入 uView UI
import uView from './uni_modules/vk-uview-ui';

import { createSSRApp } from 'vue'

export function createApp() {
  const app  = createSSRApp(App)
  
  // 使用 uView UI
  app.use(uView)
  
  return { app }
}

• 4. Импортируйте основной стиль в App.vue.

<style lang="scss">
	@import "./uni_modules/vk-uview-ui/index.scss";
</style>

• 5. Импортируйте файл глобальных переменных scss в uni.scss.

@import "@/uni_modules/vk-uview-ui/theme.scss";