HarmonyOS鸿蒙Next应用-呼吸训练app部分练习展示（开始）

HarmonyOS鸿蒙Next应用-呼吸训练app部分练习展示（开始）

1. 在主页面添加一个按钮并响应点击事件
   效果显示：
   
   点击按钮“点我”下方便会显示“我被点击了”说明点击事件已完成
   代码如下：
   Index.hml 文件中

   <div class="jltfcontainer">
       <text class="jltftitle">Hello {{title}}</text>
       <input type="button" value="点我" class="jltfbtn" onclick="jltfclickAction"/>
   </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. 添加训练页面并实现其与主页面之间的相互跳转
   效果显示
   主页面的生命周期显示
   
   点击“点我”将会进入下一个页面
   
   当你点击“返回”时会回到第一个页面
   代码如下：（新建一个 js page 例如：jltfxunlian）
   Jltfxunlian.hml 文件中

   <div class="jltfcontainer">
       <text class="jltftitle">训练页面</text>
       <input type="button" value="返回" class="jltfbtn" onclick="jltfclickAction"/>
   </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](/user/system).router'
   
   export default {
       data: {},
       jltfclickAction(){
           router.replace({
               uri:'pages/index/index'
           });
       }
   }

3. 验证整个应用和每个页面的生命周期事件
   效果显示：
   主页面的生命周期显示
   
   点击“点我”之后主页面会销毁之后出现训练页面
   代码如下
   在两个 js 文件中加入如下代码

   onInit() {
       console.log("训练页面的onInit()被调用");
   },
   onReady() {
       console.log("训练页面的onReady()被调用");
   },
   onShow() {
       console.log("训练页面的onShow()被调用");
   },
   onDestroy() {
       console.log("训练页面的onDestroy()被调用");
   }

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