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

Из-за этого все, что можно сделать в 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:

JavaScript $ npm install –g vue-native-cli

1	$ npm install –g vue-native-cli

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

JavaScript $ npm install –g expo-cli

1	$ npm install –g expo-cli

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

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

JavaScript vue-native init <yourProjectName>

1	vue-native init <yourProjectName>

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

JavaScript $ cd <yourProjectName> $ npm start

12	$ cd <yourProjectName>$ npm start

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

Чтобы просмотреть приложение 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, как в следующем коде:

<template> <view class=”container”> <text>My Awesome Vue Native App</text> </view> </template>

12345

<template> <view class=”container”> <text>My Awesome Vue Native App</text> </view></template>

Компонент Тext

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

<template> <text>Hello World</text> </template>

123	<template> <text>Hello World</text></template>

Компонент Image

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

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

12345678910111213141516171819202122

Компонент TextInput

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

<template> <view class=”container”> <text-input :style=”{ height: 30, width: 250, borderColor: ‘#511281’, borderWidth: 1, }” v-model=”text” /> </view> </template> <script> export default { data() { return { text: “”, }; }, }; </script>

1234567891011121314151617181920212223

<template> <view class=”container”> <text-input :style=”{ height: 30, width: 250, borderColor: ‘#511281’, borderWidth: 1, }” v-model=”text” /> </view></template> <script>export default { data() { return { text: “”, }; },};</script>

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

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

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

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

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

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

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

1234567891011121314151617181920212223

<template> <view class=”container”> <text-input :style=”{ height: 30, width: 250, borderColor: ‘#511281’, borderWidth: 1, }” v-model=”text” /> </view></template> <script>export default { data() { return { text: “”, }; },};</script>

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

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

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

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

JavaScript npm i vue-native-router

1	npm i vue-native-router

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

react-native-reanimated

react-native-gesture-handler

react-native-paper

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

JavaScript npm i react-native-reanimated react-native-gesture-handler react-native-paper

1	npm i react-native-reanimated react-native-gesture-handler react-native-paper

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

JavaScript <script> import { createAppContainer, createStackNavigator, } from “vue-native-router”; import SettingsScreen from “./screens/SettingsScreen.vue”; import HomeScreen from “./screens/HomeScreen.vue”; const StackNavigator = createStackNavigator( { Settings: SettingsScreen, Home: HomeScreen, }, { initialRouteName: ‘Home’, } ); const AppNavigator = createAppContainer(StackNavigator); export default { components: { AppNavigator }, } </script>

12345678910111213141516171819202122232425

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

JavaScript <script> export default { // navigation is declared as a prop props: { navigation: { type: Object } }, methods: { navigateToScreen() { this.navigation.navigate(“Profile”); } } } </script>

123456789101112131415

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

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

JavaScript npm i vuex //or yarn add vuex

123	npm i vuex//oryarn add vuex

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

JavaScript // store/index.js import Vue from ‘vue-native-core’; import Vuex from ‘vuex’; Vue.use(Vuex); const store = new Vuex.Store({ state: { name: ‘Ejiro Asiuwhu’, }, }); export default store;

1234567891011

// store/index.js import Vue from ‘vue-native-core’;import Vuex from ‘vuex’;Vue.use(Vuex);const store = new Vuex.Store({ state: { name: ‘Ejiro Asiuwhu’, },});export default store;

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

JavaScript <script> import store from “./store”; export default { computed: { name() { return store.state.name; }, }, }; </script>

12345678910

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

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

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

<template> <view class=”container”> <button :on-press=”getLocation” title=”Get Location” color=”#184d47″ accessibility-label=”Get access to users’ location” > <text>Location Details:</text> <text>{{ location }}</text> <text>Latitude: {{ latitude }}</text> <text>Longitude: {{ longitude }}</text> <text class=”text-error”>{{ errorMessage }}</text> </view> </template> <script> import * as Location from “expo-location”; export default { data() { return { location: “”, latitude: “”, longitude: “”, errorMessage: “”, text: “”, user: { country: “”, }, }; }, methods: { async getLocation() { try { let { status } = await Location.requestForegroundPermissionsAsync(); if (status !== “granted”) { this.errorMessage = “Permission to access location was denied”; return; } let location = await Location.getCurrentPositionAsync({}); this.location = location; this.latitude = location.coords.latitude; this.longitude = location.coords.longitude; this.errorMessage = “”; } catch (error) { this.errorMessage = error; } }, }, } </script>

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152

<template> <view class=”container”> <button :on-press=”getLocation” title=”Get Location” color=”#184d47″ accessibility-label=”Get access to users’ location” > <text>Location Details:</text> <text>{{ location }}</text> <text>Latitude: {{ latitude }}</text> <text>Longitude: {{ longitude }}</text> <text class=”text-error”>{{ errorMessage }}</text> </view></template> <script>import * as Location from “expo-location”; export default { data() { return { location: “”, latitude: “”, longitude: “”, errorMessage: “”, text: “”, user: { country: “”, }, }; }, methods: { async getLocation() { try { let { status } = await Location.requestForegroundPermissionsAsync(); if (status !== “granted”) { this.errorMessage = “Permission to access location was denied”; return; } let location = await Location.getCurrentPositionAsync({}); this.location = location; this.latitude = location.coords.latitude; this.longitude = location.coords.longitude; this.errorMessage = “”; } catch (error) { this.errorMessage = error; } }, },}</script>

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

Заключение

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

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

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

Автор: Ejiro Asiuwhu

Источник: webformyself.com