最近总听见大家讨论鸿蒙,前端转型的好方向?先入门学习下
++目前官方版本和文档持续更新中++
一、开发环境
提示:要占用的空间比较多,建议安装在剩余空间多的盘
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%')
}
}