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

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

效果显示：

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

代码如下：

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. 添加训练页面并实现其与主页面之间的相互跳转

效果显示：

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

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

代码如下：（新建一个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. 验证整个应用和每个页面的生命周期事件

效果显示：

主页面的生命周期显示

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

代码如下:

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

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

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

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