鸿蒙ts

这是一篇关于鸿蒙ts的思维导图，鸿蒙TS，更准确地说是ArkTS，是HarmonyOS（鸿蒙操作系统）中用于应用开发的一种语言。ArkTS在TypeScript（简称TS）的基础上进行了扩展，是TypeScript的超集，它继承了TypeScript的所有特性，并围绕应用开发做了进一步的优化和扩展。

鸿蒙ts

• DevEco Studio 下载 https://developer.huawei.com/consumer/cn/
• 1-20
  • 对象-定义&使用
    • 对象 – 方法interface接口名称 {方法名: (参数:类型) => 返回值类型} 如 interface Person{dance: () => voidsing: (song: string) => void}
  • 文字溢出省略号、行高 ext('方舟...').textOverflow({overflow: TextOverflow.Ellipsis }) .maxLines(2) .lineHeight(30)
  • 输入框 TextInput({placeholder: '占位符文本'}) .type( inputType.Normal \ Password)
• 21-37
  • 设计资源-svg图标 https://developer.huawei.com/consumer/cn/design/harmonyos-icon
  • 设置组件圆角 .borderRadius(参数) .borderRadius({ topLeft: 5, topRight: 10, bottomRight: 15, bottomLeft: 20 })
  • 背景属性
    • 背景色 backgroundColor
    • 背景图 backgroundImage .backgroundImage($r('app.media.flower'), ImageRepeat.XY) NoRepeat：不平铺，默认值 X：水平平铺 Y：垂直平铺 XY：水平垂直均平铺
    • 背景图位置 backgroundImagePosition .backgroundImagePosition({ x: 100, y:100 }) .backgroundImagePosition(Alignment.Center) 位置坐标： { x: 位置坐标, y: 位置坐标 } (单位下一节详细说) Ø 枚举 Alignment
    • 背景图尺寸 backgroundImageSize .backgroundImageSize({ width: 250, height: 100 }) 背景图宽高：{ width: 尺寸, height: 尺寸 } 枚举 ImageSize： Contain：等比例缩放背景图，当宽或高与组件尺寸相同停止缩放 Cover：等比例缩放背景图至图片完全覆盖组件范围 Auto：默认，原图尺寸
  • 线性布局
    • 排布主方向上的对齐方式 .justifyContent(枚举FlexAlign)
    • 交叉轴对齐方式 alignItems() 交叉轴在水平方HorizontalAlign 交叉轴在垂直方向VerticalAlign
  • 自适应伸缩
    • .layoutWeight(数字)
• 38-45
  • 弹性布局（Flex）
    • 1. 主轴方向：direction 2. 主轴对齐方式：justifyContent 3. 交叉轴对齐方式：alignItems 4. 布局换行：wrap 单行或者单列: 优先使用线性布局（基于Flex设计，做了性能优化）wrap 属性：换行 1. FlexWrap.NoWrap 单行布局 2. FlexWrap.Wrap 多行布局
    • 子主题
  • 绝对定位
  • 层叠布局 Stack 容器内的⼦元素的顺序为 Item1 -> Item2 -> Item3 zIndex 层级
    • Stack({ alignContent: Alignment.Center }) { Item1() Item2() Item3() }
  • Grid布局
    • .columnsTemplate('1fr 1fr 1fr') .rowsTemplate('1fr 1fr')
• 46-55
  • 字符串拼接 加号的作用：拼接
  • 模板字符串 模板字符串 `hello`
  • 类型转换（数字和字符串）
    • 字符串转数字 Number()：字符串 直接转数字，转换失败返回NaN（字符串中包含非数字） parseInt()：去掉小数部分 转数字，转换失败返回NaN parseFloat()：保留小数部分 转数字，转换失败返回NaN
    • 数字转字符串 toString()：数字直接转字符串 toFixed()：四舍五入转字符串，可设置保留几位小数
  • 交互 – 点击事件
    • Button('点我, 显示弹框') .onClick(() => { AlertDialog.show({ message: '你好-这是个弹框' }) })
  • 状态管理 @State
    • 子主普通变量：只能在初始化时渲染，后续将不会再刷新。 状态变量：需要装饰器装饰，改变会引起 UI 的渲染刷新 （必须设置 类型 和 初始值）注意：定义在 组件内 普通变量 或 状态变量，都需要 通过 this 访问
  • 运算符
  • 逻辑运算符 && || ！
• 56 -65
  • 数组的操作
    • 操作 语法 查找 数组名[下标]、数组名.length 修改 数组名[下标] = 新值 增加 数组名.push(数据1, 数据2, ...)、 数组名.unshift(数据1, 数据2, ...) 删除 数组名.pop()、数组名.shift() 任意位置增加或删除 数组名.splice(操作的起始位置, 删除的个数, 新增1, 新增2, ......)
  • 语句 语句概念 语句： 一段可以执行的代码，是一个行为 ( num = a + b ) 表达式： 可以 被求值 的代码，并将其计算出 一个结果 （1 + 1、3 * 5、3 > 2）
  • if 分支语句 if ( ) { }else if {} else{}
  • switch 分支 switch (表达式) { case 值1: 与值1匹配执行的语句 break case 值2: 与值2匹配执行的语句 break default: 以上都未成功匹配执行的代码 }
  • 三元条件表达式 res: number = num1 > num2 ? num1 : num2
  • 循环语句
    • while 语句 let i: number = 1 while (i < 5) { console.log('while~i', '重复执行的代码') i++ }
    • for 语句 for (let i: number = 1; i <= 8; i++) { if (i == 3) { console.log('这个包子好像坏了, 这个不吃了') continue } console.log(`正在吃第${i}个包子`) }
• 66-74
  • 对象数组
    • // 1. 定义接口 interface Person { stuId: number name: string gender: string age: number } // 2. 基于接口构建对象数组 let pArr: Person[] = [ { stuId: 1, name: '小丽', gender: '女', age: 12 }, { stuId: 2, name: '小王', gender: '男', age: 11 }, { stuId: 3, name: '大强', gender: '男', age: 13 }, { stuId: 4, name: '小张', gender: '男', age: 11 }, { stuId: 5, name: '小美', gender: '女', age: 12 }, ]
  • ForEach-渲染控制 语法: ForEach(arr, (item, index) => {})
    • @State titles:string[] = ['电子产品', '精品服饰', '母婴产品', '影音娱乐', '海外旅游'] build() { Column() { ForEach(this.titles, (item: string, index) => { Text(item) .fontSize('24') .fontWeight(700) .fontColor(Color.Orange) .width('100%') .padding(15) }) } }
  • 生肖抽奖卡
    • Badge 角标组件 Badge({ count: 1, // 角标数值 position: BadgePosition.RightTop, // 角标位置 style: { fontSize: 12, // 文字大小 badgeSize: 16, // 圆形大小 badgeColor: '#FA2A2D' // 圆形底色 } }) { Image($r('app.media.bg_01')) .width(80) }
    • Grid 布局
    • 取随机数 Math.random
    • 知识点总结： 1. Badge 角标组件 2. Grid布局、Stack布局 3. 数组对象动态渲染、动态更新 4. 遮罩层动画、图像动画效果 animation 5. 随机抽奖 Math.random，Math.floor 6. 假设成立法，判断是否中奖
• 75-84
  • Swiper 轮播组件
    • Swiper 的基本用法 Swiper() { // 1. 轮播内容 } // 2. 设置尺寸（内容会自动拉伸） .width('100%') .height(100)
    • Swiper 的常见属性 属性方法 传值 作用 默认值 loop boolean 是否开启循环 true autoPlay boolean 是否自动播放 false interval number 自动播放的时间间隔（ms） 3000 vertical boolean 纵向滑动轮播 false
    • Swiper 样式自定义 Swiper() { ... } .indicator( Indicator.dot() // 小圆点 .itemWidth(20) // 默认的宽 .itemHeight(20) // 默认的高 .color(Color.Black) // 默认的颜色 .selectedItemWidth(30) // 选中的宽 .selectedItemHeight(30) // 选中的高 .selectedColor(Color.White) // 选中的颜色 )
  • 样式&结构重用
    • @Extend：扩展组件（样式、事件）
      • @Extend(Text) function textExtend(color: ResourceColor, txt: string) { .textAlign(TextAlign.Center) .backgroundColor(color) .fontColor(Color.White) .fontSize(30) .onClick(() => { AlertDialog.show({ message: txt }) }) } Swiper() { Text('1') .textExtend(Color.Red, '轮播图1') Text('2') .textExtend(Color.Orange, '轮播图2') Text('3') .textExtend(Color.Grey, '轮播图3') }
    • @Styles: 抽取通用属性、事件
      • // 1. 全局定义 @Styles function commonStyles() { .width(100) .height(100) .onClick(()=>{ }) } @Component struct FancyDemo { // 2. 在组件内定义 @Styles setBg() { .backgroundColor(this.Color) } builder(){ Text() .commonStyles() .setBg() } }
    • @Builder：自定义构建函数（结构、样式、事件）
      • @Builder function navItem(icon: ResourceStr, text: string) { Column({ space: 10 }) { Image(icon) .width('80%'); Text(text); } .width('25%') .onClick(() => { AlertDialog.show({ message: '点了' + text }) })} Row() { navItem($r('app.media.ic_reuse_01'),'阿里拍卖') navItem($r('app.media.ic_reuse_02'),'菜鸟') } // 局部 builder 类似，只是定义在组件内，this.xxx()
    • 名称 适合 参数 @Extend 抽取 特定组件 样式、事件 可以传递参数 @Styles 抽取 公共样式、事件 不可以传递参数 @Builder 抽取 结构、样式、事件 可以传递参数
  • 滚动容器 Scroll
    • 用法说明：Scroll 的核心用法 1. Scroll 设置尺寸 2. 设置溢出的子组件（只支持一个子组件） 3. 滚动方向（支持横向和纵向，默认纵向）
      • 名称 参数类型 描述 scrollable ScrollDirection 设置滚动方向。 ScrollDirection.Vertical 纵向 ScrollDirection.Horizontal 横向
      • Scroll(){ // 只支持一个子组件 Column(){ // 内容放在内部 // 尺寸超过 Scroll 即可滚动 } } .width('100%') .height(200) .scrollable(ScrollDirection.xxx)
    • Scroll 的常见属性
      • 名称 参数类型 描述
        • scrollable
          • ScrollDirection
            • 设置滚动方向。 ScrollDirection.Vertical 纵向 ScrollDirection.Horizontal 横向
        • scrollBar
          • BarState
            • 设置滚动条状态。
        • scrollBarColor
          • string | number | Color
            • 设置滚动条的颜色。
        • scrollBarWidth
          • string | number
            • 设置滚动条的宽度
        • edgeEffect
          • value:EdgeEffect
            • 设置边缘滑动效果。 EdgeEffect.None 无 EdgeEffect.Spring 弹簧 EdgeEffect.Fade 阴影
    • Scroll 的控制器
      • 核心步骤： 1. 实例化 Scroller 的 控制器 2. 绑定给 Scroll 组件 3. 控制器的方法 控制滚动，控制器属性 获取滚动距离
        • struct ScrollDemo { scroller: Scroller = new Scroller() build() { Column() { Scroll(this.scroller) { ... } Row() { Button('返回顶部') .onClick(() => { this.scroller.scrollEdge(Edge.Top) }) Button('获取滚动距离') .onClick(() => { const x = this.scroller.currentOffset().xOffset const y = this.scroller.currentOffset().yOffset AlertDialog.show({ message:`x:${x},y:${y}` }) }) } } } }
    • 滚动容器 Scroll – Scroll 事件 Scroll(){ // 内容略 } .onScroll((x,y)=>{ // 滚动时 一直触发 // 可以结合 scroller的currentOffset方法 获取滚动距离 })
• 浮动主题