鸿蒙开发学习笔记——准备阶段

一、学习准备

1.所需网址

教程：我是跟着黑马程序员学的黑马程序员——鸿蒙开发

鸿蒙官网：HarmonyOS应用开发官网

图表库：鸿蒙图标库、阿里巴巴矢量图标库

2.软件安装

开发软件DevEco Studio官网下载链接：DevEco Studio

点击立即下载

选择相应的版本下载即可。安装过程简单，参见DevEco Studio使用指南。

第一次启动需要下载node.js、Ohpm、SDK，如果本机有可以选用本机的，不过要注意版本是否匹配。下图是检查环境是否完整：

完整后界面如下：

二、了解ArkTS

以往开发软件，使用网页技术需要三种语言：HTML控制页面元素、CSS控制布局和样式、JavaScript控制页面逻辑和数据状态，而鸿蒙开发只需ArkTS一种语言即可。

ArkTS基于TypeScript（在JavaScript基础上加强的一种语言），所以语法和TypeScript类似。

三、TypeScript基本语法

TypeScript学习教程：菜鸟教程——TypeScript

菜鸟教程TypeScript在线编辑器：菜鸟教程TypeScript在线编辑器

TypeScript学习官网：TypeScript

官网有个演练场可以直接在线运行：TypeScript演练场 

作者在使用菜鸟教程在线编辑器的时候感觉运行很慢，再用TypeScript官方演练场没有输出，后来发现可能是版本问题，改成v5.2.2就有log输出了。

有输出的中文版TypeScript演练场链接：v5.2.2 中文 TypeScript演练场

1.变量声明

TypeScript在JavaScript的基础上加入了静态类型检查功能，因此每一个变量都有固定的数据类型。

// 声明变量的关键字--let const(代表常量) var
// 变量名，自定义，这里命名为msg
// 变量的数据类型，此处为string
// string:字符串，单双引号都可
let hello : string = "Hello World!"

// number:数值，整数、浮点数都可以
let age: number = 21

// boolean:布尔
let finished: boolean = true

// any:不确定类型，可以是任意类型
let a: any = 'jack'
a = 21

// union:联合类型，可以是多个指定类型中的一种
let u: string|number|boolean = 'rose'
u = 18

// Object:对象
let p = {name:'Jack',age:21}
console.log(p.name)
console.log(p['name'])

// Array:数组，元素可以是任意其他类型
let names: Array<String> = ['Jack','Rose']
let ages: number[] = [21,18]
console.log(names[0])

2.条件控制

2.1 条件控制 if-else

// 定义数字
let num:number = 21

// 判断是否为偶数
// 三个等号直接判断是否相等，如果是两个等号，当数据类型不一样的时候还要转数据类型再比较，消耗计算资源
if(num % 2 === 0){
    console.log(num + '是偶数')
}else{
    console.log(num + '是奇数')
}

// 判断是否是正数
if(num > 0 ){
    console.log(num + '是正数')
}else if (num < 0){
    console.log(num + '是负数')
}else{
    console.log(num + '是0')
}

// 在TypeScript中，空字符串、数字0、null、undefined都被认为是false，其他值则为true
let data: any
if(data){
    console.log('数据存在:'+data)
}else{
    console.log('数据不存在！')
}

2.2 条件控制 switch

let grade: string = 'A'
switch(grade){
    case 'A':{
        console.log('优秀')
        break
    }
    case 'B':{
        console.log('合格')
        break
    }
    case 'C':{
        console.log('不合格')
        break
    }
    default:{
        console.log('非法输入')
        break
    }
}

3.循环迭代

// 普通for
for(let i = 1; i<=10;i++){
    console.log('点赞'+i+'次')
}

// while
let i = 1
while(i <= 10){
    console.log('点赞'+i+'次')
    i++;
}

// 同时也为一些内置类型如Array等提供了快捷迭代语法
// 定义数组
let names_array: string[] = ['Jack','Rose']

// for in 迭代器，遍历得到数组角标
for (const i in names_array){
    console.log(i + ':' + names_array[i])
}

// for of 迭代器，直接得到元素
for (const name of names_array){
    console.log(name)
}

4.函数

TypeScript通常利用function关键字声明函数，并且支持可选参数、默认参数、箭头参数等特殊语法。

// 无返回值函数，返回值void可以省略
function sayHello(name: string): void{
    console.log('hello, '+name)
}
sayHello('Jack')

// 有返回值函数
function sum(x: number, y: number): number {
    return x+y
}
let result = sum(21,18)
console.log('21+18='+result)

// 以上写法比较繁琐，TypeScript提供一种箭头写法
// 箭头函数
// function也是一种变量类型，这里默认是function可以不写
let sayHi = (name: string) => {
    console.log('Hi, '+name)
}
sayHi('Rose')

// 可选参数，在参数名后面加？，表示该参数是可选的
function sayBye(name?: string){
    // 判断name是否有值，无则给一个默认值，此处用到三元运算符
    name = name ? name : '陌生人'
    console.log('Bye, '+name)
}
sayBye('Tom')
sayBye()

// 参数默认值，在参数后面赋值，表示参数默认值
// 如果调用者没有传参，则使用默认值
function sayGoodBye(name: string = '陌生人'){
    console.log('BoodBye, '+name)
}
sayGoodBye('Jack')
sayGoodBye()

5.类和接口

TypeScript具备面向对象编程的基本语法，如interface、class、enum等。同时也具备封装、继承、多态等面向对象基本特征。这里和我当初学java面向对象很像，具体的小伙伴们自己去学吧。

// 定义枚举
// 内部不需要定义类型，如果不赋值，则依次为数字0，1，2...
enum Msg{
    HI = 'Hi',
    HELLO = 'Hello'
}

// 定义接口，抽象方法接受枚举类型
interface A{
    say(msg: Msg):void
}

// 实现接口
class B implements A{
    say(msg: Msg):void {
        console.log(msg+', I am B')
    }
}

// 初始化对象
let Aa: A = new B()
// 调用方法，传递枚举参数
Aa.say(Msg.HI)

// 定义矩形类
class Rectangle{
    // 成员变量
    private width: number
    private length: number
    // 构造函数 特殊的函数，没有function和函数名
    constructor(width: number,length: number){
        this.width = width
        this.length = length
    }
    // 成员方法 不需要function
    public area(): number{
        return this.width*this.length
    }
}

// 定义正方形
class Square extends Rectangle{
    constructor(side: number){
        // 调用父类的构造方法
        super(side,side)
    }
}

let s = new Square(10)
console.log('正方形面积为：'+s.area())

6.模块开发

应用复杂时，可把通用功能抽取到单独ts文件中，每个文件都是一个模块(module)。模块可以相互加载，提高代码复用性。

首先编写文件rectangle.ts如下：

// 定义矩形类，并通过export导出
export class Rectangle{
    // 成员变量
    public width:number
    public length:number
    // 构造函数
    constructor(width:number,length:number){
        this.width = width
        this.length = length
    }
}

// 定义工具方法，求矩形面积，并通过export导出
export function area(rec: Rectangle):number{
    return rec.width * rec.length
}

再新建一个文件rectangleuser.ts如下：

// 通过import语法导入，{}中写要导入的内容，from后面写文件地址 这里是相对路径
import { Rectangle,area } from "./rectangle";

// 创建Rectangle对象
let r = new Rectangle(10,20)

// 调用area方法
console.log('长方形面积为：'+area(r))

用终端输入以下命令即可得到结果：

四、快速入门

打开DevEco Studio软件，点击Create Project创建工程，然后选择工程模板，默认的时Empty Ability。

Project name（项目名称）:默认就好

Bundle name：一般格式为域名.项目名 要保证唯一性，是日后软件打包上架的唯一标识

创建好后，下面的这个文件就存放着helloworld代码，后缀.ets为ArkTS语言所写的文件后缀。

点击最右边侧边的Previewer可预览效果。

代码讲解：黑马程序员P5:04.快速入门从第七分钟开始讲，PPT做的很好可以去看原片。

具体步骤：1.定义结构体struct xxx{} 2.加装饰器 @Component等 3.build(){}

4.在build里粘贴一些页面样式 5.用容器组件对页面进行排列和布局