日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時(shí)間：8:30-17:00
你可能遇到了下面的問(wèn)題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷解決方案
開(kāi)發(fā)App新選擇：使用VueNative構(gòu)建移動(dòng)應(yīng)用

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)用程序。

創(chuàng)新互聯(lián)2013年開(kāi)創(chuàng)至今，先為興業(yè)等服務(wù)建站，興業(yè)等地企業(yè)，進(jìn)行企業(yè)商務(wù)咨詢服務(wù)。為興業(yè)企業(yè)網(wǎng)站制作PC+手機(jī)+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問(wèn)題。

正因?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ú)需編寫一行額外的配置，以便輕松集成并提高生產(chǎn)力。

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

開(kāi)始使用 Vue Native 的最快和最簡(jiǎn)單的方法是使用 Vue Native CLI[1] 引導(dǎo)移動(dòng)應(yīng)用程序。此 CLI 使用 Expo CLI[2] 或 React Native CLI[3] 生成一個(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。

 
 
 
 
    
  
  
  
  
  1. $ npm install --g vue-native-cli
    2.

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

 
 
 
 
    
  
  
  
  
  1. $  npm install --g expo-cli
    2.

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

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

 
 
 
 
    
  
  
  
  
  1. vue-native init 
    2.

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

 
 
 
 
    
  
  
  
  
  1. $ cd 
    2. 
  
  
  
  
  2. $ npm start
    3.

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è)子組件，比如下面的代碼。

 
 
 
 
    
  
  
  
  
    2.

Text組件

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

 
 
 
 
    
  
  
  
  
    2.

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)用中：

 
 
 
 
    
  
  
  
  
    2.

TextInput組件

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

 
 
 
 
    
  
  
  
  
    2. 
  
  
  
  
  2. 
  
  
  
  
  3.

然后，上面的代碼在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ù)綁定，如下所示：

 
 
 
 
    
  
  
  
  
    2. 
  
  
  
  
  2. 
  
  
  
  
  3.

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

導(dǎo)航和路由

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

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

 
 
 
 
    
  
  
  
  
  1. npm i vue-native-router
    2.

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

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

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

 
 
 
 
    
  
  
  
  
  1. npm i react-native-reanimated react-native-gesture-handler react-native-paper
    2.

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

 
 
 
 
    
  
  
  
  
  1.

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

 
 
 
 
    
  
  
  
  
  1.

狀態(tài)管理

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

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

 
 
 
 
    
  
  
  
  
  1. npm i vuex
    2. 
  
  
  
  
  2. //or
    3. 
  
  
  
  
  3. yarn add vuex
    4.

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

 
 
 
 
    
  
  
  
  
  1. // store/index.js
    2. 
  
  
  
  
  2. 
  
  
  
  
  3. import Vue from 'vue-native-core';
    4. 
  
  
  
  
  4. import Vuex from 'vuex';
    5. 
  
  
  
  
  5. Vue.use(Vuex);
    6. 
  
  
  
  
  6. const store = new Vuex.Store({
    7. 
  
  
  
  
  7.   state: {
    8. 
  
  
  
  
  8.     name: 'Ejiro Asiuwhu',
    9. 
  
  
  
  
  9.   },
    10. 
  
  
  
  
  10. });
    11. 
  
  
  
  
  11. export default store;
    12.

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

 
 
 
 
    
  
  
  
  
  1.

請(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[9]。

 
 
 
 
    
  
  
  
  
    2. 
  
  
  
  
  2. 
  
  
  
  
  3.

通過(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ā)人員可以編寫 .vue 組件并將 Expo 和 React Native 包集成到應(yīng)用程序中，幾乎不需要額外的配置。

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

本教程源碼：https://github.com/ejirocodes/Vue-Native-Demo

原文：https://blog.logrocket.com/building-mobile-apps-with-vue-native/

作者：Ejiro Asiuwhu

本文轉(zhuǎn)載自微信公眾號(hào)「前端全棧開(kāi)發(fā)者」，可以通過(guò)以下二維碼關(guān)注。轉(zhuǎn)載本文請(qǐng)聯(lián)系前端全棧開(kāi)發(fā)者公眾號(hào)。


網(wǎng)頁(yè)題目：開(kāi)發(fā)App新選擇：使用VueNative構(gòu)建移動(dòng)應(yīng)用
文章URL：http://www.dlmjj.cn/article/coodspo.html