App开发新选择：使用VueNative构建移动应用

VueNative是一个JavaScript框架，旨在使用JavaScript构建可在Android和iOS上运行的跨平台移动应用程序。通过包装ReactNative，开发人员可以使用VueNative使用Vue.js构建移动应用程序。正因为如此，在ReactNative中能做的事情，在VueNative中也能做到，代码编译到ReactNative中。通过这种方式，开发人员可以从Vue和ReactNative生态系统提供的功能中受益。在这篇文章中，我们将讨论VueNative的特性以及如何使用VueNative创建移动应用程序。VueNative的特性在决定使用Vue.js构建移动应用程序时，VueNative有许多有用的特性需要考虑。声明式渲染VueNative使用声明式编程范式。这意味着我们只需要声明我们希望我们的组件和状态如何呈现以获得我们想要的结果。双向绑定在我们的VueNative应用程序中，我们可以在我们的组件类和它的模板之间共享数据。如果我们更改状态中的数据，它会自动反映在UI中。我们仍然需要访问v-model以进行双向数据绑定。这意味着我们可以使用v-model将输入元素的值绑定到组件的数据属性。Vue.js生态系统的丰富性Vue生态系统是JavaScript中规模最大、发展最快的生态系统之一。使用VueNative构建应用程序提供了更大的Vue生态系统的好处。这意味着我们可以使用v-if等功能进行条件渲染，v-model进行双向数据绑定，v-for进行列表渲染，Vuex进行状态管理。编译为ReactNative因为VueNative依赖于ReactNative，所以熟悉ReactNative生态的开发者更容易上手。我们还可以在VueNative中渲染ReactNative组件，而无需编写一行额外的配置，以便于集成并提高生产力。设置开发环境开始使用VueNative最快最简单的方法是使用VueNativeCLI[1]引导移动应用程序。此CLI使用ExpoCLI[2]或ReactNativeCLI[3]生成一个简单的单页应用程序。这意味着我们必须根据应用程序的需要安装任一CLI，才能使用VueNativeCLI。要开始，我们必须安装一些依赖项。首先，运行以下命令全局安装VueNativeCLI。$npminstall--gvue-native-cli接下来，全局安装ExpoCLI，虽然这可以与ReactNativeCLI互换：使用以下命令创建VueNative项目：vue-nativeinit通过导航到项目的根目录并运行此命令启动开发服务器：$cd$npmstartMetroBundler在ReactNative中编译JavaScript代码，运行来自http://localhost:19002/。在浏览器中访问http://localhost:8080/，会出现如下页面：在实体设备上查看VueNative应用，在浏览器中扫描二维码，在Android或iOS的ExpoGo中打开中的链接。我们也可以通过点击浏览器中显示的链接，在安卓模拟器或iOS模拟器上打开应用，但并不是所有ExpoGo中可用的API都可以在模拟器上使用。或者，我们可以克隆VueNative核心团队准备的KitchenSink演示应用程序。VueNativeUI组件VueNative提供了一些开箱即用的UI组件来构建应用程序界面，让我们来看看一些最重要的组件。ViewComponents视图组件就像普通HTML中的div标签一样工作。这个组件是在VueNative中创建用户界面的基本构建块，就像在ReactNative中一样。我们可以在一个视图组件中有多个子组件，比如下面的代码。文本组件要在我们的移动应用程序中输出文本，我们不能使用像h1或p这样的常规HTML标签。相反，我们必须使用...组件。使用此组件非常简单。Image组件Image组件呈现静态图像、Web图像和来自用户设备的图像。与在普通img标签中使用src属性不同，这里我们在图像组件中绑定source属性以动态加载我们的图像。这允许webpack在构建过程中捆绑我们的图像资产。我们可以通过添加以下内容将图像加载到VueNative应用程序中：TextInput组件TextInput组件通过用户的Thekeyboardenterstextintotheapplication.We可以使用v-model将数据从我们的状态绑定到TextInput组件。这使我们能够无缝地获取和设置TextInput的值：然后，上面的代码在VueNative应用程序中输出以下屏幕：NativeBaseUI组件要构建可用于生产的移动应用程序，仅使用内置的VueNative组件可能还不够。幸运的是，VueNative带来了ReactNative和Vue.js生态系统的优势，所以我们可以使用NativeBaseUI组件。NativeBase由GeekyAnts创建，与VueNative背后的团队相同。这个UI组件为我们的移动应用程序提供了真正原生的外观和感觉，通过相同的JavaScript代码库为Android和iOS提供了特定于平台的设计。双向数据绑定使用v-model在我们的Vue组件模板和VueNative中的Vue状态之间共享数据是轻而易举的。我们可以使用v-model指令探索双向数据绑定，如下所示：通过将数据绑定的输入字段从我们的状态输出到输入字段和文本组件，我们可以看到以下内容：导航和路由VueNative应用程序中的导航和路由是通过VueNativeRouter[4]库完成的.在底层，这个库使用流行的ReactNavigation[5]包。VueNativeRouter和ReactNavigation都有类似的api，所以安装也差不多。这个库没有预装，所以为了在我们的应用程序中开始使用导航，我们必须按以下方式安装它。npmivue-native-router请注意，我们需要安装以下包才能使VueNativeRouter正常工作：react-native-reanimated[6]react-native-gesture-handler[7]react-native-paper[8]中在项目的根目录下运行以下命令来安装这些包：npmireact-native-reanimatedreact-native-gesture-handlerreact-native-paperVueNativeRouter提供StackNavigator和DrawerNavigator来注册屏幕进行导航：要在屏幕之间导航，请调用导航对象上的navigate方法，该方法作为props传递，如下所示：statemanagement对于VueNative应用中的集中式状态管理模式，我们可以使用Vue官方的状态管理库Vuex，集成Vuex非常简单，首先使用以下命令之一安装Vuex:npmivuex//oryarnaddvuex创建一个中央存储文件，并根据应用的需要添加state、getters、mutations或action，为了简单起见，这里使用state对象://store/index.jsimportVuefrom'vue-native-core';importVuexfrom'vuex';Vue.use(Vuex);conststore=newVuex.Store({state:{name:'EjiroAsiuwhu',},});exportdefaultstore;在传统Vue应用中使用我们store中的数据和方法有一个很大的区别，这里是如何导入和使用我们商店中的数据：请注意，我们没有像通常在Vue和Vuex应用程序设置中那样使用this.$store。访问设备API访问本机设备API是可能的由于ReactNative丰富的生态系统，在我们的VueNative应用程序中是可行的……例如，要在我们的应用程序中访问用户的设备地理定位API，我们可以像这样使用expo-location[9]。通过使用Expo包，不需要额外的配置或设置，这使得使用VueNative构建移动应用程序变得轻而易举移动应用程序开辟了许多可能性。通过访问Vue和ReactNative生态系统的丰富性和优势，开发人员可以编写.vue组件并将Expo和ReactNative包集成到他们的应用程序中，几乎不需要额外的配置。GitHub上提供了本教程中使用的完整代码。本教程源码：https://github.com/ejirocodes/Vue-Native-Demo原文：https://blog.logrocket.com/building-mobile-apps-with-vue-native/作者：EjiroAsiuwhu本文转载自微信公众号“前端全栈开发者”，可关注下方二维码。转载本文请联系前端全栈开发公众号。