这是我参与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。
扫描二维码关注公众号,回复:
13403372 查看本文章
输入名称后,就会在此目录下会生成相应的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,就会顺理成章的进入到跳转页面了。
总结
今天的收获很大,利用鸿蒙初步实现了一个功能,有了一个正反馈,如此才能更深入的研究下去。