Создание мобильных приложений с Vue Native

Создание мобильных приложений с Vue Native

От автора: Vue Native — это платформа JavaScript, предназначенная для создания кроссплатформенных мобильных приложений, которые могут работать как на Android, так и на iOS с помощью JavaScript. Обернув вокруг React Native, разработчики могут использовать Vue Native для создания мобильных приложений с использованием Vue.js.

Из-за этого все, что можно сделать в React Native, можно сделать в Vue Native, а код компилируется в React Native. Таким образом, разработчики получают выгоду от того, что предлагают экосистемы Vue и React Native.
В этом посте мы рассмотрим функции Vue Native и то, как создать мобильное приложение с помощью Vue Native.

Возможности Vue Native

Vue Native имеет множество полезных функций, которые следует учитывать при создании мобильного приложения с Vue.js.

Декларативный рендеринг

Vue Native использует парадигму декларативного программирования. Это означает, что мы просто объявляем, как мы хотим, чтобы наши компоненты и состояние отображались для получения желаемых результатов.

Двусторонняя привязка

В нашем приложении Vue Native мы можем обмениваться данными между нашим классом компонента и его шаблоном. Если мы изменим данные в нашем состоянии, они автоматически отобразятся в пользовательском интерфейсе.

Фреймворк VUE JS: быстрый старт

Получите бесплатный курс и узнайте, как создать веб-приложение на трендовой Frontend-технологии VUE JS с полного нуля

Узнать подробнее

Мы по-прежнему должны получить доступ к v-модели для двусторонней привязки данных. Это означает, что мы можем привязать значение входного элемента к свойству данных нашего компонента с помощью v-модели.

Богатство экосистемы Vue.js

Экосистема Vue — одна из крупнейших и наиболее быстрорастущих экосистем в области JavaScript. Создание приложения с помощью Vue Native обеспечивает преимущества более крупной экосистемы Vue. Это означает, что мы можем использовать такие функции, как v-if для условного рендеринга, v-model для двусторонней привязки данных, v-for для рендеринга списка и Vuex для управления состоянием.

Компиляция в React Native

Поскольку Vue Native зависит от React Native, разработчикам, знакомым с экосистемой React Native, легче освоиться. Мы также можем визуализировать компоненты React Native в Vue Native, не написав ни единой строчки дополнительной конфигурации для интеграции и повышения производительности.

Настройка среды разработки

Самый быстрый и простой способ начать работу с Vue Native — это загрузить мобильное приложение с помощью Vue Native CLI. Этот интерфейс командной строки генерирует простое одностраничное приложение с использованием интерфейса командной строки Expo или интерфейса командной строки React Native.

Это означает, что мы должны установить любой CLI, в зависимости от потребностей нашего приложения, чтобы использовать Vue Native CLI.

Для начала мы должны установить некоторые зависимости. Сначала выполните следующую команду, чтобы глобально установить Vue Native CLI:

Затем установите Expo CLI глобально, хотя его можно заменить на React Native CLI:

Создание проекта Vue Native

Теперь, когда и Vue Native, и Expo CLI установлены, давайте создадим проект Vue Native с помощью следующей команды:

Запустите сервер разработки, перейдя в корневую папку проекта и выполните следующую команду:

Metro Bundler, который компилирует код JavaScript в React Native, запускается по адресу http://localhost:19002/. При посещении http://localhost: 8080 / в веб-браузере открывается следующая страница:

Создание мобильных приложений с Vue Native

Чтобы просмотреть приложение Vue Native на физическом устройстве, отсканируйте QR-код в браузере и откройте ссылку в Expo Go для Android или iOS.

Мы также можем открыть приложение в эмуляторе Android или симуляторе iOS, кликнув ссылки, отображаемые в браузере, но не все API-интерфейсы, доступные в Expo Go, доступны в эмуляторе или симуляторе.

При желании мы можем клонировать демонстрационное приложение Kitchen Sink, подготовленное командой Vue Native.

Компоненты пользовательского интерфейса Vue Native

Vue Native поставляется с несколькими готовыми UI-компонентами для создания интерфейса приложения. Давайте взглянем на некоторые из самых важных.

Компонент View

Компонент view работает так же, как тег div в обычном HTML. Этот компонент является фундаментальным блоком для создания пользовательских интерфейсов в Vue Native, как и в React Native. У нас может быть несколько дочерних компонентов для компонента view, как в следующем коде:

Компонент Тext

Для вывода текста в нашем мобильном приложении мы не можем использовать обычные HTML-теги, такие как h1 или p. Вместо этого мы должны использовать компонент <text>…</text>. Использовать этот компонент довольно просто:

Компонент Image

Компонент image отображает статические изображения, сетевые изображения и изображения с устройства пользователя. В отличие от обычного тега img, где мы используем атрибут src, здесь мы привязываем атрибут source в нашем компоненте image для динамической загрузки изображений. Это позволяет webpack объединять наши ресурсы изображений в процессе сборки.

Добавив следующее, мы можем загружать изображения в наше приложение Vue Native:

Компонент TextInput

Компонент TextInput вводит текст в приложение с клавиатуры пользователя. Мы можем использовать v-модель для привязки данных к компоненту TextInput. Это позволяет нам легко получить и установить значение TextInput:

Приведенный выше код отобразит следующий экран в приложении Vue Native:

Создание мобильных приложений с Vue Native

Компонент пользовательского интерфейса NativeBase

Для создания готового к работе мобильного приложения, скорее всего, будет недостаточно использования только встроенных компонентов Vue Native. К счастью для нас, Vue Native сочетает в себе лучшее из экосистем React Native и Vue.js, поэтому мы можем использовать компонент пользовательского интерфейса NativeBase.

Фреймворк VUE JS: быстрый старт, первые результаты

Получите бесплатный курс и узнайте, как создать веб-приложение на трендовой Frontend-технологии VUE JS с полного нуля

Узнать подробнее

NativeBase был создана GeekyAnts, той же командой, что и Vue Native. Этот компонент пользовательского интерфейса дает нам действительно естественный вид и удобство работы с платформой на Android и iOS с использованием той же кодовой базы JavaScript нашего мобильного приложения.

Двусторонняя привязка данных

Обмен данными между нашим шаблоном компонента Vue и состоянием Vue в Vue Native легко осуществляется с помощью v-модели. Мы можем изучить двустороннюю привязку данных с помощью директивы v-model, как показано ниже:

Приводя поле ввода с привязкой данных из нашего состояния к полю ввода и текстовому компоненту, мы видим следующее:

Создание мобильных приложений с Vue Native

Навигация и маршрутизация

Навигация и маршрутизация в нашем приложении Vue Native обрабатываются с помощью библиотеки Vue Native Router. Под капотом эта библиотека использует популярный пакет React Navigation. И Vue Native Router, и React Navigation имеют похожие API, а значит, и установки.

Библиотека не предустановлена, поэтому, чтобы начать работу с навигацией в нашем приложении, мы должны установить ее следующей командой:

Обратите внимание, что для правильной работы Vue Native Router нам необходимо установить следующие пакеты:

Выполните следующую команду, чтобы установить эти пакеты:

Vue Native Router предоставляет StackNavigator и DrawerNavigator для регистрации навигации:

Чтобы перемещаться между экранами, вызовите метод navigate для объекта navigation:

Управление состоянием

Для централизованного шаблона управления состоянием в приложении Vue Native мы можем использовать Vuex, официальную библиотеку управления состоянием для Vue. Интегрировать Vuex просто. Сначала установите Vuex с помощью одной из следующих команд:

Создайте файл центрального хранилища и добавьте state, getters, mutations или actions в зависимости от потребностей приложения. Для простоты используйте объект state:

Использование данных и методов в нашем store сильно отличается от обычного приложения Vue; вот как импортировать и использовать данные в нашем store:

Обратите внимание, что мы не используем this.$store, как это обычно делается при настройке приложений Vue и Vuex.

Доступ к API устройства

Доступ к API устройства в нашем приложении Vue Native возможен благодаря богатой экосистеме React Native. Чтобы получить доступ к API геолокации устройства пользователя в нашем приложении, например, мы можем использовать expo-location следующим образом:

При использовании пакета Expo не требуются дополнительные конфигурации или настройки, что упрощает создание мобильного приложения с Vue Native.

Заключение

Создание мобильного приложения с помощью Vue Native открывает множество возможностей в создании кроссплатформенных мобильных приложений с помощью JavaScript.

Имея доступ к преимуществам экосистем Vue и React Native, разработчики могут писать компоненты .vue и интегрировать пакеты Expo и React Native в приложения практически без дополнительных настроек.

Полный код, используемый в этом руководстве, доступен на GitHub. Спасибо за чтение!

Автор: Ejiro Asiuwhu

Источник: blog.logrocket.com

Редакция: Команда webformyself.

Читайте нас в Telegram, VK, Яндекс.Дзен

Фреймворк VUE JS: быстрый старт, первые результаты

Получите бесплатный курс и узнайте, как создать веб-приложение на трендовой Frontend-технологии VUE JS с полного нуля

Узнать подробнее

VUE JS. Быстрый старт

Создание веб-приложения на VUE JS

Смотреть

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Комментирование закрыто.