鸿蒙应用-呼吸训练app部分练习展示

小嵌

鸿蒙应用-呼吸训练app部分练习展示,   
本帖最后由 李洋水蛟龙 于 2020-12-10 17:58 编辑



1. 在主页面添加一个按钮并响应点击事件 效果显示：

图片1.png （404.17 KB, 下载次数: 0）

下载附件  保存到相册  

2 小时前 上传    点击按钮“点我”下方便会显示“我被点击了”说明点击事件已完成 代码如下： 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.
添加训练页面并实现其与主页面之间的相互跳转 效果显示：

图片2.png （35.91 KB, 下载次数: 0）

下载附件  保存到相册  

2 小时前 上传 点击“点我”将会进入下一个页面

图片3.png （36.56 KB, 下载次数: 0）

下载附件  保存到相册  

2 小时前 上传 当你点击“返回”时会回到第一个页面 代码如下：（新建一个js page 例如：jltfxunlian） Jltfxunlian.hml文件中 <div class=“jltfcontainer“>

     <text class=“jltftitle“>

        训练页面

     </text>

     <input type=“button“ value=“返回“ class=“jltfbtn“/>

</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. 验证整个应用和每个页面的生命周期事件 效果显示： 主页面的生命周期显示

图片4.png （374.19 KB, 下载次数: 0）

下载附件  保存到相册  

2 小时前 上传   点击“点我”之后主页面会销毁之后出现训练页面   

图片5.png （426.02 KB, 下载次数: 0）

下载附件  保存到相册  

2 小时前 上传 代码如下: 在两个js文件中加入如下代码 onInit（）{

     console.log（“训练页面的onInit（）被调用“）

},

onReady（）{

     console.log（“训练页面的onReady（）被调用“）

},

onShow（）{

     console.log（“训练页面的onShow（）被调用“）

},

onDestroy（）{

     console.log（“训练页面的onDestroy（）被调用“）

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

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