鸿蒙应用-呼吸训练app部分练习展示（开始） - HarmonyOS技术社区 - 电子技术william hill官网 - 广受欢迎的专业电子william hill官网

李洋水蛟龙

2020-12-10 17:56:04

HarmonyOS

1. 在主页面添加一个按钮并响应点击事件

效果显示：

点击按钮“点我”下方便会显示“我被点击了”说明点击事件已完成

代码如下：

Index.hml文件中

<div class="jltfcontainer">
<text class="jltftitle">
Hello {{title}}
</text>
<input type="button" value="点我" class="jltfbtn"/>
</div>

Index.js文件中

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

index.css文件中

.jltfcontainer {
flex-direction: column;
width: 454px;
height: 454px;
justify-content: center;
align-items: center;
}
.jltftitle {
width: 200px;
font-size: 30px;
text-align: center;
}
.jltfbtn{
width: 200px;
height: 50px;

}

2. 添加训练页面并实现其与主页面之间的相互跳转

效果显示：

点击“点我”将会进入下一个页面

当你点击“返回”时会回到第一个页面

代码如下：（新建一个js page 例如：jltfxunlian）

Jltfxunlian.hml文件中

Jltfxunlian.css文件中

Jltfxunlian.js文件中

import router from '@system.router'

export default {
data: {

},
jltfclickAction(){
   router.replace({
         uri:'pages/index/index'
   });
}
}

3. 验证整个应用和每个页面的生命周期事件

效果显示：

主页面的生命周期显示

点击“点我”之后主页面会销毁之后出现训练页面

代码如下:

在两个js文件中加入如下代码

onInit(){
console.log("训练页面的onInit()被调用")
},
onReady(){
console.log("训练页面的onReady()被调用")
},
onShow(){
console.log("训练页面的onShow()被调用")
},
onDestroy(){
console.log("训练页面的onDestroy()被调用")
}

主页面js文件中把“训练页面”改为“主页面”即可

本应用练习参考了张荣超老师部分公开的代码。

回帖高级模式

声明：本文内容及配图由入驻作者撰写或者入驻合作网站授权转载。文章观点仅代表作者本人，不代表电子发烧友网立场。文章及其配图仅供工程师学习之用，如有内容图片侵权或者其他问题，请联系本站作侵删。侵权投诉

[文章]鸿蒙应用-呼吸训练app部分练习展示（开始）

回帖高级模式