前言

Vue Native 是一個(gè) JavaScript 框架，旨在使用 JavaScript 構(gòu)建可以在 Android 和 iOS 上運(yùn)行的跨平臺(tái)移動(dòng)應(yīng)用程序。通過(guò)封裝 React Native，開(kāi)發(fā)人員可以使用 Vue Native 使用 Vue.js 構(gòu)建移動(dòng)應(yīng)用程序。

正因?yàn)槿绱耍锌梢栽?React Native 中完成的事情都可以在 Vue Native 中完成，并且代碼被編譯為 React Native。通過(guò)這種方式，開(kāi)發(fā)人員可以從 Vue 和 React Native 生態(tài)系統(tǒng)提供的內(nèi)容中受益。

在這篇文章中，我們將討論 Vue Native 的特性以及如何使用 Vue Native 創(chuàng)建移動(dòng)應(yīng)用程序。

Vue Native 的特性

在決定使用 Vue.js 構(gòu)建移動(dòng)應(yīng)用程序時(shí)，Vue Native 有許多有用的特性需要考慮。

聲明式渲染

Vue Native使用聲明式編程范式。這意味著我們只需聲明我們希望我們的組件和狀態(tài)如何渲染以獲得我們想要的結(jié)果。

雙向綁定

在我們的Vue Native應(yīng)用中，我們可以在我們的組件類和其模板之間共享數(shù)據(jù)。如果我們改變了狀態(tài)中的數(shù)據(jù)，它就會(huì)自動(dòng)反映在用戶界面中。

我們?nèi)匀槐仨氃L問(wèn) v-model 進(jìn)行雙向數(shù)據(jù)綁定。這意味著我們可以使用 v-model 將一個(gè) input 元素的值綁定到我們組件的數(shù)據(jù)屬性中。

Vue.js 生態(tài)系統(tǒng)的豐富性

Vue 生態(tài)系統(tǒng)是 JavaScript 領(lǐng)域最大、發(fā)展最快的生態(tài)系統(tǒng)之一。使用 Vue Native 構(gòu)建應(yīng)用程序提供了更大的 Vue 生態(tài)系統(tǒng)的好處。

這意味著我們可以使用諸如 v-if 用于條件渲染，v-model 用于雙向數(shù)據(jù)綁定，v-for 用于列表渲染，以及Vuex用于狀態(tài)管理等功能。

編譯為 React Native

因?yàn)?Vue Native 依賴于 React Native，所以熟悉 React Native 生態(tài)系統(tǒng)的開(kāi)發(fā)者更容易上手。

我們還可以在 Vue Native 中渲染 React Native 組件，而無(wú)需編寫(xiě)一行額外的配置，以便輕松集成并提高生產(chǎn)力。

設(shè)置開(kāi)發(fā)環(huán)境

開(kāi)始使用 Vue Native 的最快和最簡(jiǎn)單的方法是使用 Vue Native CLI 引導(dǎo)移動(dòng)應(yīng)用程序。此 CLI 使用Expo CLI 或 React Native CLI 生成一個(gè)簡(jiǎn)單的單頁(yè)應(yīng)用程序。

這意味著我們必須安裝任一CLI，根據(jù)我們應(yīng)用程序的需要，來(lái)使用Vue Native CLI。

要開(kāi)始，我們必須安裝一些依賴項(xiàng)。首先，運(yùn)行下面的命令來(lái)全局安裝Vue Native CLI。

$ npm install --g vue-native-cli

接下來(lái)，全局安裝 Expo CLI，盡管這可以與 React Native CLI 互換：

$  npm install --g expo-cli

創(chuàng)建一個(gè)Vue Native項(xiàng)目

現(xiàn)在 Vue Native 和 Expo CLI 都已全局安裝，讓我們使用以下命令創(chuàng)建一個(gè) Vue Native 項(xiàng)目：

vue-native init <yourProjectName>

通過(guò)在項(xiàng)目的根目錄下導(dǎo)航并運(yùn)行這個(gè)命令，啟動(dòng)一個(gè)開(kāi)發(fā)服務(wù)器：

$ cd <yourProjectName>
$ npm start

Metro Bundler 在 React Native 中編譯 JavaScript 代碼，從 http://localhost:19002/ 運(yùn)行。通過(guò)在 Web 瀏覽器中訪問(wèn) http://localhost:8080/，將出現(xiàn)以下頁(yè)面：

若要在物理設(shè)備上查看Vue Native應(yīng)用，請(qǐng)掃描瀏覽器中的二維碼，并在Android或iOS的Expo Go中打開(kāi)鏈接。

我們也可以通過(guò)點(diǎn)擊瀏覽器中顯示的鏈接，在安卓模擬器或iOS模擬器上打開(kāi)應(yīng)用程序，但并不是所有在Expo Go中可用的API都可以在模擬器上使用。

作為選擇，我們可以克隆Vue Native核心團(tuán)隊(duì)準(zhǔn)備的Kitchen Sink演示應(yīng)用程序。

Vue Native UI組件

Vue Native提供了一些開(kāi)箱即用的UI組件來(lái)構(gòu)建應(yīng)用界面，讓我們來(lái)看看其中最重要的一些組件。

視圖組件

view 組件就像我們普通HTML中的 div 標(biāo)簽一樣工作。這個(gè)組件是在Vue Native中創(chuàng)建用戶界面的基本構(gòu)建模塊，就像在React Native中一樣。

我們可以在一個(gè) view 組件中擁有多個(gè)子組件，比如下面的代碼。

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

Text組件

要在我們的移動(dòng)應(yīng)用程序中輸出文本，我們不能使用常規(guī)的HTML標(biāo)簽，如 h1 或 p。相反，我們必須使用 <text>...<text> 組件。使用這個(gè)組件是非常直接的。

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

Image組件

Image 組件渲染靜態(tài)圖像、網(wǎng)絡(luò)圖像和來(lái)自用戶設(shè)備的圖像。

與普通的 img 標(biāo)簽中使用 src 屬性不同，這里我們?cè)?image 組件中綁定了 source 屬性來(lái)動(dòng)態(tài)加載我們的圖片。這使得webpack在構(gòu)建過(guò)程中可以捆綁我們的圖片資產(chǎn)。

通過(guò)添加以下內(nèi)容，我們可以將圖像加載到Vue Native應(yīng)用中：

<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 組件通過(guò)用戶的鍵盤(pán)將文本輸入到應(yīng)用程序中。我們可以使用 v-model 將我們狀態(tài)中的數(shù)據(jù)綁定到 TextInput 組件。這允許我們無(wú)縫獲取和設(shè)置 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應(yīng)用中輸出如下屏幕：

NativeBase UI 組件

要建立一個(gè)可以投入生產(chǎn)的移動(dòng)應(yīng)用，僅僅使用內(nèi)置的Vue Native組件可能是不夠的。幸運(yùn)的是，Vue Native帶來(lái)了React Native和Vue.js兩個(gè)生態(tài)系統(tǒng)的優(yōu)點(diǎn)，所以我們可以使用NativeBase UI組件。

NativeBase是由GeekyAnts創(chuàng)建的，他們是Vue Native背后的同一個(gè)團(tuán)隊(duì)。這個(gè)UI組件給了我們一個(gè)真正原生的外觀和感覺(jué)，在我們的移動(dòng)應(yīng)用中，通過(guò)相同的JavaScript代碼庫(kù)，為Android和iOS提供了特定平臺(tái)的設(shè)計(jì)。

雙向數(shù)據(jù)綁定

使用 v-model 在我們的 Vue 組件模板和 Vue Native 中的 Vue 狀態(tài)之間共享數(shù)據(jù)是輕而易舉的。我們可以使用 v-model 指令探索雙向數(shù)據(jù)綁定，如下所示：

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

通過(guò)將一個(gè)帶有數(shù)據(jù)綁定的輸入字段從我們的狀態(tài)輸出到輸入字段和一個(gè)文本組件，我們可以看到以下內(nèi)容：

導(dǎo)航和路由

Vue Native應(yīng)用中的導(dǎo)航和路由是通過(guò)Vue Native Router庫(kù)來(lái)處理的。在底層，這個(gè)庫(kù)使用了流行的React Navigation包。Vue Native Router和React Navigation都有類似的api，因此安裝也類似。

該庫(kù)沒(méi)有預(yù)裝，所以為了在我們的應(yīng)用程序中開(kāi)始使用導(dǎo)航，我們必須用以下方式安裝它。

npm i vue-native-router

請(qǐng)注意，我們需要安裝以下軟件包才能使 Vue Native Router 正常工作：

• react-native-reanimated
• react-native-gesture-handler
• react-native-paper

在項(xiàng)目根目錄下運(yùn)行以下命令來(lái)安裝這些包：

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

Vue Native Router 提供了 StackNavigator 和 DrawerNavigator 來(lái)注冊(cè)用于導(dǎo)航的屏幕：

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

要在屏幕之間導(dǎo)航，請(qǐng)調(diào)用 navigation 對(duì)象上的 navigate 方法，該方法作為props傳遞如下：

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

狀態(tài)管理

對(duì)于Vue Native應(yīng)用程序中的集中狀態(tài)管理模式，我們可以使用Vue的官方狀態(tài)管理庫(kù)Vuex。

集成Vuex非常簡(jiǎn)單。首先，使用以下命令之一安裝Vuex：

npm i vuex
//or
yarn add vuex

創(chuàng)建一個(gè)中央存儲(chǔ)文件，并根據(jù)應(yīng)用程序的需要添加 state、getter、mutations 或 actions。為了簡(jiǎn)單起見(jiàn)，在這里使用 state 對(duì)象:

// 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中使用數(shù)據(jù)和方法與傳統(tǒng)的Vue應(yīng)用程序有很大不同，這里是如何導(dǎo)入和使用我們store中的數(shù)據(jù)：

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

請(qǐng)注意，我們沒(méi)有像通常在 Vue 和 Vuex 應(yīng)用程序設(shè)置中那樣使用 this.$store。

訪問(wèn)設(shè)備 API

由于React Native豐富的生態(tài)系統(tǒng)，在我們的Vue Native應(yīng)用中訪問(wèn)本地設(shè)備的API是可能的。例如，要在我們的應(yīng)用程序中訪問(wèn)用戶的設(shè)備地理定位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>

通過(guò)使用 Expo 包，不需要額外的配置或設(shè)置，這使得使用 Vue Native 構(gòu)建移動(dòng)應(yīng)用程序變得輕而易舉。

總結(jié)

使用 Vue Native 構(gòu)建移動(dòng)應(yīng)用程序?yàn)槭褂?JavaScript 構(gòu)建跨平臺(tái)移動(dòng)應(yīng)用程序開(kāi)辟了許多可能性。

通過(guò)訪問(wèn) Vue 和 React Native 生態(tài)系統(tǒng)的豐富性和優(yōu)勢(shì)，開(kāi)發(fā)人員可以編寫(xiě) .vue 組件并將 Expo 和 React Native 包集

成到應(yīng)用程序中，幾乎不需要額外的配置。

本教程中使用的完整代碼可在GitHub上找到。

本教程源碼：github.com/ejirocodes/…

翻譯自blog.logrocket.com，作者：Ejiro Asiuwhu

到此這篇關(guān)于利用Vue Native構(gòu)建移動(dòng)應(yīng)用的文章就介紹到這了,更多相關(guān)Vue Native構(gòu)建移動(dòng)應(yīng)用內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！