探索鸿蒙_ArkTs开发语言

ArkTs

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

但是使用ArkTs语言,就能全部实现了。
ArkTs是基于TypeScript的,但是呢,TypeScript是基于javascript的,所以ArkTs不但能完成js的工作,还能做的更好!!!!
ArkTs内部集成了ArkUi的组件,哪怕是一个小小的按钮。所以上去是有默认样式的。
ArkTs底层使用方舟编译器,统一字节码,运用AOT技术实现速度优化,虽然写的是ts,但是效率一样很快。

优点

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

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

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

Hello World

TypeScript 复制代码
@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,并给他赋值。

TypeScript 复制代码
@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样式
  }
}
相关推荐
Xiaok10187 分钟前
解决 Hugging Face SentenceTransformer 下载失败的完整指南:ProxyError、SSLError与手动下载方案
开发语言·神经网络·php
绿草在线9 分钟前
Mock.js虚拟接口
开发语言·javascript·ecmascript
go_bai20 分钟前
Linux环境基础开发工具——(2)vim
linux·开发语言·经验分享·笔记·vim·学习方法
小郝 小郝21 分钟前
【C语言】strstr查找字符串函数
c语言·开发语言
yinhezhanshen26 分钟前
理解rust里面的copy和clone
开发语言·后端·rust
Jtti42 分钟前
PHP在Debian环境上的并发处理能力如何
开发语言·debian·php
时光追逐者1 小时前
在 Blazor 中使用 Chart.js 快速创建数据可视化图表
开发语言·javascript·信息可视化·c#·.net·blazor
独好紫罗兰1 小时前
洛谷题单3-P5718 【深基4.例2】找最小值-python-流程图重构
开发语言·python·算法
小天努力学java1 小时前
【面试题】如何用两个线程轮流输出0-200的值
java·开发语言
云边有个稻草人1 小时前
【C++】第八节—string类(上)——详解+代码示例
开发语言·c++·迭代器·string类·语法糖auto和范围for·string类的常用接口·operator[]