岳阳鸿蒙数学培优阶梯训练,鸿蒙应用-呼吸训练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文件中把“訓練頁面”改為“主頁面”即可
本應用練習參考了張榮超老師部分公開的代碼。
總結
以上是生活随笔為你收集整理的岳阳鸿蒙数学培优阶梯训练,鸿蒙应用-呼吸训练app部分练习展示（开始）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 贪婪算法回顾
- 下一篇： 转载：Android Studio 3.