鴻蒙應(yīng)用-呼吸訓(xùn)練app部分練習(xí)展示

小嵌

鴻蒙應(yīng)用-呼吸訓(xùn)練app部分練習(xí)展示,   
本帖最后由 李洋水蛟龍 于 2020-12-10 17:58 編輯



1. 在主頁(yè)面添加一個(gè)按鈕并響應(yīng)點(diǎn)擊事件 效果顯示：

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

下載附件  保存到相冊(cè)  

2 小時(shí)前 上傳    點(diǎn)擊按鈕“點(diǎn)我”下方便會(huì)顯示“我被點(diǎn)擊了”說(shuō)明點(diǎn)擊事件已完成 代碼如下： Index.hml文件中 <div class=“jltfcontainer“>

     <text class=“jltftitle“>

         Hello {{title}}

     </text>

     <input type=“button“ value=“點(diǎn)我“ class=“jltfbtn“/>

</div> Index.js文件中
export default {

     data: {

         title: \“World\“

     },

     jltfclickAction（）{

     console.log（“我被點(diǎn)擊了“）;

}

} 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.
添加訓(xùn)練頁(yè)面并實(shí)現(xiàn)其與主頁(yè)面之間的相互跳轉(zhuǎn) 效果顯示：

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

下載附件  保存到相冊(cè)  

2 小時(shí)前 上傳 點(diǎn)擊“點(diǎn)我”將會(huì)進(jìn)入下一個(gè)頁(yè)面

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

下載附件  保存到相冊(cè)  

2 小時(shí)前 上傳 當(dāng)你點(diǎn)擊“返回”時(shí)會(huì)回到第一個(gè)頁(yè)面 代碼如下：（新建一個(gè)js page 例如：jltfxunlian） Jltfxunlian.hml文件中 <div class=“jltfcontainer“>

     <text class=“jltftitle“>

        訓(xùn)練頁(yè)面

     </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. 驗(yàn)證整個(gè)應(yīng)用和每個(gè)頁(yè)面的生命周期事件 效果顯示： 主頁(yè)面的生命周期顯示

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

下載附件  保存到相冊(cè)  

2 小時(shí)前 上傳   點(diǎn)擊“點(diǎn)我”之后主頁(yè)面會(huì)銷(xiāo)毀之后出現(xiàn)訓(xùn)練頁(yè)面   

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

下載附件  保存到相冊(cè)  

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

     console.log（“訓(xùn)練頁(yè)面的onInit（）被調(diào)用“）

},

onReady（）{

     console.log（“訓(xùn)練頁(yè)面的onReady（）被調(diào)用“）

},

onShow（）{

     console.log（“訓(xùn)練頁(yè)面的onShow（）被調(diào)用“）

},

onDestroy（）{

     console.log（“訓(xùn)練頁(yè)面的onDestroy（）被調(diào)用“）

} 主頁(yè)面js文件中把“訓(xùn)練頁(yè)面”改為“主頁(yè)面”即可

本應(yīng)用練習(xí)參考了張榮超老師部分公開(kāi)的代碼。