婚纱摄影网站设计思路,十堰微网站建设多少钱,wordpress怎么代码高亮,天津手机网站开发文章目录 一、编程语言介绍二、TypeScript基础类型1. 布尔值2. 数字3. 字符串4. 数组5. 元组6. 枚举7. unknown8. void9. null 和 undefined10. 联合类型 三、TypeScript基础知识条件语句if语句switch语句 函数定义有名函数和匿名函数可选参数剩余参数箭头函数 类1. 类的定义2.… 文章目录 一、编程语言介绍二、TypeScript基础类型1. 布尔值2. 数字3. 字符串4. 数组5. 元组6. 枚举7. unknown8. void9. null 和 undefined10. 联合类型 三、TypeScript基础知识条件语句if语句switch语句 函数定义有名函数和匿名函数可选参数剩余参数箭头函数 类1. 类的定义2. 继承 模块迭代器for..of 语句for..in 语句 四、ArkTS基础知识UI规范描述渲染控制状态管理组件生命周期函数 五、ArkTS实践1. 声明式UI基本概念2. 自定义组件的组成3. 配置属性与布局4. 改变组件状态5. 循环渲染列表数据 一、编程语言介绍
ArkTS是HarmonyOS主力应用开发语言。它在TypeScript简称TS的基础上匹配ArkUI框架扩展了声明式UI、状态管理等相应的能力让开发者以更简洁、更自然的方式开发跨端应用。
JavaScript是一种属于网络的高级脚本语言已经被广泛应用开发常用来为网页添加各式各样的动态功能为用户提供更流畅美观的浏览效果。TypeScript是JavaScript的一个超集它扩展了JavaScript的语法通过在JavaScript的基础上添加静态类型定义构建而成是一个开源的编程语言。ArkTS基于TypeScript语言扩展了声明式UI、状态管理、并发任务等能力。 二、TypeScript基础类型
1. 布尔值
let isDone: boolean false;2. 数字
TypeScript里的所有数字都是浮点数这些浮点数的类型是number。除了支持十进制还支持二进制、八进制、十六进制
let decLiteral: number 2023;
let binaryLiteral: number 0b11111100111;
let octalLiteral: number 0o3747;
let hexLiteral: number 0x7e7;
console.log(decLiteral is decLiteral)
// 结果都是20233. 字符串
let name: string Jacky;4. 数组
TypeSscript支持两种方式声明数组
let list1: number[] [1, 2, 3];
let list2: Arraynumber [1, 2, 3];5. 元组
let x: [string, number];
x [hello, 10]6. 枚举
enum Color {Red, Green, Blue};
let c: Color Color.Green;7. unknown
有时候我们会想要为那些在编程阶段还不清楚类型的变量指定一个类型。那么我们可以使用 unknown 类型来标记这些类型
let notSure: unknown 4;
notSure maybe a string instead;
notSure false;8. void
当一个函数没有返回值时通常会见到其返回值类型是void。
function test() void {
console.log(This is function is void);
}9. null 和 undefined
TypeScript里undefined 和 null 两者各自有自己的类型分别叫做 undefined 和 unll。
let u: undefined undefined;
let n: null null;10. 联合类型
联合类型Union Types表示取值可以为多种类型中的一种。
let myFavoriteNumber: string | number;;
myFavoriteNumber seven;
myFavoriteNumber 7;三、TypeScript基础知识
条件语句
if语句
let num: number 5;
if (num 0) {console.log(数字是正数)
}let num: number 12;
if (num % 2 0) {console.log(数字是偶数)
} else {console.log(数字是奇数)
}let num: number 5;
if (num 0) {console.log(num 是正数)
} else if (num 0) {console.log(num 是负数)
} else {console.log(num 是0)
}switch语句
var grade: string A;
switch(grade) {case A: {console.log(优);break;}case B: {console.log(良);break;}case C: {console.log(及格);break;}case D: {console.log(不及格);break;}default: {console.log(非法输入);break;}
}函数定义
有名函数和匿名函数
// 有名函数给变量设置为number类型
function add(x: number, y: number): number {return x y;
}// 匿名函数给变量设置为number类型
let myAdd function (x: number, y: number): number {return x y;
};可选参数
function buildName(firstName: string, lastName?: string) {if (lastName)return firstName lastName;elsereturn firstName;
}let result1 buildName(Bob);
let result2 buildName(Bob, Adams); 剩余参数
剩余参数会被当做个数不限的可选参数。 可以一个都没有同样也可以有任意个。 可以使用省略号 …进行定义
function getEmployeeName(firstName: string, ...restOfName: string[]) {return firstName restOfName.join( );
}let employeeName getEmployeeName(Joseph, Samuel, Lucas, MacKinzie);箭头函数
ES6版本的TypeScript提供了一个箭头函数它是定义匿名函数的简写语法用于函数表达式它省略了function关键字。箭头函数的定义如下其函数是一个语句块
( [param1, parma2,…param n] ) {// 代码块
}其中括号内是函数的入参可以有0到多个参数箭头后是函数的代码块。我们可以将这个箭头函数赋值给一个变量如下所示
let arrowFun ( [param1, parma2,…param n] ) {// 代码块
}如果要主动调用这个箭头函数可以按如下方法去调用
arrowFun(param1, parma2,…param n)类
1. 类的定义
TypeScript支持基于类的面向对象的编程方式定义类的关键字为class后面紧跟类名。类描述了所创 建的对象共同的属性和方法。 声明一个Person类这个类有3个成员一个是属性包含name和age)一个是构造函数一个是getPersonInfo方法其定义如下所示。
class Person {private name: stringprivate age: numberconstructor(name: string, age: number) {this.name name;this.age age;}public getPersonInfo(): string {return My name is ${this.name} and age is ${this.age};}
}let person1 new Person(Jacky, 18);
person1.getPersonInfo();2. 继承
继承就是子类继承父类的特征和行为使得子类具有父类相同的行为。TypeScript中允许使用继承来扩展现有的类对应的关键字为extends。
class Employee extends Person {private department: stringconstructor(name: string, age: number, department: string) {super(name, age);this.department department;}public getEmployeeInfo(): string {return this.getPersonInfo() and work in ${this.department};}
}let person2 new Employee(Tom, 28, HuaWei);
person2.getPersonInfo();
person2.getEmployeeInfo();模块
随着应用越来越大通常要将代码拆分成多个文件即所谓的模块module。模块可以相互加载并可以使用特殊的指令 export 和 import 来交换功能从另一个模块调用一个模块的函数。 两个模块之间的关系是通过在文件级别上使用 import 和 export 建立的。模块里面的变量、函数和类等在模块外部是不可见的除非明确地使用 export 导出它们。类似地我们必须通过 import 导入其他模块导出的变量、函数、类等。
导出
export class NewsData {title: string;content: string;imagesUrl: ArrayNewsFile;source: string;constructor(title: string, content: string, imagesUrl: ArrayNewsFile, source: string) {this.title title;this.content content;this.imagesUrl imagesUrl;this.source source;}
}导入
import { NewsData } from ../common/bean/NewsData;迭代器
当一个对象实现了Symbol.iterator属性时我们认为它是可迭代的。一些内置的类型如ArrayMapSetStringInt32ArrayUint32Array等都具有可迭代性。
for…of 语句
let someArray [1, string, false];for (let entry of someArray) {console.log(entry); // 1, string, false
}for…in 语句
let list [4, 5, 6];for (let i in list) {console.log(i); // 0, 1, 2,
}for (let i of list) {console.log(i); // 4, 5, 6
}四、ArkTS基础知识
UI规范描述
ArkUI开发框架 ArkTS声明式开发范式
基本组成说明如下 装饰器 用来装饰类、结构体、方法以及变量赋予其特殊的含义如上述示例中 Entry 、 Component 、 State 都是装饰器。具体而言 Component 表示这是个自定义组件 Entry 则表示这是个入口组件 State 表示组件中的状态变量此状态变化会引起 UI 变更。 自定义组件 可复用的 UI 单元可组合其它组件如上述被 Component 装饰的 struct Hello。 UI 描述 声明式的方式来描述 UI 的结构如上述 build() 方法内部的代码块。 内置组件 框架中默认内置的基础和布局组件可直接被开发者调用比如示例中的 Column、Text、Divider、Button。 事件方法 用于添加组件对事件的响应逻辑统一通过事件方法进行设置如跟随在Button后面的onClick()。 属性方法 用于组件属性的配置统一通过属性方法进行设置如fontSize()、width()、height()、color() 等可通过链式调用的方式设置多项属性。 从UI框架的需求角度ArkTS在TS的类型系统的基础上做了进一步的扩展定义了各种装饰器、自定义组件和UI描述机制再配合UI开发框架中的UI内置组件、事件方法、属性方法等共同构成了应用开发的主体。 在应用开发中除了UI的结构化描述之外还有一个重要的方面状态管理。如上述示例中用 State 装饰过的变量 myText 包含了一个基础的状态管理机制即 myText 的值的变化会自动触发相应的 UI 变更 Text组件。ArkUI 中进一步提供了多维度的状态管理机制。和 UI 相关联的数据不仅可以在组件内使用还可以在不同组件层级间传递比如父子组件之间爷孙组件之间也可以是全局范围内的传递还可以是跨设备传递。另外从数据的传递形式来看可分为只读的单向传递和可变更的双向传递。开发者可以灵活的利用这些能力来实现数据和 UI 的联动。
总体而言ArkUI开发框架通过扩展成熟语言、结合语法糖或者语言原生的元编程能力、以及UI组件、状态管理等方面设计了统一的UI开发范式结合原生语言能力共同完成应用开发。这些构成了当前ArkTS基于TS的主要扩展。
渲染控制
条件渲染使用if/else进行条件渲染。循环渲染开发框架提供循环渲染ForEach组件来迭代数组并为每个数组项创建相应的组件。
状态管理
组件状态管理装饰器用来管理组件中的状态它们分别是State、Prop、Link。
State装饰的变量是组件内部的状态数据当这些状态数据被修改时将会调用所在组件的build方法进行UI刷新。Prop与State有相同的语义但初始化方式不同。Prop装饰的变量必须使用其父组件提供的State变量进行初始化允许组件内部修改Prop变量但更改不会通知给父组件即Prop属于单向数据绑定。Link装饰的变量可以和父组件的State变量建立双向数据绑定需要注意的是Link变量不能在组件内部进行初始化。Builder装饰的方法用于定义组件的声明式UI描述在一个自定义组件内快速生成多个布局内容。 State、Prop、Link三者关系如图所示
组件生命周期函数
自定义组件的生命周期函数用于通知用户该自定义组件的生命周期这些回调函数是私有的在运行时由开发框架在特定的时间进行调用不能从应用程序中手动调用这些回调函数。 自定义组件生命周期的简化图示
五、ArkTS实践
1. 声明式UI基本概念
应用界面是由一个个页面组成ArkTS是由ArkUI框架提供用于以声明式开发范式开发界面的语言。
声明式UI构建页面的过程其实是组合组件的过程声明式UI的思想主要体现在两个方面
声明式描述描述UI的呈现结果而不关心过程状态驱动视图更新
类似苹果的SwiftUI中通过组合视图View安卓Jetpack Compose中通过组合Composable函数ArkUI作为HarmonyOS应用开发的UI开发框架其使用ArkTS语言构建自定义组件通过组合自定义组件完成页面的构建。
2. 自定义组件的组成
ArkTS通过struct声明组件名并通过Component和Entry装饰器来构成一个自定义组件。 使用Entry和Component装饰的自定义组件作为页面的入口会在页面加载时首先进行渲染。
Entry
Component
struct ToDoList {...}使用Component装饰的自定义组件如ToDoItem这个自定义组件则对应如下内容作为页面的组成部分。
Component
struct ToDoItem {...}在自定义组件内需要使用build方法来进行UI描述。
Entry
Componentstruct ToDoList...build() {...}
}build方法内可以容纳内置组件和其他自定义组件如Column和Text都是内置组件由ArkUI框架提供ToDoItem为自定义组件需要开发者使用ArkTS自行声明。
Entry
Component
struct ToDoList {...build() {Column(...) {Text(...)...ForEach(...{TodoItem(...)},...)}...}
}3. 配置属性与布局
自定义组件的组成使用基础组件和容器组件等内置组件进行组合。但有时内置组件的样式并不能满足我们的需求ArkTS提供了属性方法用于描述界面的样式。
常量传递 例如使用fontSize(50)来配置字体大小。
Text(Hello World).fontSize(50)变量传递 在组件内定义了相应的变量后例如组件内部成员变量size就可以使用this.size方式使用该变量。
Text(Hello World).fontSize(this.size)链式调用 在配置多个属性时ArkTS提供了链式调用的方式通过’.方式连续配置。
Text(Hello World)
.fontSize(this.size)
.width(100)
.height(100)表达式传递 属性中还可以传入普通表达式以及三目运算表达式。
Text(Hello World)
.fontSize(this.size)
.width(this.count 100)
.height(this.count % 2 0 ? 100 : 200)内置枚举类型 除此之外ArkTS中还提供了内置枚举类型如ColorFontWeight等例如设置fontColor改变字体颜色为红色并私有fontWeight为加粗。
Text(Hello World)
.fontSize(this.size)
.width(this.count 100)
.height(this.count % 2 0 ? 100 : 200)
.fontColor(Color.Red)
.fontWeight(FontWeight.Bold)对于有多种组件需要进行组合时容器组件则是描述了这些组件应该如何排列的结果。
ArkUI中的布局容器有很多种在不同的适用场合选择不同的布局容器实现ArkTS使用容器组件采用花括号语法内部放置UI描述。
这里介绍最基础的两个布局——列布局和行布局。 对于如下每一项的布局两个元素为横向排列选择Row布局 Row布局
Row() {Image($r(app.media.ic_default))...Text(this.content)...
}
...类似下图所示的布局整体都是从上往下纵向排列适用的布局方式是Column列布局。 Column布局
Column() {Text($r(app.string.page_title))...ForEach(this.totalTasks,(item) ]] {TodoItem({content:item})},...)
}4. 改变组件状态
实际开发中由于交互页面的内容可能需要产生变化以每一个ToDoItem为例其在完成时的状态与未完成时的展示效果是不一样的。
不同状态的视图
声明式UI的特点就是UI是随数据更改而自动刷新的我们这里定义了一个类型为boolean的变量isComplete其被State装饰后框架内建立了数据和视图之间的绑定其值的改变影响UI的显示。
State isComplete : boolean false;State装饰器的作用
用圆圈和对勾这样两个图片分别来表示该项是否完成这部分涉及到内容的切换需要使用条件渲染if / else语法来进行组件的显示与消失当判断条件为真时组件为已完成的状态反之则为未完成。
if (this.isComplete) {Image($r(app.media.ic_ok)).objectFit(ImageFit.Contain).width($r(app.float.checkbox_width)).height($r(app.float.checkbox_width)).margin($r(app.float.checkbox_margin))
} else {Image($r(app.media.ic_default)).objectFit(ImageFit.Contain).width($r(app.float.checkbox_width)).height($r(app.float.checkbox_width)).margin($r(app.float.checkbox_margin))
}由于两个Image的实现具有大量重复代码ArkTS提供了Builder装饰器来修饰一个函数快速生成布局内容从而可以避免重复的UI描述内容。这里使用Bulider声明了一个labelIcon的函数参数为url对应要传给Image的图片路径。
Builder labelIcon(url) {Image(url).objectFit(ImageFit.Contain).width($r(app.float.checkbox_width)).height($r(app.float.checkbox_width)).margin($r(app.float.checkbox_margin))
}使用时只需要使用this关键字访问Builder装饰的函数名即可快速创建布局。
if (this.isComplete) {this.labelIcon($r(app.media.ic_ok))
} else {this.labelIcon($r(app.media.ic_default))
}为了让待办项带给用户的体验更符合已完成的效果给内容的字体也增加了相应的样式变化这里使用了三目运算符来根据状态变化修改其透明度和文字样式如opacity是控制透明度decoration是文字是否有划线。通过isComplete的值来控制其变化。
Text(this.content)....opacity(this.isComplete ? CommonConstants.OPACITY_COMPLETED : CommonConstants.OPACITY_DEFAULT).decoration({ type: this.isComplete? TextDecorationType.LineThrough: TextDecorationType.None })最后为了实现与用户交互的效果在组件上添加了onClick点击事件当用户点击该待办项时数据isComplete的更改就能够触发UI的更新。
Componentstruct
ToDoItem {State isComplete : boolean false;Builder labelIcon(icon) {...}...build() {Row() {if (this.isComplete) {this.labelIcon($r(app.media.ic_ok))} else {this.labelIcon($r(app.media.ic_default))}...}....onClick(() {this.isComplete !this.isComplete;})}
}5. 循环渲染列表数据
刚刚只是完成了一个ToDoItem组件的开发当我们有多条待办数据需要显示在页面时就需要使用到ForEach循环渲染语法。
例如这里我们有五条待办数据需要展示在页面上。
total_Tasks: Arraylt;string]] [早起晨练,准备早餐,阅读名著,学习ArkTS,看剧放松]ForEach基本使用中只需要了解要渲染的数据以及要生成的UI内容两个部分例如这里要渲染的数组为以上的五条待办事项要渲染的内容是ToDoItem这个自定义组件也可以是其他内置组件。 ForEach基本使用
ToDoItem这个自定义组件中每一个ToDoItem要显示的文本参数content需要外部传入参数传递使用花括号的形式用content接受数组内的内容项item。 最终完成的代码及其效果如下。
Entry
Componentstruct
ToDoList {...build() {Row() {Column() {Text(...)...ForEach(this.totalTasks,(item) {TodoItem({content:item})},...)}.width(100%)}.height(100%)}
}ToDoList页面
