本帖最后由 李洋水蛟龍 于 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部分练习展示（开始）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。