#2020征文-手表#鸿蒙应用-呼吸训练app部分练习展示(开始) 精华

鸿蒙时代
发布于 2020-12-10 17:49
浏览
0收藏

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

效果显示:#2020征文-手表#鸿蒙应用-呼吸训练app部分练习展示(开始)-鸿蒙开发者社区

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

代码如下:

Index.hml文件中

<div class="jltfcontainer">
    <text class="jltftitle">
        Hello {{title}}
    </text>
    <input type="button" value="点我" class="jltfbtn" onclick="jltfclickAction"/>
</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. 添加训练页面并实现其与主页面之间的相互跳转

效果显示:

 #2020征文-手表#鸿蒙应用-呼吸训练app部分练习展示(开始)-鸿蒙开发者社区

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

  #2020征文-手表#鸿蒙应用-呼吸训练app部分练习展示(开始)-鸿蒙开发者社区

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

代码如下:(新建一个js page 例如:jltfxunlian)

Jltfxunlian.hml文件中

<div class="jltfcontainer">
    <text class="jltftitle">
       训练页面
    </text>
    <input type="button" value="返回" class="jltfbtn" onclick="jltfclickAction"/>
</div>

Jltfxunlian.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;

}

Jltfxunlian.js文件中

import router from '@system.router'

export default {
    data: {

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

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

效果显示:

主页面的生命周期显示

#2020征文-手表#鸿蒙应用-呼吸训练app部分练习展示(开始)-鸿蒙开发者社区

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

#2020征文-手表#鸿蒙应用-呼吸训练app部分练习展示(开始)-鸿蒙开发者社区

代码如下:

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

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

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

 

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

 

已于2020-12-15 10:44:00修改
2
收藏
回复
举报
1条回复
按时间正序
/
按时间倒序
鸿蒙开发者社区官方账号
鸿蒙开发者社区官方账号

征文大赛正在火热进行中,楼主不考虑参加下吗?

 

例如这篇在标题开头添加“#2020征文-手表#“,
再找到相应的专栏位置投稿,

就可以参加比赛啦!

 

详细步骤可以点击链接https://harmonyos.51cto.com/posts/1940进行了解

用更多的文章来赢取更多的奖励和人气吧!期待楼主后续的活跃表现。

已于2020-12-10 19:00:11修改
回复
2020-12-10 18:59:54
回复
    相关推荐