鸿蒙开发HarmonyOS NEXT (一) 入门

最近总听见大家讨论鸿蒙,前端转型的好方向?先入门学习下

++目前官方版本和文档持续更新中++

一、开发环境

提示:要占用的空间比较多,建议安装在剩余空间多的盘

1、下载:官网最新工具 - 下载中心 - 华为开发者联盟 (huawei.com)下载安装即可

2、安装node和sdk(补充:我下载的是2024/6/21发布的5.0.3版本,应该是默认配好了,无需步骤2)

安装好后,新建第一个程序试试看(跟微信开发者工具一样,会默认创建项目结构)

二、ArkTs入门

可参考官网案例初识ArkTS语言 | 华为开发者联盟 (huawei.com)

就是ts变化而来的,写了个小案例检验了一下,ts语法基本都是可用的

三、ArkUI组件

ArkUI(方舟UI框架)-应用框架 | 华为开发者联盟 (huawei.com)

随用随查,非常方便

写个小案例,【通过输入或者点击按钮改变图片大小】

javascript 复制代码
@Entry //装饰器-入口,可以直接作为页面显示
@Component //装饰器-组件
struct Index { //自定义组件
  @State normalWidth: number = 250; //变量-监控

  build() {// UI描述,内部声明式UI结构
    Row() {
      Column(){
        Image($r('app.media.head'))
          .width(this.normalWidth)
          .interpolation(ImageInterpolation.High)
        Flex({ direction: FlexDirection.Row }) {
          Text('调节大小:')
            .width(100)
            .textAlign(TextAlign.Start)
            .padding(10)
          TextInput({text:String(this.normalWidth)})
            .width(180)
            .type(InputType.Number)
            .onChange((value) => {
              this.normalWidth = parseInt(value)
            })
        }
        .height(70)
        .width('90%')
        .padding(10)
        Flex({ direction: FlexDirection.Row }) {
          Button('变大', { type: ButtonType.Normal, stateEffect: true })
            .borderRadius(4)
            .backgroundColor(0x317aff)
            .width(90)
            .height(40)
            .margin(10)
            .onClick(()=>{
              if(this.normalWidth < 300){
                this.normalWidth += 10
              }
            })
          Button('变小', { type: ButtonType.Normal, stateEffect: true })
            .borderRadius(4)
            .backgroundColor(0xF55A42)
            .width(90)
            .height(40)
            .margin(10)
            .onClick(()=>{
              if(this.normalWidth >= 100){
                this.normalWidth -= 10
              }
            })
        }
        .height(70)
        .width('90%')
        .padding(10)
        Slider({
          min:0,
          max:400,
          step:10,
          value:this.normalWidth,
          style:SliderStyle.OutSet,
          direction:Axis.Horizontal,
          reverse:false,
        }).width('90%')
          .blockColor('#36d')
          .showTips(true)
          .onChange(value=>{
            this.normalWidth = value
          })
      }.width('100%')
    }
    .height('100%')
    .width('100%')
  }
}
相关推荐
万少5 小时前
第五款 HarmonyOS 上架作品 奇趣故事匣 来了
前端·harmonyos·客户端
幽蓝计划6 小时前
HarmonyOS NEXT仓颉开发语言实战案例:电影App
华为·harmonyos
HMS Core8 小时前
HarmonyOS免密认证方案 助力应用登录安全升级
安全·华为·harmonyos
生如夏花℡8 小时前
HarmonyOS学习记录3
学习·ubuntu·harmonyos
伍哥的传说8 小时前
鸿蒙系统(HarmonyOS)应用开发之手势锁屏密码锁(PatternLock)
前端·华为·前端框架·harmonyos·鸿蒙
funnycoffee1239 小时前
Huawei 6730 Switch software upgrade example版本升级
java·前端·华为
制造数字化方案研究院9 小时前
59页|PPT|华为集成服务交付ISD业务变革总体方案:业务规则、流程、IT、组织及度量“四位一体”的管理体系
运维·华为
博睿谷IT99_9 小时前
华为物联网认证:开启万物互联的钥匙
物联网·华为·华为认证·职业规划
遇到困难睡大觉哈哈21 小时前
HarmonyOS 公共事件机制介绍以及多进程之间的通信实现(9000字详解)
华为·harmonyos
幽蓝计划1 天前
HarmonyOS NEXT仓颉开发语言实战案例:外卖App
开发语言·harmonyos