第一进行uni-app开发，没想到居然这么舒服！

前言

在前端，除了Web开发，移动端的app开发也是十分重要的。但是众所周知移动端也分安卓，ios两大操作系统。所以这导致了移动端部分产生了两种职业，安卓开发工程师，ios开发工程师。但是HBuilder的出现打破了这一平衡，它可以将我们开发的app打包，让文件分别适配不同的系统中，甚至不同的小程序，本文将会为大家介绍HBuilder以及uni-app开发

正文

安装HBuilder X

HBuilder X我们点击链接去到官网。

这样我们就安装好了编译环境了，接下来我们就是需要进行一些实用插件了。

一共安装这些个插件就就好了

上述过程进行完毕，我们就可以开始用HX来写代码了.

base内容学习

其实uni-app里面的代码写法，就几乎和写Vue一模一样，如果你的Vue学的不错的话，学uni-app也会非常的方便。

我们就会进入到这个界面

创建完项目后大家可以看到项目文件中的那些文件

这里我可能会比大家多一个unpackage的文件夹和一个我自己创建的readme.md，因为在使用过程中我安装了其他的插件，但也问题不大。相对于我们传统的Vue项目开发，一定会需要vur-router路由配置，但是在uni-app开发中是没有vur-router的，那么这里又是的路由又是如何配置的呢，大家伙可能想不到，在packages.json文件中，就是路由的配置

大家伙那里在pages下应该只有一个index,我们来看一下这里的部分代码，我们先启动项目

就是这里肯呢个会有点问题，浏览器可能无法打开，打不开的话，我们就需要在设置中配置一下浏览器的运行文件了，我们在工具中找到设置。

配置好浏览器的运行文件，我们就可以运行了。我们现在看到页面的头部

我们可以明显看头部是有背景色的。在我们的路由文件中pages.json中

"navigationBarTextStyle": "black"表示文本的颜色为黑色，这里的颜色设置只有白色以及黑色两种设置。"navigationBarTitleText": "uni-app"表示导航的标题，"navigationBarBackgroundColor": "#F8F8F8"表示导航的背景色，"backgroundColor": "#F8F8F8"表示下拉时，我们可以看到下拉背景的颜色，但是由于Web是不支持下拉刷新的，所以这里也不太好展示。

下面我们来看看App.vue中放了什么吧。

我们可以看到这里的js部分是采用vue3的选项式api,那么这里的三个函数表示什么意思呢，其实这就是uni-app的生命周期。uni-app的生命周期分为两类。第一类就是vue3的生命周期，它都有

第二类就是其自己本身的生命周期，也称之为应用的生命周期

onLaunch()当程序初始化完成时触发，全局只触发一次，onShow,启动程序，或者从后台进入到前台，页面被渲染时触发。

当我们启动项目时,onLanuch()以及onShow()执行了，当我们切换页面后再次进入该页面

onHide()先执行，然后onShow()再执行。

下面我们点击pages文件夹右键创建新的页面

这里uni-app会自动帮我们配置好路由，这点我个人认为非常的舒服。

路由跳转？

因为在uni-app中是没有vue-router的，所以我们该如何实现路由跳转呢？在index.vue文件中

<template>
	<view class="content">
		<image class="logo" src="/static/logo.png"></image>
		<view class="text-area">
			<text class="title" @click="goHello">{{state.title}}</text>
		</view>
	</view>
</template>

<script setup>
import { onBeforeMount, onMounted, reactive } from 'vue';

onBeforeMount(()=>{
	console.log('onbrforeMounted');
})

onMounted(()=>{
	console.log('onMounted');
})


const state = reactive({
	title:'hello world'
})

const goHello = ()=>{
	// uni.navigateTo({ 
	// 	url:'/pages/hello/hello'
	// })
	// uni.reLaunch({
	// 	url:'/pages/hello/hello'
	// })
	uni.switchTab({
		url:'/pages/hello/hello'
	})
}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
</style>

我们有三种方法可以实现跳转页面，但是如果我们使用一个tabbar，就会有点问题了。

我们在packages.json文件夹中，把tabBar写好，这里"iconPath": "static/logo.png"和"selectedIconPath": "static/logo.png"分别表示未选中，和选中时的图标。我们回到页面就可以看到这样一个导航栏

你会发现，三个跳转方法uni.navigateTo(),uni.reLaunch(),uni.switchTab()中只有uni.switchTab()可以使用。当我们配置了导航栏时，uni.navigateTo()和uni.reLaunch()就无法跳转了。这一点需要好好注意。

本文到此结束了，希望对大家有帮助，感谢大家阅读！！

文章到这里也就