电子商务网站开发与应用的介绍,房地产网站怎么推广,电脑做h5比较好的网站,单页网站对攻击的好处[写在前面: 文章多处用到gif动图#xff0c;如未自动播放#xff0c;请点击图片]
1. 初识 ArkTS 语言 ArkTS 是 HarmonyOS 优选主力开发语言。ArkTS 是基于 TypeScript (TS) 扩展的一门语言#xff0c;继承了 TS 的所有特性#xff0c;是TS的超集。 主要是扩展了以下几个方…[写在前面: 文章多处用到gif动图如未自动播放请点击图片]
1. 初识 ArkTS 语言 ArkTS 是 HarmonyOS 优选主力开发语言。ArkTS 是基于 TypeScript (TS) 扩展的一门语言继承了 TS 的所有特性是TS的超集。 主要是扩展了以下几个方面 声明式UI描述和自定义组件 ArkTS使用声明式的方式描述用户界面UI布局更直观易懂。可以自定义组件 多维度的状态管理机制 ArkTS可以使用State、Prop 等装饰器以及 LocalStorage 等管理应用的状态。 主要表现在 支持在组件内使用与UI相关联的数据实现局部状态管理。支持在不同组件层级间传递数据包括父子组件和爷孙组件之间的传递。全局状态管理允许在应用的整个范围内传递数据也可以跨设备传递。提供只读的单向数据传递和可变更的双向数据传递。 渲染控制的能力 ArkTS提供了灵活的渲染控制功能使开发者能够根据应用的状态动态渲染UI内容。 主要表现在 条件渲染if-else允许根据不同的应用状态选择性地渲染UI内容。循环渲染支持从数据源中迭代获取数据并在每次迭代中创建相应的组件。数据懒加载允许按需迭代数据并在每次迭代中创建相应的组件提高应用性能。
2. 基本语法
2.1 ArkTS的基本组成
概念描述装饰器用于装饰类、结构、方法以及变量赋予其特殊含义。例如Component 表示自定义组件Entry 表示入口组件State 表示状态变量。状态变量的变化会触发UI刷新。UI描述使用声明式的方式描述UI的结构通常体现在 build() 方法中的代码块。自定义组件可复用的UI单元可组合其他组件。被 Component 装饰的 struct xxx 就是一个自定义组件。系统组件ArkUI框架中默认内置的基础和容器组件可以直接调用。 常见系统组件Column、Text、Divider、Button 。属性方法组件可以通过链式调用配置多项属性的方法。例如fontSize()、width()、height()、backgroundColor() 可以用于设置组件的样式和尺寸等属性。事件方法组件可以通过链式调用设置多个事件的响应逻辑。例如在 Button 后面的 onClick() 就是一个事件方法用于处理按钮被点击时的逻辑。
经典案例代码示例
// 1. 按引用传递参数时传递的参数可为状态变量且状态变量的改变会引起Builder方法内的UI刷新
Builder function MessageBuilder($$:{message:string}) { // 自定义装饰器Row(){Text(Message is ${$$.message})}
}// 2. 按值传递
Builder function ValueBuilder(message : string) {Row() {Text(message is ${message})}
}Entry // 装饰器
Component // 装饰器
struct Index { // 使用 struct 关键字定义组件State message: string hello // State表示组件中的状态变量状态变量变化会触发UI刷新State count: number 1build() {Row() { // 行Column() { // 列Text(this.message this.count).fontSize(50) // 属性方法.fontWeight(FontWeight.Bold)Button(点我试试).onClick(() {this.count this.message 你好}).fontColor(#000)MessageBuilder({message: this.message}) // 传递参数的引用ValueBuilder(this.message) // 按值传递无响应式}.width(100%)}.height(100%)}
}效果如下 2.2 声明式 UI
ArkTS采用声明方式组合和扩展组件来描述应用程序的UI同时提供了基本的属性、事件和子组件配置方法
1. 创建组件 无参数创建对于没有必选构造参数的组件可以直接在组件后面使用空括号例如 Divider()。 有参数创建如果组件包含构造参数可以在括号内配置相应参数例如 Text(你好)。 Column() {Text(item 1)Divider()Text(item 2)
}2. 配置属性 使用属性方法通过“.”链式调用配置系统组件的样式和其他属性建议每个属性方法单独写一行如设置字体大小、宽度、高度等。 Text(test).fontSize(12)3. 配置事件 通过事件方法以“.”链式调用配置系统组件支持的事件可使用lambda表达式、匿名函数表达式或组件的成员函数来定义 Button(Click me).onClick(() {this.myText ArkUI;})2.3 自定义组件
在ArkUI中UI显示的内容由组件构成其中框架直接提供的组件称为系统组件而开发者定义的组件则被称为自定义组件。
自定义组件具有以下特点 可组合 允许开发者组合使用系统组件及其属性和方法。 可重用 自定义组件可以被其他组件重用作为不同实例在不同的父组件或容器中使用。 数据驱动UI更新 通过状态变量的改变来驱动UI的刷新。
自定义组件的结构
概念描述struct基于 struct 实现自定义组件结构为 struct 自定义组件名 {...}。实例化时可以省略 new。Component装饰器仅能装饰使用 struct 关键字声明的数据结构。被装饰后的结构具备组件化能力需要实现 build 方法描述UI。一个 struct 只能被一个 Component 装饰。build() 函数用于定义自定义组件的声明式 UI 描述。自定义组件必须实现 build() 函数。Entry装饰的自定义组件将作为UI页面的入口。在单个UI页面中最多可以使用一个 Entry 装饰的自定义组件。可以接受一个可选的 LocalStorage 参数。
以下示例展示了自定义组件GreetingComponent的基本用法
Component
struct GreetingComponent {State greeting: string Hello, World!;build() {// GreetingComponent自定义组件组合系统组件Row和TextRow() {Text(this.greeting).onClick(() {// 状态变量greeting的改变驱动UI刷新this.greeting Hello, ArkUI!;});}}
}GreetingComponent 可以在其他自定义组件的 build() 函数中多次创建实现自定义组件的重用。
Entry
Component
struct ParentComponent {build() {Column() {Text(ArkUI Greetings);GreetingComponent({ greeting: Hello, World! });Divider();GreetingComponent({ greeting: 你好! });}}
}成员函数/变量
自定义组件除了必须要实现build()函数外还可以实现其他成员函数成员函数具有以下约束
不支持静态函数。成员函数的访问始终是私有的。
自定义组件可以包含成员变量成员变量具有以下约束
不支持静态成员变量。所有成员变量都是私有的变量的访问规则与成员函数的访问规则相同。自定义组件的成员变量本地初始化有些是可选的有些是必选的。具体是否需要本地初始化是否需要从父组件通过参数传递初始化子组件的成员变量请参考官方文档状态管理。
build()函数 Entry装饰的自定义组件必须要有且仅有一个 build() 函数且必须为容器组件其中ForEach禁止作为根节点他会产生多节点。 Component装饰的自定义组件其build()函数下的根节点唯一且必要可以为非容器组件其中ForEach禁止作为根节点。 代码示例
Entry
Component
struct MyComponent {build() {// 根节点唯一且必要必须为容器组件Row() {ChildComponent() }}
}Component
struct ChildComponent {build() {// 根节点唯一且必要可为非容器组件Image(test.jpg)}
}在 build() 函数内不允许以下几点:
build() { // 反例不允许声明本地变量 let a: number 1;// 反例不允许console.infoconsole.info(print debug log);// 反例不允许本地作用域{...}// 不允许switch语法如果需要使用条件判断请使用if。反例如下。switch (expression) {case 1:Text(...)break;case 2:Image(...)break;default:Text(...)break;}// 不允许使用表达式反例如下。(this.aVar 10) ? Text(...) : Image(...)}另外
不允许调用除了被Builder装饰以外的方法允许系统组件的参数是TS方法的返回值
Component
struct ParentComponent {doSomeCalculations() {}calcTextValue(): string {return Hello World;}Builder doSomeRender() {Text(Hello World)}build() {Column() {// 反例不能调用没有用Builder装饰的方法this.doSomeCalculations();// 正例可以调用this.doSomeRender();// 正例参数可以为调用TS方法的返回值Text(this.calcTextValue())}}
}2.4 自定义组件通用样式
自定义组件通过“.” 链式调用的形式设置通用样式。
Component
struct MyComponent2 {build() {Button(Hello World)}
}Entry
Component
struct MyComponent {build() {Row() {MyComponent2() // 为自定义组件添加通用样式.width(200).height(300).backgroundColor(Color.Red)}}
}2.5. 页面和自定义组件生命周期
可以由一个或者多个自定义组件组成Entry装饰的自定义组件为页面的入口组件即页面的根节点一个页面有且仅能有一个Entry。只有被Entry装饰的组件才可以调用页面的生命周期。
图示
图片来源https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V2/arkts-page-custom-components-lifecycle-0000001524296665-V2 生命周期接口描述onPageShow每次页面显示时触发。onPageHide每次页面隐藏时触发一次。onBackPress当用户点击返回按钮时触发。aboutToAppear组件即将出现时回调具体时机为在创建新实例后在执行 build() 函数之前执行。aboutToDisappear在自定义组件即将销毁时执行。
示例代码
// 包含两个自定义组件一个是被Entry装饰的MyComponent也是页面的入口组件即页面的根节点一个是Child是MyComponent的子组件。
// 只有Entry装饰的节点才可以生效页面的生命周期方法所以MyComponent中声明了当前Index页面的页面生命周期函数。MyComponent和其子组件Child也同时也声明了组件的生命周期函数。
import router from ohos.router;Entry
Component
struct MyComponent {State showChild: boolean true;// 只有被Entry装饰的组件才可以调用页面的生命周期onPageShow() {console.info(Index onPageShow);}// 只有被Entry装饰的组件才可以调用页面的生命周期onPageHide() {console.info(Index onPageHide);}// 只有被Entry装饰的组件才可以调用页面的生命周期onBackPress() {console.info(Index onBackPress);}// 组件生命周期aboutToAppear() {console.info(MyComponent aboutToAppear);}// 组件生命周期aboutToDisappear() {console.info(MyComponent aboutToDisappear);}build() {Column() {// this.showChild为true创建Child子组件执行Child aboutToAppearif (this.showChild) {Child()}// this.showChild为false删除Child子组件执行Child aboutToDisappearButton(create or delete Child).onClick(() {this.showChild false;})// push到Page2页面执行onPageHideButton(push to next page).onClick(() {router.pushUrl({ url: pages/Page2 });})}}
}
Component
struct Child {State title: string Hello World;// 组件生命周期-在自定义组件即将析构销毁时执行aboutToDisappear() {console.info([lifeCycle] Child aboutToDisappear)}// 组件生命周期-组件即将出现时回调aboutToAppear() {console.info([lifeCycle] Child aboutToAppear)}build() {Text(this.title).fontSize(50).onClick(() {this.title Hello ArkUI;})}
}2.6. Builder装饰器自定义构建函数
定义的语法
Builder MyBuilderFunction({ ... })使用方法
this.MyBuilderFunction({ ... })允许在自定义组件内定义一个或多个自定义构建函数该函数被认为是该组件的私有、特殊类型的成员函数。自定义构建函数可以在所属组件的build方法和其他自定义构建函数中调用但不允许在组件外调用。在自定义函数体中this指代当前所属组件组件的状态变量可以在自定义构建函数内访问。建议通过this访问自定义组件的状态变量而不是参数传递。
示例如下
Builder function GlobalBuilder() {Text(我是全局装饰器)
}Component
struct Children1 { // 子组件Builder DoNothing(){}BuilderParam aBuilder: () void this.DoNothing; // 定义局部的装饰器BuilderParam bBuilder: () void GlobalBuilder; // 定义全局的装饰器build(){Column() {GlobalBuilder()}}
}Component
struct Children2 {BuilderParam paramsBuilder: () void; // 声明装饰器build(){Column() {this.paramsBuilder()}}
}Component
Entry
struct Index {Builder componentBuilder() {Text(我是父组件的 builder)}build() {Column() {Children1()Children2({ paramsBuilder: this.componentBuilder}) // 传入一个 builder 给子组件}.width(100%)}
}尾随闭包初始化组件 在初始化自定义组件时紧跟一个大括号“{}”形成尾随闭包场景将尾随闭包内的内容看做Builder装饰的函数传给BuilderParam // 尾随闭包初始化组件
Component
struct CustomContainer {Prop header: string;BuilderParam closer: () void // 准备接受闭包参数build() {Column() {Text(this.header).fontSize(30)this.closer()}}
}Builder function specificParam(label1: string, label2: string) {Column() {Text(label1).fontSize(30)Text(label2).fontSize(30)}
}Entry
Component
struct Index {State text: string header;build() {Column() {// 在创建CustomContainer时通过其后紧跟一个大括号“{}”形成尾随闭包// 用内部的 this.text 作为参数CustomContainer({ header: this.text }) {Column() {specificParam(testA, testB)}.backgroundColor(Color.Yellow).onClick(() {this.text changeHeader;})}}}
}效果如下 2.7 Styles装饰器定义组件重用样式 如果每个组件的样式都需要单独设置在开发过程中会出现大量代码在进行重复样式设置虽然可以复制粘贴但为了代码简洁性和后续方便维护可以使用公共样式装饰器Styles。 使用方法
// 反例 Styles不支持参数
// Styles function globalFancy (value: number) {
// .width(value)
// }// Styles可以定义在组件内或全局在全局定义时需在方法名前面添加function关键字
// 组件内定义时则不需要添加function关键字。// 定义在组件内的Styles可以通过this访问组件的常量和状态变量
// 并可以在Styles里通过事件来改变状态变量的值// 组件内Styles的优先级高于全局Styles。Component
Entry
struct Index {State heightValue: number 100Styles fancy() {.height(this.heightValue).backgroundColor(Color.Yellow).onClick(() {this.heightValue 200})}build() {Column(){Row(){Text(自定义样式点我也能改变样式).fancy()}Divider()Row(){Text(点我也一样也会跟着改变样式).fancy()}}}
}2.8 Extend装饰器定义扩展组件样式
使用规则
和Styles不同Extend仅支持定义在全局不支持在组件内部定义。和Styles不同Extend支持封装指定的组件的私有属性和私有事件也可以预定义相同组件的Extend的方法
// 和Styles不同Extend仅支持定义在全局不支持在组件内部定义。
// 和Styles不同Extend支持封装指定的组件的私有属性和私有事件和预定义相同组件的Extend的方法。
// 和Styles不同Extend装饰的方法支持参数开发者可以在调用时传递参数调用遵循TS方法传值调用。
// Extend的参数可以为状态变量当状态变量改变时UI可以正常的被刷新渲染
Extend(Text) function fancy (fontSize: number) { // 只给 Text 继承了 fancy.fontColor(Color.Red).fontSize(fontSize)
}// Extend装饰的方法的参数可以为function作为Event事件的句柄。
Extend(Text) function makeMeClick(onClick: () void) {.backgroundColor(Color.Blue).onClick(onClick)
}Entry
Component
struct Index {State label: string Hello World;State fontSizeValue: number 58;onClickHandler() {this.label Hello ArkUI;this.fontSizeValue 108}build(){Column(){Row({space: 10}) {Text(测试).fancy(this.fontSizeValue) // 传入可响应数据后续函数执行字号也会发生变化// Span(span无效)// .fancy() // Property fancy does not exist on type SpanAttribute. tsCheck}Row({ space: 10 }) {Text(${this.label}).makeMeClick(this.onClickHandler.bind(this)) // bind 绑定当前作用域.fancy(109)}}}
}2.9 stateStyles多态样式
// 多态样式
// stateStyles是属性方法可以根据UI内部状态来设置样式类似于css伪类但语法不同。ArkUI提供以下四种状态
//
// 1. focused获焦态。
// 2. normal正常态。
// 3. pressed按压态。
// 4. disabled不可用态。// 基础场景
// 下面的示例展示了stateStyles最基本的使用场景。Button处于第一个组件默认获焦
// 生效focused指定的粉色样式。按压时显示为pressed态指定的黑色。
// 如果在Button前再放一个组件使其不处于获焦态就会生效normal态的黄色。// Styles也可和stateStyles联合使用
Entry
Component
struct Index {Styles normalStyle() {.backgroundColor(Color.Gray)}Styles pressedStyle() {.backgroundColor(Color.Red)}build() {Column() {Button(Click me).stateStyles({focused: {.backgroundColor(Color.Pink)},pressed: {.backgroundColor(Color.Black)},normal: {.backgroundColor(Color.Yellow)}})Column() {Text(Text1).fontSize(50).fontColor(Color.White).stateStyles({normal: this.normalStyle,pressed: this.pressedStyle,})}}.margin(30%)}
}衔接下一篇: 鸿蒙开发-ArkTS 语言-状态管理
