用Uniapp开发鸿蒙项目四

一、前言

接着之前的学习，今天主要来实践页面跳转以及给页面设置初始布局。在我们的 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##三方框架##商务##

用Uniapp开发鸿蒙项目 四

一、前言

二、测试

三、页面跳转

（一）需求场景

（二）在 index.uvue 中添加跳转代码

（三）测试跳转功能

四、user 页面初始布局搭建

（一）简单布局需求

（二）编写 user.uvue 代码

（三）布局效果查看

五、总结

用Uniapp开发鸿蒙项目四