初学鸿蒙OS之编写一个页面跳转功能

这是我参与11月更文挑战的第24天，活动详情查看：2021最后一次更文挑战

写在前面

熟悉了项目结构之后，下面我们就要试着去开发一个页面跳转功能，在这其中去理解鸿蒙是如何开发的，也是初步有点效果，给自己一个正反馈。

编写一个页面跳转功能

今天我们来编写一个页面跳转的功能，需求就是通过点击按钮，跳转到另外一个页面，进而在另外一个页面进行信息的展示。

那么要实现这个需求，我们需要从以下几个步骤来一一实现。

创建一个开始页面

首先，就是创建一个开始页面，因为之前我们已经创建一个测试示例，所以本次还是在原来的基础上进行一些更改。

在js文件下的pages/index.html页面中放置一个Next按钮。

代码如下：

<div class="container">
    <text class="title">
        {{ $t('strings.hello') }} {{ title }}
    </text>

    <button class="button" type="capsule" value="Next" onclick="tiaozhuan"></button>
</div>

添加上此按钮后，我们如果这个时候运行项目，就会看到如下图所示的效果。

创建一个需要跳转的页面

随后我们再创建一个需要跳转的页面，鸿蒙IDE中同样也提供了页面的快捷创建，选中pages文件夹，右击，选择New-Js Page。

输入名称后，就会在此目录下会生成相应的html、js、css文件，如下图：

让我们在details.html文件中同样输入一段文字，来充当跳转后的页面展示。

<div class="container">
    <text class="title">
        成功跳转到详情页面了！
    </text>
</div>

编写页面跳转逻辑

两个页面都准备好了之后，接下来就是去编写跳转的逻辑了，想必大家也注意到了，我们添加按钮时，有一个click事件。

猜得不错，这个方法就是要去实现跳转逻辑的关键。

让我们打开index.js，在其中输入以下代码：

import router from '@system.router';

export default {
    launch() {
        router.push ({
            uri:'pages/details/details'
        })
    }
}

运行项目

既然都编写完成了，下面就是去验证一下了，先运行一下项目，进入以下页面中。

点击按钮联动

接下来我们点击Next，就会顺理成章的进入到跳转页面了。

总结

今天的收获很大，利用鸿蒙初步实现了一个功能，有了一个正反馈，如此才能更深入的研究下去。