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

Der_带鱼
发布于 2021-9-17 20:05
浏览
10收藏

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

引言

一、本文的目的

  • 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文件夹的疑惑,其实就是形式上变了一点点而已,不影响的。
      • 清浊-《鸿蒙应用程序开发-董昱》-第五章JavaScript UI设计-鸿蒙开发者社区
    • 清浊-《鸿蒙应用程序开发-董昱》-第五章JavaScript UI设计-鸿蒙开发者社区
  • 2.实例与页面

    • 实例(JavaScript实例):

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

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

      • 在实例中,可以创建多个用户界面,其中每个用户界面被称为一个页面(Page)
    • 实例、页面、Ability可视化关系图

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

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

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

      • 位置:config.json
      • 属性:
        • name:实例名,默认default
        • pages:声明实例所包含的页面
          • Page属性是页面路径组成的数组
          • 页面路径是以实例目录为根目录的路径,不带后缀
        • window:声明与虚拟像素相关的选项
          • designWidth:虚拟宽度(px像素此时也是虚拟)
          • autoDesignWidth:是否启动(fasle且不设虚拟宽度则px为实际物理宽度)
      • 代码:清浊-《鸿蒙应用程序开发-董昱》-第五章JavaScript UI设计-鸿蒙开发者社区
(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(文档中以<length>表示):
      1. 默认卡片具有的逻辑宽度为150px,实际显示时会将页面布局缩放至屏幕实际宽度,如100px在宽度为300的卡片上,实际渲染为200物理像素(从150px向300物理像素,所有尺寸放大2倍)。
      2. 额外配置autoDesignWidth为true时,逻辑像素px将按照屏幕密度进行缩放,如100px在屏幕密度为3的设备上,实际渲染为300物理像素。应用需要适配多种设备时,建议采用此方法。

5.1.2 新JS实例

  • 两种方法
      1. 创建新的JS UI的PA,并同时创建实例
    • 清浊-《鸿蒙应用程序开发-董昱》-第五章JavaScript UI设计-鸿蒙开发者社区
    • 清浊-《鸿蒙应用程序开发-董昱》-第五章JavaScript UI设计-鸿蒙开发者社区
      • 解疑:Launcher Ability
      • 清浊-《鸿蒙应用程序开发-董昱》-第五章JavaScript UI设计-鸿蒙开发者社区
      1. 仅创建一个新的实例
    • 清浊-《鸿蒙应用程序开发-董昱》-第五章JavaScript UI设计-鸿蒙开发者社区
    • 清浊-《鸿蒙应用程序开发-董昱》-第五章JavaScript UI设计-鸿蒙开发者社区
  • 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 初识页面

5.1.4页面跳转

(1)概念
  • 页面栈:JS UI中,支持页面的层级结构,即上层页面遮盖下层页面,形成栈结构。

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

    • import router from '@system.router';
      
    • 清浊-《鸿蒙应用程序开发-董昱》-第五章JavaScript UI设计-鸿蒙开发者社区

(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:字符串,表示当前页面的路径
/**
 * @Syscap SysCap.ACE.UIEngine
 */
export default class Router {
  /**
   * Navigates to a specified page in the application based on the page URL and parameters.
   * 根据页面URL和参数导航到应用程序中的指定页面。
   * @param obj
   */
  static push(obj: RouterOptions): void;

  /**
   * Replaces the current page with another one in the application. The current page is destroyed after replacement.
   * 用应用程序中的另一页替换当前页。替换后,当前页面将被销毁。
   * @param obj
   */
  static replace(obj: RouterOptions): void;

  /**
   * Returns to the previous page or a specified page.
   * 返回上一页或指定页。
   * @param obj
   */
  static back(obj?: BackRouterOptions): void;

  /**
   * Clears all historical pages and retains only the current page at the top of the stack.
   * 清除所有历史页面,并在堆栈顶部仅保留当前页面。
   */
  static clear(): void;

  /**
   * Obtains the number of pages in the current stack.
   * 获取当前堆栈中的页数。
   * @returns Number of pages in the stack. The maximum value is 32.
   */
  static getLength(): string;

  /**
   * Obtains information about the current page state.
   * 获取有关当前页面状态的信息。
   * @returns Page state.
   */
  static getState(): RouterState;
}

  • 出入栈与方法的对应

    • push:新页面入栈
    • back:当前页面出栈
    • replace:把当前页面出栈、替换的新页面入栈
    • clear:把当前页面以下的所有页面都出栈
(3)实现index页面跳转到secpage页面
  • index.js中实现跳转代码

  • //index.js
    //导入router模块
    import router from '@system.router';
    export default {
        data: {
            harmony:null
        },
        onInit() {
            this.harmony ="董昱老师YYDS"
    
        },
        //跳转到secpage的方法
        toSecPage(){
        //通过push方法入栈
            router.push({
                //指定跳转位置
                uri:'pages/index/secpages/secpages',
                //传递数据
                params:{
                    harmony: this.harmony
                }
            });
        }
    }
    
  • 进行一些基本的设置以后,动图奉上!

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

(4)使用被传递的数据,并实现从SecPage返回index
  • 在secpage.js里接收index传过来数据,并通过console.info(message)方法将字符串变量以HiLog的形式输出

  • //secpage.js
    import router from '@system.router';
    export default {
        data: {
            title: '跳转成功'
        },
        onInit(){
            //输出刚被传递出来的Harmony字符串
            console.info(this.harmony);
        },
        back(){
            router.back();
        }
    }
    
    

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

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

5.1.5 页面的生命周期函数

(1)页面生命周期(总结+补充)
  • 页面生命周期(书中只讲了前5个即从初始化到销毁的生命周期)

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

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

(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的对比(补充)

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

(1)应用生命周期(4个)
  • 清浊-《鸿蒙应用程序开发-董昱》-第五章JavaScript UI设计-鸿蒙开发者社区

  • 注意

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

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

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

  • //app.js
    export default {
        data:{
            jumpCount:null
        },
        //获取页面跳转次数
        getJumpCount(){
            return this.jumpCount;
        },
        //设置页面的跳转次数
        setJumcount(){
            this.jumpCount =count;
        },
        //页面的跳转次数 +1
        increaseJumpCount(){
            this.jumpCount ++;
        },
        onCreate() {
            this.jumpCount =0; //初始化页面的跳转次数为0
            console.info('AceApplication onCreate');
        },
        onDestroy() {
            console.info('AceApplication onDestroy');
        }
    };
    
    • 对index.js和secpage.js进行相应的设置最后的日志

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

©著作权归作者所有,如需转载,请注明出处,否则将追究法律责任
book_route_20210915.zip 420.31K 18次下载
9
收藏 10
回复
举报
3条回复
按时间正序
/
按时间倒序
mb609898e2cfb86
mb609898e2cfb86

很详细的学习笔记,有点想买本董老师的书看看了。

1
回复
2021-9-18 10:11:09
董昱
董昱

哎呦,这有点不好意思了。惭愧惭愧。

不过非常感谢老师您的支持哈。

回复
2021-9-18 14:00:08
Der_带鱼
Der_带鱼 回复了 mb609898e2cfb86
很详细的学习笔记,有点想买本董老师的书看看了。

真滴很不错,书上的的配套源代码也分得很细,学习的时候很方便找到。简单举个例子~

回复
2021-9-20 00:16:08
回复
    相关推荐