初识HarmonyOS，ArkTs+ArkUI基础+登录界面实战

ArkTs基础语法

常用变量类型及其使用

1.string（字符串）

通过let关键字创建变量存储字符串类型数据

格式：let 变量名：类型 =值

（注意命名规则：类似Java，ArkTs变量名只能包含数字，字母，下划线，$，且不能以数字开头，不能使用关键字作为变量名）

如创建变量apple来存储数据“苹果”

let apple: string ='苹果'

2.number（数值）

与string类似

格式：let 变量名：类型 =值

如创建变量one来存储数据1

let one: number = 1

3.boolean（布尔）

与前两个类似

如创建变量correct来存储数据true

let correct: boolean = true

4.联合类型

使用联合类型可以增加代码的灵活性，可以根据具体的情况选择使用不同的类型。通常情况下number类型的变量只能存储number类型的值，string类型的变量只能存储string类型的值，使用联合类型就能使变量存储多种不同类型的值。

如这里定义了一个MyUnion类型，它是string和number的联合类型，表示变量可以是字符串或数字。

let MyUnion: string | number =1

MyUnion='数字一'

常量

与变量类似，使用const创建

如创建常量PI=3.14

const PI：number=3.14

数组

格式：let 数组名： 类型[] = [数据1，数据2......]

如创建字符串数组存储数据“小明”，“小红”

let array: string[]=['小明','小红']

函数与箭头函数

定义（没有参数可不写）：

function 函数名(形参: 类型){

函数体

}

调用：

函数名(实参)

如定义一个函数实现简单的加法功能(1+2)

function add(digit1: number,digit2: number){
return digit1+digit2
}

let result: number=add(1,2)

箭头函数是函数的简写版本

格式：let 函数名= (形参)=>{

函数体

}

如通过箭头函数改写以上代码

let add = (digit1: number,digit2: number)=>{

return digit1+digit2
}

let result: number=add(1,2)

接口与对象

接口定义格式：

interface 接口名{

属性1：类型

属性2：类型

......

方法1：(参数：类型)=>返回值类型

方法2：(参数：类型)=>返回值类型

// 无返回值写void不可不写

......

}

对象创建格式：

let 对象名：接口名={

属性和方法

}

// 接口有的方法和属性对象中都必须要有，有点类似Java的接口和实现类，但不过创建出来的是对象

通过对象名.方法名 来调用对象的方法

如创建一个对象小琳来调用她的属性和方法

interface Ling {

sex: string
birth: string

draw: ()=>void
}

let xl: Ling {

sex: '女'
bieth: '9月28'
draw: ()=>{

console.log('小琳说'，'我画画很好看')

}

}

xl.draw()//调用对象方法

枚举

枚举是一种特殊的数据类型，约定变量只能在一组数据范围内选择值

枚举定义

enum枚举名{

常量1=数值，

常量2=数值，

......

}

如定义一组颜色，使用枚举类型约束变量只能在一组颜色里选择

enum SelectColor{
Red='#ffof29',
Green='#30b30e'

}

let color1: SelectColor=SelectColor.Red
let color2: SelectColor=SelectColor.Green

ArkUI基础容器和组件

基础容器

build(){

}

用于页面内容展示，需要展示的部分都要写在里面

Column(){

}

内容纵向排布

Row(){

}

内容横向排布

Row和Column可以通过传入space对象来设置内容间隙（间隙相等）

如Column({ space: 10}) 设置内容纵向间隙为10

.magin()设置外边距

.padding()设置内边距

默认上下左右边距相等，可通过传入对象来设置每个边距大小

如

magin({

top: 10,

bottom:15,

left: 20,

right: 25

})

padding同理

基础组件

Test() 展示文字

Image($r('地址')) 本地图片展示

Image('地址')  网络图片展示

TestInput() 文本输入框

TestInput() 可以通过传入placeholde对象来设置输入提示

如下

TestInput({placeholder: '输入提示'}) 文本输入框

也可以通过.type()来设置输入类型

如设置密码输入框

TestInput({placeholder: '输入密码'}).type(InputType.Password)

Button('按钮名称') 按钮

登入界面实战

有了以上知识我们就写一个简单的登录界面了

如下

 源码

@Entry
@Component
struct Index {
  @State message: string = 'Hello Harmony';

  build() {
   Column({space: 10}){
     Image($r('app.media.1'))
       .width(100)
       .margin({
         top: 10,
         bottom: 5

       })
     Text('Monvine')
       .fontSize(20)
       .fontWeight(FontWeight.Regular)
       .margin({
         bottom:20
       })
     TextInput({ placeholder: 'username'})
     TextInput({ placeholder: 'password'}).type(InputType.Password)
     Button('Login')
       .width('100%')
       .margin({
         top: 15,
         bottom: 15

       })
     Row({space: 10}){
       Text('注册账号')
         .fontColor(Color.Green)
       Text('忘记密码')
         .fontColor(Color.Red)
     }

   }
   .padding(30)
  }
}