梅科尔工作室-赵亮-鸿蒙笔记1

• Harmony提供的方舟框架（ArkUI框架）
  • 两种开发范式
    • 基于ArkTS开发的，声明式开发范式
    • 兼容Js 的类web开发范式，简称-类web开发范式
  • 两种应用模型
    • stage模型的工程目录文件的作用

      

    • FA模型下的工程目录文件的作用

      

• 更换应用图标和名字的方法
  • 更换图标

    • 

  • 更换名字
• 项目远程模拟方法
• 语法基础知识

  

  • 装饰器： 用于装饰类、结构、方法以及变量，赋予其特殊的含义，如上述示例中@Entry、@Component和@State都是装饰器。 具体而言，@Component表示这是个自定义组件；@Entry则表示这是个入口组件；@State表示组件中的状态变量，这个状态变换会引起UI变更。
    • @Component：装饰struct，结构体在装饰后具有基于组件的能力，需要实现build方法来创建UI。
    • @Entry： 装饰struct，组件被装饰后作为页面的入口，页面加载时将被渲染显示。
    • @Preview：装饰struct， 用@Preview装饰的自定义组件可以在DevEco Studio的预览器上进行实时预览，加载页面时，将创建并显示@Preview装饰的自定义组件。
  • 自定义组件：可复用的UI单元，可组合其他组件，如上述被@Component装饰的struct Hello。
  • UI描述：声明式的方法来描述UI的结构，例如build()方法中的代码块。
  • 内置组件：ArkTS中默认内置的基本组件和布局组件，开发者可以直接调用，如Column、Text、Divider、Button等。
  • 属性方法：用于组件属性的配置，如fontSize()、width()、height()、color()等，可通过链式调用的方式设置多项属性。
  • 事件方法：用于添加组件对事件的响应逻辑，统一通过事件方法进行设置，如跟随在Button后面的onClick()。
  • 无参数构造配置
    • 如果组件的接口定义中不包含必选构造参数，组件后面的“()”中不需要配置任何内容。
    • 例如
    • Column() {
    • Text('item 1')
    • Divider()
    • Text('item 2')
    • }
  • 必选参数构造配置
    • 如果组件的接口定义中包含必选构造参数，则在组件后面的“()”中必须配置相应参数，参数可以使用常量进行赋值。
    • 例如
    • Image('https://xyz/test.jpg')
    • Text('test')
  • 属性配置
    • 配置Text组件的字体大小属性：
      • Text('test')
      • .fontSize(12)
  • 使用"."运算符进行链式调用并同时配置组件的多个属性，如下所示：
    • Image('test.jpg')
    • .alt('error.jpg')
    • .width(100)
    • .height(100)
  • 事件配置
  • 通过事件方法可以配置组件支持的事件，事件方法紧随组件，并用"."运算符连接。
    • 使用lambda表达式配置组件的事件方法：
    • Button('add counter')
    • .onClick(() => {
    • this.counter += 2
    • })
  • 使用匿名函数表达式配置组件的事件方法，要求使用bind，以确保函数体中的this引用包含的组件：
    • Button('add counter')
    • .onClick(function () {
    • this.counter += 2
    • }.bind(this))
  • 使用组件的成员函数配置组件的事件方法：
    • myClickHandler(): void {
    • this.counter += 2
    • }
    • ...
    • Button('add counter')
    • .onClick(this.myClickHandler)
  • 子组件配置
  • 对于支持子组件配置的组件，例如容器组件，在"{ ... }"里为组件添加子组件的UI描述。Column、Row、Stack、Grid、List等组件都是容器组件。
  • 以下是简单的Column示例：
    • Column() {
    • Text('Hello')
    • .fontSize(100)
    • Divider()
    • Text(this.myText)
    • .fontSize(100)
    • .fontColor(Color.Red)
    • }
  • 容器组件之间也可以互相嵌套，实现相对复杂的多级嵌套效果：
    • Column() {
    • Row() {
    • Image('test1.jpg')
    • .width(100)
    • .height(100)
    • Button('click +1')
    • .onClick(() => {
    • console.info('+1 clicked!')
    • })
    • }
    • Divider()
    • Row() {
    • Image('test2.jpg')
    • .width(100)
    • .height(100)
    • Button('click +2')
    • .onClick(() => {
    • console.info('+2 clicked!')
    • })
    • }
    • Divider()
    • Row() {
    • Image('test3.jpg')
    • .width(100)
    • .height(100)
    • Button('click +3')
    • .onClick(() => {
    • console.info('+3 clicked!')
    • })
    • }
    • }