OpenHarmony-基于ETS范式应用开发初体验 原创 精华

前言

最近刚接触基于openHarmong开源框架的应用开发，特别是基于JS/ETS开发范式。其中基于JS的应用开发，与vue语法和思想高度相似，数据模型仅仅是普通的 JavaScript 对象。而当你修改它们时，视图会进行更新。这使得状态管理非常简单直接式。可以类比学习。今天就ETS规范，写一个Loading的组件，熟悉ETS下的一些基础组件的应用和联动。

参考资料

OpenHarmony API
OpenHarmony / docs

UI开发模式

实现

1. 新建项目
   

语言选择eTS,API Version 选择8，不然部分组件不支持

2. 页面布局
   用到的容器组件有：Column，Row
   用到的其他组件有:Image, Text, Slider

Column(){ // 沿垂直方向布局的容器
  Row(){ // 沿水平方向布局容器。
    Text() //文本，用于呈现一段信息。
    Image()
  }
  Row(){
    Text()
    Image() //图片组件，用来渲染展示图片。
  }
  Row(){
    Text()
    Silder() //滑动条组件，用来快速调节设置值，如音量、亮度等。
  }
  Row(){
    Text()
    Silder()
  }
}

3. 根据Silder和Image的参数设置要求赋初始值
   

  @State inSetValue: number = 10
  @State outVerticalSetValue: number = 40
  @State inVerticalSetValue: number = 40

  @State private degree: number = 0
  @State private speed: number = 5
  @State private timer: number = 0
  @State private imageSize: number = 0

4. 设置关联
   将Slider进度值赋给Image rotate属性的坐标值，在页面加载的生命周期onPageShow中反复这一过程，最后记得把清楚定时器以免内存泄漏。

Image($r('app.media.load'))
   .rotate({x:0,y:0,z:1,angle:this.degree}).objectFit(ImageFit.Contain)
   .scale({x:this.imageSize,y:this.imageSize})

  speedChange(){
    this.timer = setInterval(() =>{
      this.degree += this.speed;
    },20)
  }
  onPageShow(){
    this.speedChange()
  }
  onPageHide(){
   this.timer = null;
  }

5.用@Builder()装饰器封装相同的功能，减少冗余代码

  //声明
  @Builder
  TextInfo(text: string){
    Column(){
      Text(text)
        .fontSize(29)
        .fontColor("#708090")
        .width('90%')
        .margin({top:20,left:25})
    }
}
  // 调用
   this.TextInfo('Change speed'）

总结

此例就基于ETS组件的基本使用和关联，以及装饰器@Builer的简单使用展开说明，旨在熟悉ETS规范和对组件的初体验

思考

如果业务比较复杂，可以根据实际的场景和数据的情况抽成更小粒度的组件，以便更方便的组合，提升效率。