#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
收藏
回复
举报
回复
添加资源
添加资源将有机会获得更多曝光,你也可以直接关联已上传资源 去关联
    相关推荐