探索鸿蒙_ArkTs开发语言

ArkTs

在正常的网页开发中，实现一个效果，需要html+css+js三种语言实现。

但是使用ArkTs语言，就能全部实现了。

ArkTs是基于TypeScript的，但是呢，TypeScript是基于javascript的，所以ArkTs不但能完成js的工作，还能做的更好！！！！

ArkTs内部集成了ArkUi的组件，哪怕是一个小小的按钮。所以上去是有默认样式的。

ArkTs底层使用方舟编译器，统一字节码，运用AOT技术实现速度优化，虽然写的是ts，但是效率一样很快。

优点

1.开发效率高、开发体验好(语言三合一，代码量变少了)

2. 性能优越(方舟编译器、AOT技术、UI后端引擎、高效渲染引擎等技术)

3.多系统适配能力、接入能力(平台适配层、平台桥接层)

Hello World

@Entry// 装饰器 @entry 入口型组件@Component // 装饰器 @component 标记自定义组件struct Index { //自定义组件复用性@State message: string = 'Hello World'build() { // UI描述 内部以声明式方式描述UI结构Row() { //内部的都是ArkUi提供的组件行式布局Column() { //列式布局Text(this.message) // 文本组件.fontSize(50)// 样式组件.fontWeight(FontWeight.Bold) // 样式组件.onClick(()=>{// 事件方法})}.width('100%') // 属性方法 设置组件的UI样式}.height('100%')// 属性方法 设置组件的UI样式}}

@entry @Component @state 都是装饰器 分别代表 入口型组件、自定义组件、以及类型的定义

build为UI描述 内部以声明式方式描述UI组件 内部存在布局组件、样式组件、以及相关的时间方法或者属性方法。 可以分别进行各种布局、事件的处理以及样式的设置。

实例

我们使用fontcolor定义颜色为灰色。并且给文本设置一个点击事件，推荐使用箭头函数，函数更加简洁。使用this属性指向message，并给他赋值。

@Entry// 装饰器 @entry 入口型组件@Component // 装饰器 @component 标记自定义组件struct Index { //自定义组件复用性@State message: string = 'Hello World'build() { // UI描述 内部以声明式方式描述UI结构Row() { //内部的都是ArkUi提供的组件行式布局Column() { //列式布局Text(this.message) // 文本组件.fontSize(50)// 样式组件.fontWeight(FontWeight.Bold) // 样式组件.fontColor('#ccc') //设置一个颜色.onClick(()=>{// 事件方法// 对message的值做修改this.message = '探索ArkTs'})}.width('100%') // 属性方法 设置组件的UI样式}.height('100%')// 属性方法 设置组件的UI样式}}