岳阳鸿蒙数学培优阶梯训练,鸿蒙应用-呼吸训练app部分练习展示（开始）

本帖最后由 李洋水蛟龙 于 2020-12-20 18:11 编辑

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

效果显示：

图片1.png (404.17 KB, 下载次数: 0)

2020-12-10 17:53 上传

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

代码如下：

Index.hml文件中

Hello {{title}}

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

效果显示：

图片2.png (35.91 KB, 下载次数: 0)

2020-12-10 17:54 上传

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

图片3.png (36.56 KB, 下载次数: 0)

2020-12-10 17:54 上传

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

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

Jltfxunlian.hml文件中

训练页面

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文件中

importrouter from'@system.router'

export default{

data: {

},

jltfclickAction(){

router.replace({

uri:'pages/index/index'

});

}

}

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

效果显示：

主页面的生命周期显示

图片4.png (374.19 KB, 下载次数: 0)

2020-12-10 17:54 上传

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

图片5.png (426.02 KB, 下载次数: 0)

2020-12-10 17:55 上传

代码如下:

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

onInit(){

console.log("训练页面的onInit()被调用")

},

onReady(){

console.log("训练页面的onReady()被调用")

},

onShow(){

console.log("训练页面的onShow()被调用")

},

onDestroy(){

console.log("训练页面的onDestroy()被调用")

}

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

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