鸿蒙

鸿蒙开发-TbaBar

December 8, 2024
鸿蒙 

class ToolBarItem {
  defaultIcon: string | Resource
  activeIcon: string | Resource
  label: string
}

@Entry
@Component
struct Index {
  @State
  activeIndex: number = 0
  toolBars: ToolBarItem[] = [
    { defaultIcon: $r('app.media.home'), activeIcon: $r('app.media.home_select'), label: '首页' },
    { defaultIcon: $r('app.media.project'), activeIcon: $r('app.media.project_select'), label: '项目' },
    { defaultIcon: $r('app.media.interview'), activeIcon: $r('app.media.interview_select'), label: '面经' },
    { defaultIcon: $r('app.media.mine'), activeIcon: $r('app.media.mine_select'), label: '我的' }
  ]

  @Builder
  TabBarBuilder(item: ToolBarItem, index: number) {
    Column() {
      Image(this.activeIndex === index ? item.activeIcon : item.defaultIcon)
        .width(24)
      Text(item.label)
        .fontSize(12)
        .margin({ top: 4 })
        .lineHeight(12)
        .fontColor(this.activeIndex === index ? '#000' : '#aaa')
    }
  }

  build() {
    Tabs({
      index: this.activeIndex
    }) {
      ForEach(this.toolBars, (item: ToolBarItem, index: number) => {
        TabContent() {
          Text(index.toString())
        }
        .tabBar(this.TabBarBuilder(item, index))
      })
    }
    .barPosition(BarPosition.End)
    .onChange(index => this.activeIndex = index)
  }
}

鸿蒙开发-入门

December 8, 2024
鸿蒙

参考 #

鸿蒙应用开发指南 官方开发说明

页面组件 # 


@Entry
@Component
struct Index {
  // 工程默认显示 `Index` 页面组件
  // build 是声明UI的位置
  build() {
    Text('页面组件')
  }
}

自定义组件


// 定义 `Footer` 组件
@Component
struct Footer {
  build() {
    Text('自定义组件')
  }
}

@Entry
@Component
struct Index {
  build() {
    Column(){
      // 使用 `Footer` 组件
      Footer()
    }
  }
}

导出使用

@Component
export default struct Footer {
  build() {
    Text('自定义组件')
  }
}

import Footer from './components/Footer.ets'

@Entry
@Component
struct Index {
  build() {
    Column(){
      // 使用 `Footer` 组件
      Footer()
    }
  }
}

系统组件 #

参考基础组件

...

鸿蒙开发-状态管理

December 8, 2024
鸿蒙

自定义构建函数 #

@Builder #

@Builder

  • 组件内
@Builder MyBuilderFunction() {}

this.MyBuilderFunction()
  • 全局
@Builder function MyGlobalBuilderFunction() {}

MyGlobalBuilderFunction()
  • 参数传递
@Builder MyBuilderFunction( title: string ) {}

this.MyBuilderFunction('Title')

反正就跟自定义控件差不多太多？ 使用支持传参使其更加灵活

MyBuilderFunction(params: { title: string }){}

@BuilderParam #

这个简单, 跟compose 差不多太多

@Component
struct PanelComp {
  title: string
  more: string
  @BuilderParam
  panelContent: () => void
  @BuilderParam
  panelFooter: () => void

  build() {
    Column() {
      Row() {
        Text(this.title)
          .layoutWeight(1)
          .fontWeight(600)
        Row() {
          Text(this.more)
            .fontSize(14)
            .fontColor('#666666')
          Image($r('app.media.ic_public_arrow_right'))
            .width(16)
            .fillColor('#666666')
        }
      }
      .padding(10)

      Row() {
        this.panelContent()
      }
      .height(100)
      Row() {
        this.panelFooter()
      }
      .height(50)
    }
    .borderRadius(12)
    .backgroundColor('#fff')
  }
}

@Entry
@Component
struct Index {
  @Builder
  ContentBuilderA() {
    Text('评价内容')
  }
  @Builder
  FooterBuilderA() {
    Text('评价底部')
  }

  build() {
    Column() {
      GridRow({ columns: 2, gutter: 15 }) {
        GridCol({ span: 2 }) {
          PanelComp({
            title: '评价（2000+）',
            more: '好评率98%',
            panelFooter: this.FooterBuilderA,
            panelContent: this.ContentBuilderA
          })
        }

        // GridCol() {
        //   PanelComp({ title: '推荐', more: '查看全部' }){
        //     Text('推荐内容')
        //   }
        // }
        //
        // GridCol() {
        //   PanelComp({ title: '体验', more: '4 条测评' }){
        //     Text('体验内容')
        //   }
        // }
      }
    }
    .height('100%')
    .padding(15)
    .backgroundColor('#f5f5f5')
  }
}

状态共享 #

父子单向 #

@Prop 装饰的变量可以和父组件建立单向的同步关系。可变，但是不会传回父组件

...

鸿蒙开发-网络请求

December 8, 2024
鸿蒙

鸿蒙 网络请求

module.json5中添加一下内容

"requestPermissions": [  
  {  
    "name": "ohos.permission.INTERNET",  
    "reason": "$string:EntryAbility_desc",  
    "usedScene": {  
      "abilities": ["EntryAbility"],  
      "when": "always"  
    }  
  }  
],

import http from '@ohos.net.http'

const req = http.createHttp()
req.request('https://zhoushugang.gitee.io/fe2022/takeaway.json')
  .then(res => {
    console.log('MEITUAN', res.result.toString().replace(/\n/g, '').substr(0, 250))  // === 3  注意：字符长度大于1024字节，控制台不可见。
    const data = JSON.parse(res.result as string)
    console.log('MEITUAN', data.length)
  })
  .catch(err => {
    console.error('MEITUAN', err.message)
  })