Резюме апплета разработки uniapp

Апплет WeChat

1. Создайте новый проект пользовательского интерфейса

Прежде всего, наш пользовательский интерфейс основан на ColorUI, а когда у ColorUI нет стиля, он основан на пользовательском интерфейсе, который поставляется с Uniapp. Таким образом, в начале проекта должны быть представлены эти два UI-фреймворка.

Как следует, создайте новый проект uni-ui.

quicker_89d1eef4-bf9b-430a-9c05-109930838df8.png

Создайте еще один проект ColorUI.

quicker_f8ba6686-35f1-497a-94af-7f901ca06aaf.png

Если вам нужно наблюдать за эффектом ColorUI, чтобы знать, какие компоненты вам нужно использовать, вы можете запустить его следующим образом.

quicker_ec46cba3-9381-4a29-99cc-a8547d998416.png

То же самое верно и для uni-ui. Таким образом, если нужные нам стили можно извлечь из этих двух пользовательских интерфейсов.

2. Создайте свой собственный проект

Создайте новый собственный проект uniapp после завершения создания. Структура проекта следующая.

t34XQS.png

Затем сначала введите стиль ColorUI:

  • Скопируйте каталог colorui в проекте ColorUI в корневой каталог вашего собственного проекта.
  • Вставьте два файла css в файл App.vue в корневом каталоге вашего собственного проекта, как показано ниже.
<style>
	/*每个页面公共css */
	@import "colorui/main.css";
	@import "colorui/icon.css";

</style>
  • Какой стиль нужен, вы можете перейти в проект ColorUI, чтобы проверить элемент и скопировать соответствующий класс.

Если нужный вам стиль недоступен в ColorUI, вам нужно ввести стиль uni-ui:

  • Скопируйте common из корневого каталога проекта uni-ui в корневой каталог вашего собственного проекта.
  • Введение файлов CSS в App Directory.Vue Последнее приложение .Vue похоже:
<style>
	/*每个页面公共css */
	@import "colorui/main.css";
	@import "colorui/icon.css";
	@import url("common/uni.css");
</style>

С этого момента импорт проекта пользовательского интерфейса завершен.

3. Некоторая подготовка

  • Использовать панель вкладок: вы можете перейти на официальный сайт uniapp, найти часть панели вкладок и скопировать ее для использования.

quicker_789df5d5-7d4c-4169-8c46-fe1053146921.png

  • Перейти на страницу, инициировать запрос: перейдите на официальный сайт uniapp и используйте компоненты uniapp
  • Если страница слишком сложная, рекомендуется разделить ее на несколько компонентов. Создайте новый каталог компонентов в каталоге страницы и создайте несколько компонентов (файлы vue) в каталоге компонентов, как показано на следующем рисунке:

quicker_b8bfb96c-babe-4edf-8f9a-f66efcef52a3.png

  • Импорт компонентов: как показано на рисунке ниже, импортируйте компоненты там, где они должны использоваться, и даже передавайте значения.

quicker_e12a6ed7-acad-469a-82af-efe1c60870cf.png

4. Макет страницы

Вот несколько практических советов по макету страницы.

  • Элементы располагаются сверху вниз на эксклюзивной строке, просто используйте стандартный макет потока div.
  • Если элементы необходимо расположить в ряд, требуется плавающая компоновка. Однако плавающий макет не может точно расположить элемент в указанной позиции в контейнере, поэтому необходимо позиционировать макет положения. Но этот метод должен выйти из потока документов и требует различных очисток для очистки отстающего поплавка. Рекомендуется гибкая компоновка
  • Подводя итог, div используется для размещения сверху вниз, а float и position используются для размещения слева направо. или использовать флекс
  • Преимуществ использования flex много, вы можете выравнивать содержимое в левом и правом макете, чтобы размещать элементы в указанной позиции. Отсюда и популярное использование этого макета.

Рекомендуемое руководство

Для тех, кто знаком с основами VUE, рекомендуется ознакомиться со следующими учебными пособиями для начала работы:воооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооо

Категории