用Vue Native构建移动应用

前端小工
1,639 阅读7分钟

Vue Native是一个JavaScript框架，旨在建立跨平台的移动应用程序，可以用JavaScript在Android和iOS上运行。通过对React Native的包装，开发者可以使用Vue Native来构建使用Vue.js的移动应用。

正因为如此，所有能在React Native中完成的事情都能在Vue Native中完成，而且代码被编译成React Native。这样一来，开发者就能从Vue和React Native生态系统提供的东西中获益。

在这篇文章中，我们将讨论Vue Native的特点以及如何使用Vue Native创建移动应用。

Vue Native的特点

在决定用Vue.js构建移动应用时，Vue Native有很多有用的功能需要考虑。

声明式渲染

Vue Native使用声明式编程范式。这意味着我们只需声明我们希望我们的组件和状态如何呈现，以获得我们想要的结果。

双向绑定

在我们的Vue Native应用中，我们可以在我们的组件类和其模板之间共享数据。如果我们改变了状态中的数据，它会自动反映在UI中。

我们仍然必须访问v-model ，进行双向数据绑定。这意味着我们可以使用v-model ，将一个input 元素的值绑定到我们组件数据的一个属性上。

Vue.js生态系统的丰富性

Vue生态系统是JavaScript领域中最大、发展最快的生态系统之一。使用Vue Native构建一个应用程序可以获得更大的Vue生态系统的好处。

这意味着我们可以使用一些功能，如用于条件渲染的v-if ，用于双向数据绑定的v-model ，用于列表渲染的v-for ，以及用于状态管理的Vuex。

编译成React Native

因为Vue Native依赖于React Native，所以对于熟悉React Native生态系统的开发者来说，它更容易上手。

我们也可以在Vue Native中渲染React Native组件，而不需要写一行额外的配置，以方便集成和提高生产力。

设置开发环境

开始使用Vue Native的最快和最简单的方法是用Vue Native CLI启动一个移动应用。这个CLI生成一个简单的、单页的应用程序，在引擎盖下使用Expo CLI或React Native CLI。

这意味着我们必须根据我们应用程序的需要，安装任何一个CLI，以使用Vue Native CLI。

要开始，我们必须安装一些依赖性。首先，运行下面的命令，全局安装Vue Native CLI。

$ npm install --g vue-native-cli

接下来，在全局范围内安装Expo CLI，当然这可以与React Native CLI互换。

$  npm install --g expo-cli

创建一个Vue Native项目

现在Vue Native和Expo CLI都已经全局安装，让我们用下面的命令创建一个Vue Native项目。

vue-native init <yourProjectName>

通过在项目的根目录下导航并运行此命令来启动一个开发服务器。

 $ cd <yourProjectName>
 $ npm start

在React Native中编译JavaScript代码的Metro Bundler，从 [http://localhost:19002/](http://localhost:19002/).通过访问 [http://localhost:8080/](http://localhost:8080/)在网络浏览器中，会出现以下页面。

Open Metro Browser And Scan The QR code

要在实体设备上查看Vue Native应用，请在浏览器中扫描二维码，并在Expo Go forAndroid或iOS中打开该链接。

我们也可以通过点击浏览器中显示的链接，在安卓模拟器或iOS模拟器上打开该应用，但并不是所有在Expo Go中可用的API都可以在模拟器中使用。

作为选择，我们可以克隆Vue Native核心团队准备的Kitchen Sink演示应用程序。

Vue Native UI组件

Vue Native配备了一些开箱即用的UI组件来构建应用界面。让我们来看看一些最重要的组件。

View 组件

view 组件就像我们普通HTML中的div 标签一样工作。这个组件是在Vue Native中创建用户界面的基本构建块，就像在React Native中一样。

我们可以在一个view 组件中拥有多个子组件，比如下面的代码。

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

Text 组件

为了在我们的移动应用程序中输出文本，我们不能使用常规的HTML标签，如h1 或p 。相反，我们必须使用<text>…</text> 组件。使用这个组件是非常直接的。

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

Image 组件

image 组件可以渲染静态图像、网络图像和来自用户设备的图像。

与普通的img 标签中使用src 属性不同，这里我们在image 组件中绑定了source 属性来动态加载我们的图片。这允许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>

TextInput 组件

TextInput 组件通过用户的键盘向应用程序输入文本。我们可以使用v-model ，将我们状态中的数据绑定到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>

然后，上述代码在Vue Native应用程序中输出以下屏幕。

Set Value For TextInput Screen

NativeBase UI组件

要建立一个可以投入生产的移动应用程序，仅仅使用内置的Vue Native组件可能是不够的。幸运的是，Vue Native带来了React Native和Vue.js生态系统的优点，所以我们可以使用NativeBaseUI组件。

NativeBase是由GeekyAnts创建的，也是Vue Native背后的团队。这个UI组件给了我们一个真正原生的外观和感觉，在我们的移动应用中，在同一个JavaScript代码库上，为Android和iOS提供了特定的平台设计。

双向数据绑定

在Vue Native中，在我们的Vue组件模板和我们的Vue状态之间共享数据，使用v-model ，非常容易。我们可以用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>

通过输出一个输入字段，从我们的状态到输入字段和一个文本组件的数据绑定，我们可以看到以下情况。

Output The Input Field With Data Binding

导航和路由

Vue Native应用中的导航和路由是由Vue Native Router库处理的。在引擎盖下，这个库使用流行的React导航包。Vue Native Router和React Navigation都有类似的API，因此安装也类似。

这个库没有预装，所以为了在我们的应用中开始使用导航，我们必须用以下方式安装它。

npm i vue-native-router

请注意，为了让Vue Native Router正常工作，我们需要安装以下软件包。

在project 目录root下运行以下命令来安装这些包。

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

Vue Native Router提供了StackNavigator 和DrawerNavigator 来注册屏幕进行导航。

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

要在屏幕之间进行导航，请在navigation 对象上调用navigate 方法，该对象会像这样作为一个道具传递下来。

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

npm i vuex
//or
yarn add vuex

创建一个中央存储文件，并根据应用程序的需要，添加state,getters,mutations, 或actions 。为了保持简单，在这里使用state 对象。

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

使用我们商店中的数据和方法与传统的Vue应用程序有很大不同；这里是如何导入和使用我们商店中的数据。

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

请注意，我们没有像通常在Vue和Vuex应用设置中那样使用this.$store 。

访问设备API

由于React Native丰富的生态系统，在我们的Vue Native应用中访问本地设备的API是可能的。例如，要在我们的应用程序中访问用户的设备地理定位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>

通过使用Expo包，不需要额外的配置或设置，这使得用Vue Native构建一个移动应用变得轻而易举。

总结

使用Vue Native构建移动应用为使用JavaScript构建跨平台移动应用提供了很多可能性。

由于可以接触到Vue和React Native生态系统的丰富性和优势，开发者可以编写.vue ，并将Expo和React Native包整合到应用中，几乎不需要额外的配置。

本教程中使用的完整代码可以在GitHub上找到。欢迎发表评论，让我知道你对这篇文章的看法。你也可以在Twitter和GitHub上找到我。谢谢您的阅读!

The postBuilding mobile apps with Vue Nativeappeared first onLogRocket Blog.

avatar
文章
阅读
粉丝