一、前言
接着之前的学习，今天主要来实践页面跳转以及给页面设置初始布局 。在我们的 demo1 项目里，已经有了 index 和 user 两个页面，就围绕它们来操作，把学习过程记录下来，方便自己回顾，也希望能给刚开始学的小伙伴一点参考。
二、测试
上一章我们已经新建了一个项目，那我们在鸿蒙中启动一下看看，那么首先打开DevEco Studio并随便打开一个项目，然后点击其中的设备管理器如下图：
然后启动设备管理器中的模拟器
如果没有模拟器，就点击上图右下角的新建模拟器，页面如下：
然后随便选择一个版本（除Beta1以外的版本）下载页面如下：
下载完成后启动模拟器，进入模拟器后，打开HBuilder X并打开我们上一章新建的项目，然后选择上方的运行->运行到手机或模拟器->运行到鸿蒙，图如下：
点击后会出现如下图的窗口，只有启动了模拟器后才会出现鸿蒙设备，如果没有启动模拟器则不会显示，如果是在模拟器上运行直接点运行即可，如果是真机上运行，则先点击旁边的配置调试证书，证书配置完毕后在返回这个页面选择真机的信息，在点击运行
点击运行后会在底部出现如下信息，耐心等待运行完成就好
出现如下信息就代表运行成功
此时打开模拟器可以看到界面已经显示出来了
三、页面跳转
（一）需求场景
在 index 页面放个按钮，点击后跳转到 user 页面，这样就能在两个页面之间切换啦，这也是 App 里很常见的交互。
（二）在 index.uvue 中添加跳转代码
打开pages/index/index.uvue文件，在template里加上按钮，script里写跳转方法 ：利用uniapp的navigateTo方法实现跳转，指定user页面的路径，即可实现跳转
首先，给按钮给一个 @click="函数名"点击属性，然后在里面定义这个属性代码如下：
xml
<template>
<view>
<button @click="goToUserPage">去个人页面</button>
</view>
</template>
xml
<script>
export default {
data() {
return {
// 可以在这里定义首页相关数据，目前先空着
}
},
methods: {
goToUserPage() {
// 利用uniapp的navigateTo方法实现跳转，指定user页面的路径
uni.navigateTo({
url: '/pages/user/user'
});
}
}
}
</script>这里uni.navigateTo是 uniapp 提供的跳转 API，能保留当前页面，跳转到应用内的某个页面，很适合这种简单的页面切换场景。路径就是pages.json里配置的 user 页面路径，要写对，不然跳转不成功。
（三）测试跳转功能
代码写完，那么我们直接开始在 HBuilderX 里进行测试，点击运行，选择鸿蒙模拟器或者真机（前提是配置好调试环境啦）。在 index 页面点击按钮，就能跳转到 user 页面啦，要是没跳转成功，先检查路径写对没，还有pages.json里的路由配置是否正确。运行成功并跳转成功的效果图如下：
四、user 页面初始布局搭建
（一）简单布局需求
给 user 页面弄个简单的布局，比如显示 "个人页面" 文字，再放个返回首页的按钮，页面元素居中显示，让页面看起来规整些。
（二）编写 user.uvue 代码
打开pages/user/user.uvue文件，填充内容：
xml
<template>
<view class="user-container">
<text>个人页面</text>
<button @click="goBack">返回首页</button>
</view>
</template>
<script>
export default {
data() {
return {
// 后续可扩展个人页面的数据，现在先空着
}
},
methods: {
goBack() {
// 返回上一页，uniapp的navigateBack方法
uni.navigateBack();
}
}
}
</script>
<style>
.user-container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
}
text {
font-size: 32rpx;
margin-bottom: 20rpx;
}
button {
padding: 15rpx 30rpx;
background-color: #007AFF;
color: #fff;
border-radius: 8rpx;
}
</style>user-container用 flex 布局，让子元素垂直水平居中，这样页面内容就不会乱糟糟的。uni.navigateBack方法能关闭当前页面，返回上一页面或多级页面，这里用来返回首页很合适。
（三）布局效果查看
运行项目到模拟器或真机，跳转到 user 页面，就能看到文字和按钮居中显示啦，点击返回按钮又能回到 index 页面，一个简单的页面跳转和布局就完成啦。
五、总结
通过这次实践，成功实现了 index 和 user 页面之间的跳转，还给 user 页面做了简单布局 。虽然都是基础操作，但对于刚开始学习用 Uniapp 开发鸿蒙项目的我来说，每实现一个小功能都很有成就感。接下来打算继续丰富页面内容，比如在 user 页面加些个人信息展示，或者试试传参跳转，一步步深入学习。记录这些过程，也让自己对知识的掌握更扎实啦，后续继续加油探索更多 Uniapp 开发鸿蒙应用的技巧～
##Uniapp##三方框架##商务##