Harmony OS4开发入门

Arkts开发成本过高，期待uniapp尽快适配鸿蒙

举个例子：互联网公司不差钱的没问题忽略；中小公司本来1-2个人用uniapp就可以做的，为了单独做鸿蒙还需要再投入一个人或者不投入人就延长项目时间，这对中小公司成本过高。

iOS和Android的原生开发需要投入两个人，uniapp或flutter一个人就可以搞定3个端：iOS、Android、H5、微信小程序等

代码地址：

https://gitee.com/BruceLeeAdmin/harmonyos/tree/master

项目目录介绍

ArkTS介绍

简单案例：

@State times: number = 0
  /*
    数据类型：
      string
      number
      any: 不确定类型，可以是任意类型
  */
 
  @State msg: string = "hello"
  @State a: any = "hello"
 
  build() {
    Row() {
      Column() {
        Button(`点我${this.times}次`).backgroundColor("#360").onClick(() => {
          this.times++
        }).width('100%')
 
        Text(this.msg)
          .fontSize(50)
          .fontColor('#360')
          .fontFamily("华文行楷")
          .fontWeight(FontWeight.Bold)
          .onClick(() => {
            // 处理事件
            this.msg = '改变了'
          })
          Image($r('app.media.mate60')).width(250)
      }.width('100%')
    }
    .justifyContent(FlexAlign.Center)
    .height('100%')
  }

运行示例：

DevEco Studio查看文档

小案例布局一：实现简单布局

在代码中有详细的注释说明

小案例布局二：实现列表功能

封装自定义组件

使用方法

// 引用自定义组件
import {
  Header
} from '../components/Header'
 
使用这个组件
// 标题部分
Header({
  title: $r('app.string.product_list')
}).margin({bottom: 20})

自定义构建函数

// 全局自定义构建函数
@Builder function ItemCard(item: Item) {
  Row({ space: 10 }) {
    Image(item.image)
      .width(100)
    Column({ space: 4 }) {
      if (item.discount) {
        Text(item.name)
          .fontSize(16)
          .fontWeight(FontWeight.Bold)
        Text('原价 ￥ ' + item.price)
          .fontColor('#CCC')
          .fontSize(12)
          .decoration({ // 装饰
            type: TextDecorationType.LineThrough
          })
        Text('折扣价 ￥ ' + (item.price - item.discount))
          .fontColor('#F36')
          .fontSize(18)
        Text('补贴 ￥ ' + item.discount)
          .fontColor('#F36')
          .fontSize(18)
      } else {
        Text(item.name)
          .fontSize(16)
          .fontWeight(FontWeight.Bold)
        Text('￥ ' + item.price)
          .fontColor('#F36')
          .fontSize(14)
      }
 
    }
    .height('100%')
    .alignItems(HorizontalAlign.Start)
  }
  .width('100%')
  .backgroundColor('#FFF')
  .borderRadius(20)
  .height(120)
  .padding(10)
}

使用自定义构建函数

build() {
    Column({ space: 8 }) {
      // 标题部分
      Header({
        title: $r('app.string.product_list')
      }).margin({bottom: 20})
 
      List({ space: 8 }) {
        // 循环遍历商品列表
        ForEach(this.items, (item, Item) => {
          ListItem() {
 
            // 使用封装自定义构建函数
            ItemCard(item)
 
          }
        })
      }.width('100%').height(30).layoutWeight(1)
 
    }.width('100%').height('100%').backgroundColor('#EFEFEF').padding(20)
  }

小案例布局三：任务统计案例

小案例四：页面路由跳转

Dev Studio内置的API文档

应用配置文件