鸿蒙开发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)

随用随查，非常方便

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

@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%')}
}