华为HarmonyOS之Watch系列APP开发(3)

对于鸿蒙app中的每个页面,在其从表盘上显示出来到其从表盘消失的整个过程中会在不同的阶段自动触发相应的生命周期事件,此外,对于整个应用而言,在其整个生命周期过程中也会在不同的阶段自动触发相应的生命周期事件。

整个应用的生命周期事件:
onlnit:页面的数据已经准备好,可以使用js文件中的数据;
onReady:页面已经编译完成,可以将页面显示给用户;
onShow:页面正在显示;
onDestroy:页面正在销毁

不管是整个页面还是整个应用,当触发某个生命周期事件时,会自动调用同名的函数

app.js

这个文件用于全局javascript逻辑和应用的生命周期管理

export default {
    onCreate() { //默认的生命周期事件onCreate
        console.log("应用完成创建"); // 在函数体中各打印了一条log,为了能够打印出Debug级别的日志,将info修改为log
    },
    onDestroy() { //默认的生命周期事件onDestroy
        console.log("应用完成销毁");
    }
};

index.js

import router from '@system.router' // 从system的routrt中导入router
export default {
    data: {
        title: '朱小帅' //定义一个变量title,值为 朱小帅,而这个变量title是index.hml中使用两个{{}}占位符,是在程序的运行中动态确定的,即动态绑定

    }, // 注意 :data 右花括号和clickAction 之间必须加上,
    clickAction() { //定义一个名为clickaction的函数
        router.replace({
            uri: 'pages/train/train'
        }); // 添加一条页面跳转语句
    },

// 实现页面的四个生命周期事件
    onInit() {
        console.log("主页面的onInit()被调用"); //在回调函数中打印log
    },

    onReady() {
        console.log("主页面的onReady()被调用"); //在回调函数中打印log
    },

    onShow() {
        console.log("主页面的onShow()被调用"); //在回调函数中打印log
    },

    onDestroy() {
        console.log("主页面的onDestroy()被调用"); //在回调函数中打印log
    }
}

train.js

import router from '@system.router' // 从system的routrt中导入router

export default {
    data: {

    }, // 注意 :data 右花括号和clickAction 之间必须加上,
    clickAction() { //定义一个名为clickaction的函数
        router.replace({
            uri:'pages/index/index' // 项目的config.json中对主页面的rui进行了定义,可以看到因在项目的子目录pages右键新增js page后在config.json中有新增训练页面的uri定义
        }); // 添加一条页面跳转语句,此处有下划线报错提醒:这个需要需要从system的routrt中导入router,且需要在一对花括号中指定主页面uri地址
    },
// 实现页面的四个生命周期事件
    onInit() {
        console.log("训练页面的onInit()被调用"); //在回调函数中打印log
    },
    onReady() {
        console.log("训练页面的onReady()被调用"); //在回调函数中打印log
    },
    onShow() {
        console.log("训练页面的onShow()被调用"); //在回调函数中打印log
    },
    onDestroy() {
        console.log("训练页面的onDestroy()被调用"); //在回调函数中打印log
    }
}

为了能够看到打印出来的log,以debug模式运行应用。

上一篇
下一篇