03鸿蒙ArkTS应用开发及ArkTS语言学习

1、概述

主要说一个东西，模型，当我们在新建一个鸿蒙应用工程项目时，会要求你选择模型，如下图所示：

选择Model->Stage，能使用ArkTS开发语言。

选择Model->FA，能使用ArkTS和JS开发语言。

这两张图看出一个结论：在SDK为API9时，FA比Stage要多一种开发语言。

1.1、模型到底是什么？

应用模型是HarmonyOS为开发者提供的应用程序所需能力的抽象提炼，它提供了应用程序必备的组件和运行机制。

Stage和FA模型又是什么？

• FA（Feature Ability）模型： HarmonyOS API 7开始支持的模型，已经不再主推。FA模型开发可见FA模型开发概述。
• Stage模型： HarmonyOS API 9开始新增的模型，是目前主推且会长期演进的模型。在该模型中，由于提供了AbilityStage、WindowStage等类作为应用组件和Window窗口的“舞台”，因此称这种应用模型为Stage模型。

1.2、Stage和FA模型最大的区别到底是什么？

一句话，FA模型属于淘汰类型，现在最新的API都主要使用Stage模型。
由此，我们知道了如何选择模型。

1.3、ArkTs和JS开发语言该怎么选呢？

官方文档中说明如下：

提炼一下，构建一个比较大且复杂的应用，推荐使用ArkTS，也是做过移动应用开发人员的首选。

2、一张图认识ArkTS应用的工程目录

目前官方已知的就是这么多信息，未知的我们用到的时候再去认识它。

3、ArkTS开发语言

知道怎么选模型，知道选什么开发语言，知道了项目工程目录，接下来我们就是准备编写代码，但是编写代码前，还需要了解ArkTS的基本语法，这样以便于我们写出更复杂的应用。

3.1、ArkTS语言从哪里来？

ArkTS围绕应用开发在TypeScript（简称TS）生态基础上做了进一步扩展，继承了TS的所有特性，是TS的超集。因此，在学习ArkTS语言之前，建议开发者具备TS语言开发能力，这个不是一般的开发者都具备的能力，本着最小化学习原则。

TypeScript 又是基于 Javascript语言的基础之上进行的扩展，但它最终还是会被编译成原始的 JavaScript。

所以，从JavaScript->TypeScript ->ArkTs的过程可以看出，JS将成为应用开发语言的宇宙中心。

因为ArkTS已经做了很多基础的控件和插件，封装了无数的API供我们使用，基本上已经够用了，ArkTS和Flutter的写法有些类似，所以本着边学边实践的原则，我们还是先去了解一下TS这个语言，主要从声明变量、调用函数、条件语句、数组使用、列表循环、创建类、创建接口这几个方面去写一写案例。

TypeScript语法学习案例如下：

//字符串类型
let helloString : string = "Hello TypeScript!";
console.log(helloString);

//数字类型
let helloNumber:number=9;
console.log("Hello 十进制数字 "+ helloNumber);

//布尔类型
let helloBool:boolean=true;
console.log("Hello 布尔类型 "+ helloBool);

//数组
let helloArr:number[]=[1,2];
let helloArr2:Array<number>=[1,2];

let helloArr3:string[]=["hello","TypeScript"];

//元组类似位置数组
let kv:[number,String,boolean];
kv=[1,"Hello",true];
console.log(kv[2]);

//Map类型,在线工具运行失败了
//let myMap = new Map();
//myMap.set("Hello",1);
//myMap.set("TypeScript",2);
//myMap.set("!",3);

//for(let key of myMap.keys()){
	//console.log(key);
//}



//申明变量
var userName:string;
var userPsd:string;
userName="小明";
userPsd="123456";
console.log(userName+"的密码是："+userPsd);
//运算符

var number1:number=9527;
var number2:number=3;
console.log(number1+number2);

//条件语句
if(number1>number2){
	console.log(number1+"比"+number2+"大："+(number1-number2));
}else{
	console.log(number1+"比"+number2+"小："+(number2-number1));
}

//循环语句
let helloArr4:string[]=["hello","TypeScript"];
var i=0;
for(i=0;i<helloArr4.length;i++){
	console.log(helloArr4[i]);
}

//函数调用
function sum(x,y):number{
	return x+y;
}

console.log("求和："+sum(1,1));

//创建一个类 ,在线工具运行失败了
//class MyTs{
//	var str:string;
//	constructor(str:string){
//		this.str=str;
//	}	
	
//	show():void{
//		console.log("在新建的类中打印："+str);
//	}
//}

//var myTs=new MyTs("函数");
//myTs.show();

//接口,在线工具运行失败了
//interface IUser { 
//    userName:string
//    userPsd:string 
//    showResult():string 
//} 
//实现接口,在线工具运行失败了
//var user:IUser = { 
//    userName:string="小明"
//    userPsd:string="123456" 
//    showResult():string =>{
//		return userName +"/"+ userPsd
//	} 
//}

上面的案例看起来似曾相识，所以有了这些基础印象之后，我们就可以开始继续学习ArkTS语言了。

3.2、ArkTS基本语法

来看一个ArkTS组件页面的基本组成如下图所示：

• 装饰器：用于装饰类、结构、方法以及变量，并赋予其特殊的含义。如上述示例中@Entry、@Component和@State都是装饰器，@Component表示自定义组件，@Entry表示该自定义组件为入口组件，@State表示组件中的状态变量，状态变量变化会触发UI刷新。
• UI描述：以声明式的方式来描述UI的结构，例如build()方法中的代码块。
• 自定义组件：可复用的UI单元，可组合其他组件，如上述被@Component装饰的struct Hello。
• 系统组件：ArkUI框架中默认内置的基础和容器组件，可直接被开发者调用，比如示例中的Column、Text、Divider、Button。
• 属性方法：组件可以通过链式调用配置多项属性，如fontSize()、width()、height()、backgroundColor()等。
• 事件方法：组件可以通过链式调用设置多个事件的响应逻辑，如跟随在Button后面的onClick()。

有点类似于，构建了一个页面，在页面里面顺序堆控件，最后形成一个完整的界面，其中会涉及到状态更新刷新界面的问题，在Android中可使用Handler来更新UI，在ArkTS中可以通过状态管理和渲染控制来操作。

状态管理概述：如果希望构建一个动态的、有交互的界面，就需要引入“状态”的概念。
渲染控制概述：ArkUI通过自定义组件的build()函数和@builder装饰器中的声明式UI描述语句构建相应的UI。在声明式描述语句中开发者除了使用系统组件外，还可以使用渲染控制语句来辅助UI的构建，这些渲染控制语句包括控制组件是否显示的条件渲染语句，基于数组数据快速生成组件的循环渲染语句以及针对大数据量场景的数据懒加载语句。

渲染控制、状态管理这些东西还是有点复杂的，因为涉及到抽象的东西，不容易通过文字就能理解，我们先理解大致的概念，然后再通过实践去深入认识它们。

4、开发一个登录界面

基于API9进行开发，创建一个Login页面，并跳转到首页。
在pages目录下创建一个Login.ets文件。

import prompt from '@ohos.promptAction'
import router from '@ohos.router'

@Entry
@Component
struct Login {
  userNameText: string = ""
  userPsdText: string = ""

  build() {
    Row() {
      Column() {

        TextInput({ placeholder: "请输入账号" })
          .type(InputType.Normal)
          .width('100%')
          .fontSize(16)
          .maxLength(20)
          .height(45)
          .onChange(text => {
            this.userNameText = text
          })

        TextInput({ placeholder: "请输入密码" })
          .type(InputType.Password)
          .width('100%')
          .fontSize(16)
          .maxLength(20)
          .height(45)
          .margin({ top: 16 })
          .onSubmit((enterKey) => {

            if (enterKey == EnterKeyType.Go) {
              prompt.showToast({ message: "点击GO", duration: 2000 })
              //跳转到登录
            } else if (enterKey == EnterKeyType.Done) {
              prompt.showToast({ message: "点击DONE", duration: 2000 })
            }

          })
          .onChange(text => {
            this.userPsdText = text
          })

        Button("登录", { stateEffect: true })
          .width('100%')
          .margin({ top: 32, left: 16, right: 16 })
          .padding({ left: 16, right: 16, top: 10, bottom: 10 })
          .onClick(() => {
            if (this.userNameText.trim() == "") {
              prompt.showToast({ message: "请输入账号", duration: 2000 })
              return
            }
            if (this.userPsdText.trim() == "") {
              prompt.showToast({ message: "请输入密码", duration: 2000 })
              return
            }
            
            prompt.showToast({ message: "登录成功，跳转到首页", duration: 2000 })
            router.pushUrl({
              url: 'pages/Index'
            })
          })
      }.height('100%').width('100%').padding({ left: 16, right: 16 }).justifyContent(FlexAlign.Center)
    }
  }
}

显示结果如下：

运行之前还需要修改一下这两个地方，不然可能运行失败，如下图所示：

到此就构建了一个登录界面。

5、总结

• 写法和Flutter真的太像了，所以，有Flutter的基础写起来更容易一些；
• Let和var两个关键字貌似不需要用到也可以；
• 链式调用格式化，看起来不是很完美，不晓得能否调整。

未知的一切，还在探索中。

6、参考文档

鸿蒙开发文档：https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V2/start-overview-0000001478061421-V2

原创不易，求个关注。

微信公众号：一粒尘埃的漫旅
里面有很多想对大家说的话，就像和朋友聊聊天。
写代码，做设计，聊生活，聊工作，聊职场。
我见到的世界是什么样子的？
搜索关注我吧。

公众号与博客的内容不同。