清浊-《鸿蒙应用程序开发-董昱》-第五章JavaScript UI设计

开发 前端
本文是读书笔记,学习笔记。包含书中内容的对比总结、关键提炼、知识补充、思维导图。在JS UI开发的学习过程,会着重思考与Java UI开发的差异。

[[425229]]

想了解更多内容,请访问:

51CTO和华为官方合作共建的鸿蒙技术社区

https://harmonyos.51cto.com

引言

一、本文的目的

1.本文是读书笔记,学习笔记。包含书中内容的对比总结、关键提炼、知识补充、思维导图。在JS UI开发的学习过程,会着重思考与Java UI开发的差异。

2.鉴于官方文档关于JS UI的讲解很散乱、不聚焦,在北向HCIA学习路上就需要各位大佬出的书和视频来助力,近期会从三本书籍去学习JS UI开发去学习和祖做笔记,并对三本书关于这一块儿知识的讲解做一个总结,最后解析JS UI官方示例工程。书籍分别是《鸿蒙应用程序开发-董昱》、《鸿蒙操作系统应用开发实践-中科院》、《鸿蒙操作系统开发入门经典-徐文礼》

二、学习《鸿蒙应用程序开发-董昱》的体验

1.代码很规范!很规范!很规范!有注解

2.董昱老师的示例代码目前已学习到的,没有是直接从官方文档的示例代码拿下来的,很用心了。示例代码块的上方都有所在文件的位置!!!!不需要焦虑代码该敲在哪儿的问题了。

3.在JS UI这块儿官方文档的知识很散乱,不聚焦,董昱老师的讲解很系统

4.董昱老师对参数的解释很到位

5.方法的图解、概念的图示都很到位

6.最后也是最关键的一点!董昱老师的《鸿蒙应用程序开发》有免费的配套课程!!!!鸿蒙应用程序开发视频教程

7.学习JS开发官方文档,以下两个文档比较好。

一、JavaScript UI设计

5.0概述

Java UI与JS UI

区别

  • Java UI开发 安卓型(事件式编程范式)
  • JS UI开发 Web前端(声明式编程范式)

联系

  • JS UI更加倾向于界面开发,在复杂业务逻辑方面,需要Java来帮忙。
  • 在轻量级智能穿戴设备上的JS UI会更轻量级一点,并不能使用所有的JS UI特性

HML与HTML

区别

  • HML:鸿蒙标记语言,表述用户界面结构
  • HTML:超文本标记语言,描述 web文档的一种标记语言(大家熟知不做赘述)

联系

  • 一门标记语言
  • 一种文件类型
  • HTML与HML的用法及其相似

5.1 初识Js UI

5.1.1 JS实例与页面

(1)概念辨析

1.创建工程

继承的类有变化

  • 之前:Ability
  • 现在:AceAbility

主要管理JS目录下的文件

关于:common.images文件夹的疑惑,其实就是形式上变了一点点而已,不影响的。

2.实例与页面

实例(JavaScript实例):

  • 一组与功能相关的用户界面和功能
  • 默认的实例名称为default

实例与Ability

  • 每个独立的实例都被独立的Ability管理
  • default实例默认被MainAbility管理

实例与Page

  • 在实例中,可以创建多个用户界面,其中每个用户界面被称为一个页面(Page)

实例、页面、Ability可视化关系图

JS UI的页面(Page)与Java UI中的界面(AbilitySlice)

  • 两者相似
  • 要用于承载单个页面的具体逻辑实现和界面UI,是应用显示、运行和跳转的最小单元

实例配置

位置:config.json

属性:

  • name:实例名,默认default
  • pages:声明实例所包含的页面
  • Page属性是页面路径组成的数组
  • 页面路径是以实例目录为根目录的路径,不带后缀

window:声明与虚拟像素相关的选项

  • designWidth:虚拟宽度(px像素此时也是虚拟)
  • autoDesignWidth:是否启动(fasle且不设虚拟宽度则px为实际物理宽度)

代码:

(2)概念补充

关于视觉中的基础概念补充HarmonyOS官方文档-设计-视觉风格-基础概念

虚拟像素单位:vp

  • 虚拟像素(virtual pixel)是一台设备针对应用而言所具有的虚拟尺寸(区别于屏幕硬件本身的像素单位)。它提供了一种灵活的方式来适应不同屏幕密度的显示效果。

字体像素单位:fp

  • 字体像素(font pixel) 大小默认情况下与 vp 相同,即默认情况下 1 fp = 1vp。如果用户在设置中选择了更大的字体,字体的实际显示大小就会在 vp 的基础上乘以 scale 系数,即 1 fp = 1 vp * scale。

关于尺寸单位的补充HarmonyOS官方文档-Native API-JS API-语法-CSS语法参考

逻辑像素px(文档中以表示):

1. 默认卡片具有的逻辑宽度为150px,实际显示时会将页面布局缩放至屏幕实际宽度,如100px在宽度为300的卡片上,实际渲染为200物理像素(从150px向300物理像素,所有尺寸放大2倍)。

2. 额外配置autoDesignWidth为true时,逻辑像素px将按照屏幕密度进行缩放,如100px在屏幕密度为3的设备上,实际渲染为300物理像素。应用需要适配多种设备时,建议采用此方法。

5.1.2 新JS实例

两种方法

创建新的JS UI的PA,并同时创建实例

解疑:Launcher Ability

仅创建一个新的实例

Ability与实例的指定

跟Java中Ability与AbilitySlice的指定是类似的

  • Java中通过setUIContent()
  • Js中通过setInstanceName()

注:

1.默认情况MainAbility加载default实例,不需要通过setInstanceName()传入default这个实例名称字符串。

2.setInstanceName(String name)的参数“name”指实例名称,实例名称与config.json文件中module.js.name的值对应。

5.1.3 初识页面

讲JS开发目录的介绍,着重讲清楚了i18n目录的来历、结构、用处。

其他内容见HarmonyOS官方文档-开发-UI-JS UI框架-初步体验JS FA应用-JS FA概述

5.1.4页面跳转

(1)概念

页面栈:JS UI中,支持页面的层级结构,即上层页面遮盖下层页面,形成栈结构。

页面路由:页面的跳转关系被称为页面路由,由JS UI的router模块来管理,需要js文件的export default的代码块前进行导入

  1. import router from '@system.router'

(2)router模块

ctrl+鼠标左键router进去以后,对英文注解进行翻译

方便记忆的方法总结(老师书上还对参数做了一定的解释,特别棒)

  • push(obj: Router Options):跳转(覆盖)
  • replace(obj: RouterOptions):跳转(销毁)
  • back(obj?: BackRouterOptions):返回
  • clear():清除(被遮盖的页面)
  • getLength():堆栈中的页数
  • getState():获取有关当前页面状态的信息,返回IRouterState对象,该对象包括index、name、path。
  • index:整型,表示当前页面所在的页面栈中的位置,从底层到顶层是从1开始计数的
  • name:字符串,表示当前页面的文件名
  • path:字符串,表示当前页面的路径
  1. /** 
  2.  * @Syscap SysCap.ACE.UIEngine 
  3.  */ 
  4. export default class Router { 
  5.   /** 
  6.    * Navigates to a specified page in the application based on the page URL and parameters. 
  7.    * 根据页面URL和参数导航到应用程序中的指定页面。 
  8.    * @param obj 
  9.    */ 
  10.   static push(obj: RouterOptions): void; 
  11.  
  12.   /** 
  13.    * Replaces the current page with another one in the application. The current page is destroyed after replacement. 
  14.    * 用应用程序中的另一页替换当前页。替换后,当前页面将被销毁。 
  15.    * @param obj 
  16.    */ 
  17.   static replace(obj: RouterOptions): void; 
  18.  
  19.   /** 
  20.    * Returns to the previous page or a specified page. 
  21.    * 返回上一页或指定页。 
  22.    * @param obj 
  23.    */ 
  24.   static back(obj?: BackRouterOptions): void; 
  25.  
  26.   /** 
  27.    * Clears all historical pages and retains only the current page at the top of the stack. 
  28.    * 清除所有历史页面,并在堆栈顶部仅保留当前页面。 
  29.    */ 
  30.   static clear(): void; 
  31.  
  32.   /** 
  33.    * Obtains the number of pages in the current stack. 
  34.    * 获取当前堆栈中的页数。 
  35.    * @returns Number of pages in the stack. The maximum value is 32. 
  36.    */ 
  37.   static getLength(): string; 
  38.  
  39.   /** 
  40.    * Obtains information about the current page state. 
  41.    * 获取有关当前页面状态的信息。 
  42.    * @returns Page state. 
  43.    */ 
  44.   static getState(): RouterState; 

出入栈与方法的对应

  • push:新页面入栈
  • back:当前页面出栈
  • replace:把当前页面出栈、替换的新页面入栈
  • clear:把当前页面以下的所有页面都出栈

(3)实现index页面跳转到secpage页面

index.js中实现跳转代码

  1. //index.js 
  2. //导入router模块 
  3. import router from '@system.router'
  4. export default { 
  5.     data: { 
  6.         harmony:null 
  7.     }, 
  8.     onInit() { 
  9.         this.harmony ="董昱老师YYDS" 
  10.  
  11.     }, 
  12.     //跳转到secpage的方法 
  13.     toSecPage(){ 
  14.     //通过push方法入栈 
  15.         router.push({ 
  16.             //指定跳转位置 
  17.             uri:'pages/index/secpages/secpages'
  18.             //传递数据 
  19.             params:{ 
  20.                 harmony: this.harmony 
  21.             } 
  22.         }); 
  23.     } 

进行一些基本的设置以后,动图奉上!

(4)使用被传递的数据,并实现从SecPage返回index

在secpage.js里接收index传过来数据,并通过console.info(message)方法将字符串变量以HiLog的形式输出

  1. //secpage.js 
  2. import router from '@system.router'
  3. export default { 
  4.     data: { 
  5.         title: '跳转成功' 
  6.     }, 
  7.     onInit(){ 
  8.         //输出刚被传递出来的Harmony字符串 
  9.         console.info(this.harmony); 
  10.     }, 
  11.     back(){ 
  12.         router.back(); 
  13.     } 

5.1.5 页面的生命周期函数

这一块儿,书中没有官方文档讲得详细,图解也没有那么易懂,所以采取的互相补充的方式

HarmonyOS官方文档-JS API参考-手机、平板、智能屏和智能穿戴开发-框架说明-生命周期

(1)页面生命周期(总结+补充)

页面生命周期(书中只讲了前5个即从初始化到销毁的生命周期)

(2)页面A的生命周期接口的调用顺序

  • 打开页面A:onInit() -> onReady() -> onShow()
  • 在页面A打开页面B:onHide()
  • 从页面B返回页面A:onShow()
  • 退出页面A:onBackPress() -> onHide() -> onDestroy()
  • 页面隐藏到后台运行:onInactive() -> onHide()
  • 页面从后台运行恢复到前台:onShow() -> onActive()

注意:

  • 调用生命周期函数,可以通过conslole.info()进行打印
  • 通过onBackPress()方法监听系统返回事件
  • 一个完整的页面生命周期中,至少会被调用一次,并且onInit() 、onReady()、onDestroy()仅能被调用一次

(3)Java UI中与JS UI中Page Ability的对比(补充)

相关官方文档

JS UI

Java UI

Page的组成单元

  • Java UI中是AbilitySlice(AbilitySlice主要用于承载单个页面的具体逻辑实现和界面UI,是应用显示、运行和跳转的最小单元)
  • JS UI中是JavaScript实例(见5.1.1)

组成单元的生命周期与Page Ability的生命周期

组成单元的生命周期依托于Page的生命周期。组成单元的生命周期与Page的相应回调类似,但组成单元还具有独立于Page的生命周期变化,如同一Page中的AbilitySlice之间导航时,此时Page的生命周期状态不会改变。

图解

Java UI

Js UI

5.1.6 应用对象(应用生命周期)

(1)应用生命周期(4个)

注意

  • 在任何一个页面中,通过this.$app代码即可获取当前的应用对象,应用对象应用自身的生命周期,开发者可以在应用对象中实现JavaScript全局变量。
  • 在onCreate()、onDestroy()两种方法中可以实现数据库的管理,例如:在前者方法中执行一些初始化操作(网络连接、账号检查)、在后者方法中检查数据库是否关闭,如果未关闭则要立即关闭。

(2)共享应用对象的变量(全局变量)

应用对象是一个单例,在应用对象中定义的变量可以在所有页面中进行调用。

在app.js中添加1个变量jumpCount,用于记录用户的页面跳转次数,然后创建该变量的Get/Set方法

  1. //app.js 
  2. export default { 
  3.     data:{ 
  4.         jumpCount:null 
  5.     }, 
  6.     //获取页面跳转次数 
  7.     getJumpCount(){ 
  8.         return this.jumpCount; 
  9.     }, 
  10.     //设置页面的跳转次数 
  11.     setJumcount(){ 
  12.         this.jumpCount =count
  13.     }, 
  14.     //页面的跳转次数 +1 
  15.     increaseJumpCount(){ 
  16.         this.jumpCount ++; 
  17.     }, 
  18.     onCreate() { 
  19.         this.jumpCount =0; //初始化页面的跳转次数为0 
  20.         console.info('AceApplication onCreate'); 
  21.     }, 
  22.     onDestroy() { 
  23.         console.info('AceApplication onDestroy'); 
  24.     } 
  25. }; 

对index.js和secpage.js进行相应的设置最后的日志

想了解更多内容,请访问:

51CTO和华为官方合作共建的鸿蒙技术社区

https://harmonyos.51cto.com

 

责任编辑:jianghua 来源: 鸿蒙社区
相关推荐

2011-05-06 08:41:33

UI设计应用程序iPad

2011-02-22 10:23:43

2012-02-16 10:31:02

AndroidWeb App官方文档

2010-12-10 10:08:24

2012-04-04 22:10:14

UI

2020-10-10 10:30:31

JavaScript开发技术

2014-01-16 16:53:53

storm事务一致性

2017-01-15 15:02:42

JavaScript移动应用开发框架

2012-02-08 15:06:31

ibmdw

2022-09-19 00:37:13

SaaS云计算开发

2013-02-21 14:15:41

开发Tizen

2013-02-21 14:14:40

开发Tizen

2010-11-23 09:06:37

Web应用程序

2013-01-11 15:36:09

iOS开发移动应用iPhone

2021-01-25 09:58:01

鸿蒙HarmonyOS应用开发

2010-03-02 13:06:22

SilverLight

2012-01-13 10:31:25

ibmdw

2011-12-23 10:01:29

2020-12-28 14:40:47

云计算云应用SaaS

2013-11-19 15:35:01

点赞
收藏

51CTO技术栈公众号