HarmonyOS应用开发（鸿蒙JS实战）（微课版）课件 任务3.2.4掌握JS页面基本组成

《鸿蒙JS应用开发》项目3应用开发基础3.2.4任务掌握JS页面基本组成在本任务中，您将深入了解JavaScript(JS)页面的基本组成部分。这将包括如何定义应用和页面的业务逻辑，了解生命周期方法以及非生命周期方法，并如何在实际应用中使用这些方法。通过完成这个任务，您将能够有效地开发动态、交互式的页面。任务陈述任务目标实操：在鸿蒙JS应用开发环境中编写简单的应用来体验生命周期方法和自定义方法。理解JS文件在整体应用架构中的作用，以及如何通过模块化进行管理。掌握应用生命周期方法以及页面生命周期方法。学习如何定义数据属性，以及如何通过生命周期方法和非生命周期方法进行操作。基础的JavaScript语法和编程概念。基础的HTML和CSS知识。如果有前端框架(如Vue)的基础知识，将更有助于您理解。知识准备当我们掌握了基础的组件结构以及组件样式之后，如果想要页面更具有表现力，就必须通过JavaScript语言来实现这些逻辑交互功能。当然，如果你已经具备了前端框架(Vue)的基础那么本任务的学习将会非常轻松。任务实施JS文件用来定义HML页面的业务逻辑，支持ECMA规范、ES6语法。基于JavaScript语言的动态化能力，可以使应用更加富有表现力，具备更加灵活的设计能力。模块规范化01exportdefault{

onCreate(){

(‘应用创建的时候调用onCreate方法’);},

onDestroy(){

(‘应用销毁的时候调用onDestroy方法’);}};在鸿蒙App中添加JS脚本的支持，需要遵循ES6的模块化规范。首先整个应用对应着一个全局的js文件，即app.js文件，代码如下所示：该模块对整个应用有效，其中onCreate方法在应用创建的时候调用，onDestroy方法在应用销毁的时候调用。但是对于初学者来说一般不需要修改该文件的代码。1.模块规范化//导出默认的模块exportdefault{//数据属性data:{//标题数据title:“HelloWorld”}，//初始化方法onInit(){console.log(“页面初始化的时候用”)；//输出日志，打印标题数据console.log(this.title);}}对于我们来说，每一个页面对应一个页面JS模块化文件，这个文件只针对当前这个页面生效，我们会经常使用。以下代码是一个模块化基础的代码结构，即在index.js输入如下代码：运行预览器，可以在PreviewerLog预览器日志中观察到运行的结果，如下图所示：观察结果不难发现，程序运行首先执行app.js文件中的onCreate方法，然后再执行index.js文件中的onInit方法，最后输出title属性值。综上所述，一个js文件模块的基本组成包括数据属性，生命周期方法以及非生命周期方法。1.模块规范化生命周期方法02在上一节模块规范化的学习中，我们接触到了app.js的

onCreate/onDestroy方法，以及页面index.js的onInit方法，这些方法我们称之为生命周期方法。1.生命周期方法的介绍生命周期指的是应用或者页面从创建到销毁的全过程，而生命周期方法指的是在整个生命周期的不同阶段会被系统自动调用的方法。生命周期方法在鸿蒙JS应用开发中分为应用生命周期方法和页面生命周期方法。在app.js中可以定义如下应用生命周期函数，每一个生命周期方法对应的功能描述以及触发时机如下表所示：属性类型描述触发时机onCreate()=>void应用创建当应用创建时调用onShow()=>void应用处于前台当应用处于前台时触发onHide()=>void应用处于后台当应用处于后台触发onDestroy()=>void应用销毁当应用退出时触发2.应用生命周期这里简单测试一下具体的应用生命周期函数，app.js代码如下exportdefault{onCreate(){("应用创建的时候调用onCreate方法”);}，onShow(){console.log(“应用处于前台的时候调用onShow方法”);}，onHide()(console.log("应用处于后台的时候调用onHide法”);}，onDestroy(){console.info(”应用销毁的时候调用onDestro方法”);}};测试应用生命周期方法，当应用创建的时候，系统自动调用onCreate方法，按住Home键，切换到手机桌面，系统自动调用onHide方法，重新回到应用中，系统自动调用onShow方法，点击返回键销毁应用，系统先调用onHide方法，然后立刻调用onDestroy方法。具体运行结果如下图所示：实际开发中我们只需要根据实际需求在对应的方法中编写自己的业务逻辑即可2.应用生命周期不仅应用具备完整的生命周期方法，一个App的页面也有一些生命周期方法，每一个生命周期方法对应的功能描述以及触发时机如下表所示：属性类型描述触发时机onInit()=>void页面初始化页面数据初始化完成时触发，只触发一次onReady()=>void页面创建完成页面创建页面创建完成时触发，只触发一次onShow()=>void页面显示页面显示时触发onHide()=>void页面消失页面消失时触发onDestroy()=>void页面销毁页面销毁时触发onBackPress()=>boolean返回按钮动作当用户点击返回按钮时触发。返回true表示页面自己处理返回逻辑。返回false表示使用默认的返回逻辑。不返回值会作为false处理。onActive()()=>void页面激活页面激活时触发onInactive()()=>void页面暂停页面暂停时触发onNewRequest()()=>voidFA重新请求请FA已经启动时收到新的请求后触发3.页面生命周期

页面A的周期接口的调用顺序打开页面A:onInit()->onReady()->onShow()在页面A:打开页面B:onHide()

从页面B:返回页面A:onShow()退出页面A:onBackPress()->onHide()->onDestroy()页面隐藏到后台运行：onInactive()

->onHide()页面从后台运行恢复到前台：onShow()

->onActive()页面生命周期完整状态图如下图所示：3.页面生命周期这里简单测试一下具体的页面生命周期函数，index.js代码如下所示：exportdefault{data:{title:“HelloWorld”},onInit(){console.log(“页面初始化”);},onReady(){

console.log(“页面已经准备完毕”);},onShow(){console.log(“页面显示”);},onHide()(console.log(“页面隐藏”);},onDestroy()console.log(“页面销毁”);}}3.页面生命周期启动远程模拟器测试页面生命周期方法，当应用加载完页面的时候，系统自动依次调用onInitonReady、onShow方法，运行结果如图所示：按住Home键，切换到手机桌面，系统自动调用onHide方法，如图所示：重新回到应用中，系统自动重新再次调用onInit、onReady、onShow方法，运行结果如图所示：点击返回键销毁应用，系统先调用onHide、onDestroy方法，具体运行结果如图所示：3.页面生命周期非生命周期方法03既然我们可以重写生命周期方法来完成我们自己的业务逻辑，同样地我们也可以自己编写方法来完成相应的业务逻辑。自己编写的方法我们称为非生命周期方法或者自定义方法，生命周期方法的调用由系统触发，我们自己编写的方法可以由用户操作触发。1.非生命周期方法介绍在index.js文件中编写如下代码：//导出默认模块exportdefault{//数据对象data:{title:“HelloWorld”},//生命周期方法:页面初始化函数onInit(){console.log(“页面初始化”);},//非生命周期方法：输出title的值sayHello(){console.log(this.title);}}在index.hml中编写如下代码：<!-注册一个onclick事件，点击container后，执