HarmonyOS NEXT第二章组件进阶，interface 和 class工具（适用API12以上版本）

本文链接：https://blog.csdn.net/zero_godv/article/details/146284675

HarmonyOS NEXT

3、组件进阶

3.1组件-事件监听

在注册事件中的逻辑必须使用箭头函数（）=>{ }

1.因为function中的this指向为undefind

2.箭头函数中的this指向当前struct实例，可以方便的调用方法和获取属性

当我们事件处理逻辑比较复杂，写在UI描述中无法抽离的时候，我们可以在struct结构体中定义

3.2基础-组件状态

@State修饰符：响应式，当数据发生改变，视图也随之而改变

3.2.1.interface 和 class

interface	class
类型约束的契约	对象创建的模板
只能定义属性和方法的签名	可以包含属性、方法的具体实现
❌ 不能实例化	✅ 可以用 new 创建

// 语法关键词
//   interface     接口
//   class         类
//   implements    实现
//   constructor   构造函数

// 接口类型约束的契约(蓝图)
interface IPerson {
  name: string
  age: number
  gender: string
}

// 类是用于创建对象的模板(生产车间)
class Person implements IPerson {
  name: string
  age: number
  gender: string

  // new 的时候会调用 constructor
  constructor(name: string, age: number, gender: string) {
    // 伪代码：this = {} 创建空对象并赋值给this
    this.name = name
    this.age = age
    this.gender = gender
    // 伪代码： return this 返回这个对象
  }
}

// new 操作符触发 constructor 构造函数(传入材料开始生产)
const p = new Person('zs', 18, '男')
const p1 = new Person('ls', 19, '女')
const p2 = new Person('ww', 20, '男')
console.log('p', JSON.stringify(p))
console.log('p1', JSON.stringify(p1))
console.log('p2', JSON.stringify(p2))

改变一个小需求，当输入框为空时，确认框变为不能点击状态

可以用enable设置按钮是否启用，是Boolean值

getBtnEnable () {
    return  !!this.username && !!this.password
  }

 Row() {
           Button("登录")
          .width('100%')
          .onClick(() => {
            this.login()
          })
          // 隐士转化 ""
          .enabled(this.getBtnEnable())

3.2.2. interface2class 工具

黑马程序员研究院研究出来插件

自动转class插件

使用npm全局安装插件

# 特别注意 $符号不用输入，$符号表示它是一个命令行命令
$ npm i -g interface2class   

# 国内可指定从淘宝镜像下载
$ npm i -g interface2class --registry=https://registry.npmmirror.com

永久设置淘宝镜像

# 查询镜像地址
npm config get registry
# 设置镜像地址
npm config set registry https://registry.npmmirror.com/

脚本禁用-只针对windows
参考教程：【Bug记录】Powershell 无法将“vue”项识别为 cmdlet、函数、脚本文件或可运行程序的名称 - PowerShell 执行策略 - MegaSu - 博客园

解决方法

以管理员身份运行PowerShell
执行：get-ExecutionPolicy，如果显示Restricted，表示状态是禁止的
执行: set-ExecutionPolicy RemoteSigned
选择 Y

测试是否安装成功

$ i2c -V

执行带有interface的文件（从“ % ”符号后面开始输入）

在鸿蒙开发中，只有对象或者数组第一层的数据发生变化，才可以呗观测到，而我们想内部的数据也能观测到，我们需要做的处理如下

3.3组件-双向绑定

支持双向绑定的组件

$$语法：内置组件双向同步

支持@State、@Link和@Prop装饰的变量，如TextInput({ text: $$this.xxx })

值得注意的是：上述组件中有的双向组件是属性，有的双向绑定是参数

参数是在组件({ text: $$this.xx })
属性是在组件().text($$this.xxx)
不支持嵌套数据的双向绑定如组件({ text: $$this.xx.xx })