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

2024-05-16 16:46:17

文章目录

鸿蒙开发|呼吸训练实战项目（一）
- 在主界面添加一个按钮并响应其单击事件
- - 运行效果
- 实现思路
- 代码详解

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

在主界面添加一个按钮并响应其单击事件

运行效果

该任务运行效果是这样的：在主页面"hello world‘’的下方显示一个按钮。运行效果如图：
单击该按钮后在Debug工具窗口打印一条log“我被点击了”

实现思路

首先新建项目时选择第四个，选择第一个你在运行调试时会遇到问题，我们选择轻量级手表应用。

使用input组件显示一个按钮。通过input组件的onclick属性定义一个自定义函数。这样，当单击按钮时就会触发按钮的onclick单击事件，从而调用onclick指定的自定义函数。

代码详解

打开index.hnl文件。
添加一个input组件，将type属性值设为button，以显示一个按钮。将属性的value的值设置为“点我”，以设置按钮显示的文本。将class属性的值设置为"btn"，以通过index.css中名为btn的类选择器设置按钮的样式。
代码如下：

<div class="container"><text class="title">Hello {{ title }}</text><input type = "button" value ="点我" class ="btn" />
</div>

添加一个名为btn的类选择器，以设置按钮的样式。代码如下：

.container {flex-direction: column;//弹性的方向：纵向排列。组件默认横向排列的width: 454px;height: 454px;justify-content: center;align-items: center;
}.title {width: 200px;font-size: 30px;text-align: center;
}
.btn {width:200px;height:50px;
}

保存所有代码后打开Previewer，在主界面的文本“hello world”的下方显示出了一个按钮。运行如图所示：

接下来要实现的运行效果是：单击该按钮后打印一条log
打开index.js文件。
定义一个名为clickAction的函数，并在函数体中打印一条log“我被点击了”。在data的右花括号和clickAction之间添加一个逗号。
代码如下：

export default {data: {title: 'World'},clickAction(){console.log("我被点击了");}
}

在input组件中添加一个onclick属性，并将他的值设置为刚刚定义的clickAction函数。这样，当单击按钮时就会触发按钮的onclick单击事件，从而自动调用clickAction函数。代码如下：

<div class="container"><text class="title">Hello {{ title }}</text><input type = "button" value ="点我" class ="btn" onclick ="clickAction"/>
</div>

要想看到打印出来的log，必须以Dbug模式运行应用。在DecEco Studio的工具栏中选择hawei lite wearable simulator。

单击主界面中的按钮后，在左下方的Debug工具窗口中就打印了log“我被点击了”

鸿蒙开发|呼吸训练实战项目（一）相关推荐

鸿蒙开发|呼吸训练实战项目（二）
文章目录鸿蒙开发|呼吸训练实战项目(二) 实现训练页面与主页面之间相互跳转运行效果实现思路代码详解验证应用和每个页面的生命周期时间运行效果在主界面中显示logo和两个选择器实现思路代 ...
迅为-i.MX6ULL开发板-QT实战项目DHT11网络编程实战练习（一）
迅为-i.MX6ULL开发板-QT实战项目DHT11&网络编程实战练习(一) 发布时间:2021-7-2 09:49 发布者:落风 |编辑文章目录1 项目前准备2 软件流程图3 Lin ...
go语言Web开发框架：项目开发介绍及实战项目介绍
引言本系列课程我们将学些Golang语言中的Web开发框架Iris的相关知识和用法.通过本系列视频课程,大家能够从零到一经历一个完整项目的开发,并在课程中了解实战项目开发的流程和项目设涉及的各个模块 ...
太强了！Java毕业设计分享—基于Java开发的毕业设计实战项目(含源码+论文)
你的毕业设计做好了吗? 上学是个苦差事,终于要毕业了还要被毕业设计绊一跤,别的专业且不说,计算机软件应用的学生最苦恼了,是不是还在为做毕业设计而烦恼? 以下为各位奉上25套毕业设计的精品,包括选题,论 ...
python开发项目案例集锦 pdf_Python项目开发案例集锦实战项目代码+配套文件
Python项目开发案例集锦涵盖8个开发方向.23个项目,循序渐进地让读者在实践中学习,在实践中提升实际开发能力. 全书共8篇:控制台程序.小游戏.实用小工具.网络爬虫.数据分析.人工智能.Web开发 ...
Java Web开发与实战_Java Web开发技术与实战项目
[实例简介] 北大青鸟ACCP6.0 使用JSP/Servlet/Ajax技术开发新闻发布系统第一部分课件以及代码答案1到6章 [实例截图] [核心代码] 7.<JavaWeb开发技术> ...
岳阳鸿蒙数学培优阶梯训练,鸿蒙应用-呼吸训练app部分练习展示（开始）
本帖最后由李洋水蛟龙于 2020-12-20 18:11 编辑 1.在主页面添加一个按钮并响应点击事件效果显示: 图片1.png (404.17 KB, 下载次数: 0) 2020-12-10 ...
从0基础开发搜索引擎(一)-----实战项目
项目目标:实现一个JavaAPI文档的站内搜索引擎我们有一个网页,上面带有一个搜索框,用户输入查询词之后进行搜索,将会在服务器上面搜索出与查询词相关的文档,并把这些信息返回到页面上面,用户点击搜索结 ...
python制作安卓app_python开发安卓App实战项目：西瓜视频解析工具
python要开发app就要用到kivy的模块,关于kivy开发环境的安装网上非常多,就不多说了. 整个开发过程主要涉及布局和事件两个方面,首先是关于布局方面 [Python] 纯文本查看复制代码 ...

最新文章

热门文章