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

0 0

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

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

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

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

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

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

В нашем приложении 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>

1vue-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

Чтобы просмотреть приложение 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:

<template> <!– Network image –> <image :style=”{ width: 300, height: 150 }” :source=”{ uri: ‘https://images.unsplash.com/photo-1621570074981-ee6a0145c8b5?ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=750&q=80’, }” /> <!– Static image –> <image :style=”{ width: 300, height: 150 }” :source=”require(‘./assets/photo.jpg’)” /> <!– Local disk image –> <image :style=”{width: 66, height: 58}” :source=”{uri: ‘data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADMAAAAzCAYAAAA6oTAqAAAAEXRFWHRTb2Z0d2FyZQBwbmdjcnVzaEB1SfMAAABQSURBVGje7dSxCQBACARB+2/ab8BEeQNhFi6WSYzYLYudDQYGBgYGBgYGBgYGBgYGBgZmcvDqYGBgmhivGQYGBgYGBgYGBgYGBgYGBgbmQw+P/eMrC5UTVAAAAABJRU5ErkJggg==’}” /> </template>

12345678910111213141516171819202122<template>    <!– Network image –> <image      :style=”{ width: 300, height: 150 }”      :source=”{        uri:          ‘https://images.unsplash.com/photo-1621570074981-ee6a0145c8b5?ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=750&q=80’,      }”    />     <!– Static image –> <image      :style=”{ width: 300, height: 150 }”      :source=”require(‘./assets/photo.jpg’)”    />     <!– Local disk image –>         <image          :style=”{width: 66, height: 58}”          :source=”{uri: ‘data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADMAAAAzCAYAAAA6oTAqAAAAEXRFWHRTb2Z0d2FyZQBwbmdjcnVzaEB1SfMAAABQSURBVGje7dSxCQBACARB+2/ab8BEeQNhFi6WSYzYLYudDQYGBgYGBgYGBgYGBgYGBgZmcvDqYGBgmhivGQYGBgYGBgYGBgYGBgYGBgbmQw+P/eMrC5UTVAAAAABJRU5ErkJggg==’}”        /></template>

Компонент 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:

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

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

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

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

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

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

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

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

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

<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

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

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

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

JavaScript npm i vue-native-router

1npm 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

1npm 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<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>

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

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

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

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

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

JavaScript npm i vuex //or yarn add vuex

123npm 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<script>import store from “./store”;export default {  computed: {    name() {      return store.state.name;    },  },};</script>

Обратите внимание, что мы не используем 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

Оставьте ответ