目錄前言Vue Native 的特性聲明式渲染雙向綁定Vue.js 生態(tài)系統(tǒng)的豐富性編譯為 React Native設(shè)置開發(fā)環(huán)境創(chuàng)建一個Vue Native項目Vue Native UI組件視圖組件Image組件TextInput組件NativeBase UI 組件雙向數(shù)據(jù)綁定導(dǎo)航和路由狀態(tài)管理訪問設(shè)備 API總結(jié)前言

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

正因為如此，所有可以在 React Native 中完成的事情都可以在 Vue Native 中完成，并且代碼被編譯為 React Native。通過這種方式，開發(fā)人員可以從 Vue 和 React Native 生態(tài)系統(tǒng)提供的內(nèi)容中受益。

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

Vue Native 的特性

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

聲明式渲染

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

雙向綁定

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

我們?nèi)匀槐仨氃L問 v-model 進行雙向數(shù)據(jù)綁定。這意味著我們可以使用 v-model 將一個 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

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

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

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

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

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

要開始，我們必須安裝一些依賴項。首先，運行下面的命令來全局安裝Vue Native CLI。

$ npm install --g vue-native-cli

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

$ npm install --g expo-cli創(chuàng)建一個Vue Native項目

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

vue-native init <yourProjectName>

通過在項目的根目錄下導(dǎo)航并運行這個命令，啟動一個開發(fā)服務(wù)器：

$ cd <yourProjectName>$ npm start

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

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

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

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

Vue Native UI組件

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

視圖組件

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

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

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

Text組件

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

<template> <text>Hello World</text></template>Image組件

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

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

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

<template> <!-- Network image --> <image : :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 : :source='require(’./assets/photo.jpg’)' /> <!-- Local disk image --> <image : :source='{uri: ’data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADMAAAAzCAYAAAA6oTAqAAAAEXRFWHRTb2Z0d2FyZQBwbmdjcnVzaEB1SfMAAABQSURBVGje7dSxCQBACARB+2/ab8BEeQNhFi6WSYzYLYudDQYGBgYGBgYGBgYGBgYGBgZmcvDqYGBgmhivGQYGBgYGBgYGBgYGBgYGBgbmQw+P/eMrC5UTVAAAAABJRU5ErkJggg==’}' /></template>TextInput組件

TextInput 組件通過用戶的鍵盤將文本輸入到應(yīng)用程序中。我們可以使用 v-model 將我們狀態(tài)中的數(shù)據(jù)綁定到 TextInput 組件。這允許我們無縫獲取和設(shè)置 TextInput 的值：

<template> <view class='container'> <text-input : v-model='text' /> </view></template><script>export default { data() { return { text: '', }; },};</script>

然后，上面的代碼在Vue Native應(yīng)用中輸出如下屏幕：

NativeBase UI 組件

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

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

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

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

<template> <view class='container'> <text-input : v-model='text' /> </view></template><script>export default { data() { return { text: '', }; },};</script>

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

導(dǎo)航和路由

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

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

npm i vue-native-router

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

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

在項目根目錄下運行以下命令來安裝這些包：

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

Vue Native Router 提供了 StackNavigator 和 DrawerNavigator 來注冊用于導(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)航，請調(diào)用 navigation 對象上的 navigate 方法，該方法作為props傳遞如下：

<script>export default { // navigation is declared as a prop props: { navigation: { type: Object } }, methods: { navigateToScreen() { this.navigation.navigate('Profile'); } }}</script>狀態(tài)管理

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

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

npm i vuex//oryarn add vuex

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

// store/index.jsimport 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>

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

訪問設(shè)備 API

由于React Native豐富的生態(tài)系統(tǒng)，在我們的Vue Native應(yīng)用中訪問本地設(shè)備的API是可能的。例如，要在我們的應(yīng)用程序中訪問用戶的設(shè)備地理定位API，我們可以像這樣使用expo-location。

<template> <view class='container'> <button :on-press='getLocation' 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 包，不需要額外的配置或設(shè)置，這使得使用 Vue Native 構(gòu)建移動應(yīng)用程序變得輕而易舉。

總結(jié)

使用 Vue Native 構(gòu)建移動應(yīng)用程序為使用 JavaScript 構(gòu)建跨平臺移動應(yīng)用程序開辟了許多可能性。

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

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

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

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

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

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