current position:Home>New choice for app development: building mobile applications using Vue native

New choice for app development: building mobile applications using Vue native

2021-08-27 16:50:47 Front end full stack developer

Vue Native It's a JavaScript frame , Designed to use JavaScript Build can be in Android and iOS Cross platform mobile applications running on . Through encapsulation React Native, Developers can use Vue Native Use Vue.js Building mobile applications .

Because of that , All can be found in React Native Everything can be done in Vue Native Finish in , And the code is compiled as React Native. In this way , Developers can learn from Vue and React Native Benefit from the content provided by the ecosystem .

In this article , We will discuss Vue Native Features and how to use Vue Native Create a mobile app .

Vue Native Characteristics of

In the decision to use Vue.js When building mobile applications ,Vue Native There are many useful features to consider .

Declarative rendering

Vue Native Use the declarative programming paradigm . This means that we just need to declare how we want our components and states to render to get the results we want .

Two way binding

In our Vue Native Application , We can share data between our component classes and their templates . If we change the data in the State , It will be automatically reflected in the user interface .

We still have to visit v-model Two way data binding . This means that we can use v-model Will a input The value of the element is bound to the data attributes of our component .

Vue.js The richness of ecosystems

Vue The ecosystem is JavaScript Largest field 、 One of the fastest growing ecosystems . Use Vue Native Building applications provides greater Vue The benefits of ecosystems .

This means that we can use things like v-if For conditional rendering ,v-model For bidirectional data binding ,v-for For list rendering , as well as Vuex Used for state management and other functions .

Compiled into React Native

because Vue Native Depend on React Native, So I'm familiar with React Native Ecosystem developers are easier to get started .

We can still do that Vue Native Medium rendering React Native Components , Without writing an additional line of configuration , To easily integrate and improve productivity .

Set up the development environment

Start using Vue Native The quickest and easiest way to use Vue Native CLI[1] Boot mobile applications . this CLI Use Expo CLI[2] or React Native CLI[3] Generate a simple single page application .

This means that we must install either CLI, According to the needs of our application , To use Vue Native CLI.

To start , We have to install some dependencies . First , Run the following command to globally install Vue Native CLI.

$ npm install --g vue-native-cli

Next , Global installation Expo CLI, Although this can be related to React Native CLI swap :

$ npm install --g expo-cli

Create a Vue Native project

Now? Vue Native and Expo CLI Are installed globally , Let's use the following command to create a Vue Native project :

vue-native init <yourProjectName>

By navigating to the root of the project and running this command , Start a development server :

$ cd <yourProjectName>
$ npm start

Metro Bundler stay React Native Chinese compiler JavaScript Code , from http://localhost:19002/ function . By means of Web Browser access http://localhost:8080/, The following page will appear :

To view on a physical device Vue Native application , Please scan the QR code in the browser , And in Android or iOS Of Expo Go Open link in .

We can also click the link displayed in the browser , In Android emulator or iOS Open the application on the simulator , But not all are Expo Go Available in API Can be used on the simulator .

As an option , We can clone Vue Native Prepared by the core team Kitchen Sink Demo application .

Vue Native UI Components

Vue Native Some out of the box UI Component to build the application interface , Let's look at some of the most important components .

View component

view Components are like our ordinary HTML Medium div Work like a label . This component is in Vue Native Basic building blocks for creating user interfaces in , As in the React Native In the same .

We can do it in one view There are multiple subcomponents in the component , Consider the following code .

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

Text Components

To output text in our mobile application , We can't use the regular HTML label , Such as h1 or p. contrary , We have to use <text>...<text> Components . Using this component is very direct .

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

Image Components

Image Component renders still images 、 Network images and images from user devices .

With the ordinary img Use in Tags src Different properties , Here we are image The component is bound with source Property to dynamically load our images . This makes webpack During the construction process, we can bundle our image assets .

By adding the following , We can load images into Vue Native Application :

<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 Components

TextInput Component enters text into the application through the user's keyboard . We can use v-model Bind the data in our state to TextInput Components . This allows us to seamlessly get and set TextInput Value :

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

then , The above code is in Vue Native The following screen is output in the application :

NativeBase UI Components

To build a mobile application that can be put into production , Just use the built-in Vue Native Components may not be enough . Fortunately, ,Vue Native brought React Native and Vue.js The advantages of two ecosystems , So we can use it NativeBase UI Components .

NativeBase By GeekyAnts Created , They are Vue Native The same team behind . This UI Components give us a truly native look and feel , In our mobile applications , By the same JavaScript The code base , by Android and iOS Provides platform specific design .

Two way data binding

Use v-model In our Vue Component templates and Vue Native Medium Vue Sharing data between States is easy . We can use v-model Instructions explore two-way data binding , As shown below :

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

By outputting an input field with data binding from our state to the input field and a text component , We can see the following :

Navigation and routing

Vue Native Navigation and routing in applications are through Vue Native Router[4] Library to handle . In the underlying , This library uses the popular React Navigation[5] package .Vue Native Router and React Navigation There are similar api, Therefore, the installation is similar .

The library is not pre installed , So in order to start using navigation in our application , We must install it in the following way .

npm i vue-native-router

Please note that , We need to install the following packages to make Vue Native Router Normal work :

  • react-native-reanimated [6]
  • react-native-gesture-handler [7]
  • react-native-paper [8]

Run the following command at the root of the project to install these packages :

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

Vue Native Router Provides StackNavigator and DrawerNavigator To register the screen for navigation :

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

To navigate between screens , Please call navigation On the object navigate Method , This method is used as props Pass it on as follows :

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

State management

about Vue Native Centralized state management mode in applications , We can use Vue Official status management library Vuex.

Integrate Vuex It's simple . First , Use one of the following commands to install Vuex:

npm i vuex
//or
yarn add vuex

Create a central storage file , And add... According to the needs of the application stategettermutations or actions. For the sake of simplicity , Use it here state object :

// 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;

In our store The data and methods used in this paper are different from the traditional Vue Applications are very different , Here is how to import and use our store Data in :

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

Please note that , We don't have the usual Vue and Vuex Use... As in application settings this.$store.

Access devices API

because React Native Rich ecosystems , In our Vue Native Access to local devices in the application API it is possible that . for example , To access the user's device geolocation in our application API, We can use it like this expo-location[9].

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

By using Expo package , No additional configuration or setup is required , This enables the use of Vue Native Building mobile applications becomes easy .

summary

Use Vue Native Build mobile applications to use JavaScript Building cross platform mobile applications opens up many possibilities .

By visiting Vue and React Native Richness and advantages of ecosystem , Developers can write .vue Component and will Expo and React Native Package integration into the application , Almost no additional configuration is required .

The complete code used in this tutorial can be found in GitHub Found on the .

The source code of this tutorial :https://github.com/ejirocodes/Vue-Native-Demo


original text :https://blog.logrocket.com/building-mobile-apps-with-vue-native/
author :Ejiro Asiuwhu

Recent articles

Reference material

[1]

Vue Native CLI: https://github.com/GeekyAnts/vue-native-cli

[2]

Expo CLI: https://docs.expo.io/workflow/expo-cli/

[3]

React Native CLI: https://github.com/react-native-community/cli

[4]

Vue Native Router: https://github.com/GeekyAnts/vue-native-router

[5]

React Navigation: https://reactnavigation.org/

[6]

react-native-reanimated: https://github.com/kmagiera/react-native-reanimated

[7]

react-native-gesture-handler: https://github.com/kmagiera/react-native-gesture-handler

[8]

react-native-paper: https://github.com/callstack/react-native-paper

[9]

expo-location: https://docs.expo.io/versions/latest/sdk/location/


copyright notice
author[Front end full stack developer],Please bring the original link to reprint, thank you.
https://en.qdmana.com/2021/08/20210827165045104y.html

guess what you like

Random recommended