HarmonyOs开发

UI开发的两种范式：ArkTS、JS对比

ArkUI为开发者提供了两种范式：基于TypeScript声明式范式ArkTS、兼容JS的类Web开发范式JS

我们在新建项目时可以选择除了ArkTs之外的JS进行编写
代码对比后续我会做更新

进行真机调试以及模拟器调试不热更新

特别注意：使用模拟器是不支持热更新的，如果在开发阶段建议使用第二种的Previewer/预览器


选择入口文件点击预览

做一个自定义tab

主入口代码：

import { TabComponent } from '../components/tabs';
import { zdyDetail } from './zdyDetail';
import { zdyDetail2 } from './zdyDetail2';

// @Styles function globalFancy  () {//全局样式
//   .width(150)
//   .height(100)
//   .backgroundColor(Color.Pink)
// }

@Entry
@Component
struct Index {
  @State heightValue: number = 100 //需要变化的属性值
  @State pageIndex : number = 0 //默认页面下标为0


  // 定义在组件内的@Styles封装的样式
  // @Styles fancy() {
  //   .width(200)
  //   .height(this.heightValue)
  //   .backgroundColor(Color.Yellow)
  //   .onClick(() => {
  //     this.heightValue = 200
  //   })
  // }


  @State message: string = 'Hello World'
  @State data: Object = {}
  @State tabs: Array<object> = []
  build() {
    Column() {
      TabComponent({tabData : $tabs , zdyTabIndex : $pageIndex})
      if(this.pageIndex==0){
        zdyDetail()
      }else if(this.pageIndex==1){
        zdyDetail2()
      }
    }
  }

  aboutToAppear(){
    this.tabs = [{
      name : '导航1',
      id : 0
    },{
      name : '导航2',
      id : 1
    },{
      name : '导航3',
      id :2
    }]

  }
}

tab组件：

//自定义tab
@Component //自定义组件
export struct TabComponent {
  @State message: string = 'Hello World'
  @Link tabData: Array<object>
  @Link zdyTabIndex: number



  @State bgColorValue: number = Color.Pink //需要变化的属性值

  // @Styles bgColor() {
  //   .backgroundColor(item ? Color.Blue : Color.Pink)
  //   // .onClick(() => {
  //   //   this.bgColorValue = Color.Blue
  //   // })
  // }

  build() {
    Column() {
      Row(){
        ForEach(this.tabData , (item,index)=>{
          Column() {
            Text(item.name)
              .textAlign(TextAlign.Center)
              .lineHeight(40)
                // .borderWidth(1)
              .fontSize('18fp')
          }
          .layoutWeight(3)
          .backgroundColor(Color.Pink)
          .height(50)
          .backgroundColor(index == this.zdyTabIndex ? Color.Blue : Color.Pink)
          .onClick(() => {
            this.zdyTabIndex = index;
          })
          // .width()
        })
      }
      .width('100%')
      .justifyContent(FlexAlign.SpaceBetween)



    }
  }


}

子组件页面

@Component

export struct zdyDetail2 {
  build(){
    Text("detail2")
      .lineHeight(100)
      .fontSize(30)
  }
}

@Component

export struct zdyDetail {
  build(){
    Text("detail")
      .lineHeight(100)
      .fontSize(30)
  }
}

效果如图：


感受：目前对ArkTS的用法还不熟悉，对于一些属性上的运用有些吃力