鴻蒙應用-呼吸訓練app部分練習展示

小嵌

鴻蒙應用-呼吸訓練app部分練習展示,   
本帖最后由 李洋水蛟龍 于 2020-12-10 17:58 編輯



1. 在主頁面添加一個按鈕并響應點擊事件 效果顯示：

圖片1.png （404.17 KB, 下載次數(shù): 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.
添加訓練頁面并實現(xiàn)其與主頁面之間的相互跳轉 效果顯示：

圖片2.png （35.91 KB, 下載次數(shù): 0）

下載附件  保存到相冊  

2 小時前 上傳 點擊“點我”將會進入下一個頁面

圖片3.png （36.56 KB, 下載次數(shù): 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, 下載次數(shù): 0）

下載附件  保存到相冊  

2 小時前 上傳   點擊“點我”之后主頁面會銷毀之后出現(xiàn)訓練頁面   

圖片5.png （426.02 KB, 下載次數(shù): 0）

下載附件  保存到相冊  

2 小時前 上傳 代碼如下: 在兩個js文件中加入如下代碼 onInit（）{

     console.log（“訓練頁面的onInit（）被調用“）

},

onReady（）{

     console.log（“訓練頁面的onReady（）被調用“）

},

onShow（）{

     console.log（“訓練頁面的onShow（）被調用“）

},

onDestroy（）{

     console.log（“訓練頁面的onDestroy（）被調用“）

} 主頁面js文件中把“訓練頁面”改為“主頁面”即可

本應用練習參考了張榮超老師部分公開的代碼。