鸿蒙开发|呼吸训练实战项目

Posted Tiramisu1104

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了鸿蒙开发|呼吸训练实战项目相关的知识,希望对你有一定的参考价值。

鸿蒙开发|呼吸训练实战项目(二)

实现训练页面与主页面之间相互跳转

运行效果

单击主页面中的按钮,跳转到训练页面中的按钮 ,跳转到训练页面,单击训练页面中的按钮,跳转到主界面。


主界面

训练界面

实现思路

把主界面和训练页面进行对比我们发现,两个界面中 所包含的组件的结构和行为几乎是一样的。因此,只需要在主界面稍稍修改就能够实现训练页面了。可以调用router.replace()语句实现页面的跳转,在调用该语句时通过uri指定目标页面的地址。

代码详解

在项目的pages子目录上新建js界面


分别编写training.hml training.js training.css 文件



保存所有代码运行如图所示:点击跳转就到了训练界面,单击训练界面中的返回按钮就跳转到了主界面。

验证应用和每个页面的生命周期时间

运行效果

主页面显示后,在Debug工具窗口中依次打印log。


代码如下:


在主界面中显示logo和两个选择器

运行效果

实现思路

使用image组件显示鸿蒙呼吸训练的logo。使用picker-view组件显示logo左右两边的选择器。

代码详解

创建common目录

代码如下:



保存代码后,在主界面中显示出了logo的图片

接下来实现左边一个选择器是分,右边是另一个选择器
代码如下:




运行代码后如图所示:

以上是关于鸿蒙开发|呼吸训练实战项目的主要内容,如果未能解决你的问题,请参考以下文章

鸿蒙开发|呼吸训练实战项目

鸿蒙开发|呼吸训练实战项目

鸿蒙开发|呼吸训练实战项目

鸿蒙开发|呼吸训练实战项目

鸿蒙开发|呼吸训练实战项目

鸿蒙开发|呼吸训练实战项目