ArkTS鸿蒙页面（ArkUI-X Empty Ability）

标签：ArkTS console Ability Text age log ArkUI string name

1.基础

1.1.存储变量，常量

let title: string = '巨无霸汉堡'

console.log('字符串title', title)

// 1.2 数字 number 类型
let age: number = 18
console.log('年纪age', age)

// 1.3 布尔 boolean 类型(true真，false假)
let isLogin: boolean = false
console.log('是否登录成功', isLogin)

// 2. 变量的修改
age = 40
console.log('年纪age', age)

// 常量
const PI: number = 3.14
const companyName: string = '华为'
console.log('公司名：', companyName)
console.log('PI:', PI)

1.2数组

let names: string[] = ['刘亦菲', '杨颖', '杨幂', '刘诗诗', '伍佰']
console.log('数组names', names)

// 利用有序的编号(索引) 取数组的数据
// 取数据：数组名[索引]
console.log('取到了', names[3])

1.3 函数

function star() {
  console.log('五角星', '☆')
  console.log('五角星', '☆☆')
  console.log('五角星', '☆☆☆')
  console.log('五角星', '☆☆☆☆')
  console.log('五角星', '☆☆☆☆☆')
}
// 2. 调用函数（使用函数）
//    函数名()
star()
star()
star()

结果：

1.4 对象

// 1. 定义接口
interface Person {
  name: string
  age: number
  weight: number
}

// 2. 基于接口，定义对象
let ym: Person = {
  name: '大幂幂',
  age: 18,
  weight: 90
}

// 3. 获取对象属性值  对象名.属性名
console.log('体重:', ym.weight)
console.log('年纪:', ym.age)
console.log('姓名:', ym.name)

// 基于接口，可以多次定义对象，这些对象有着相同的结构类型
let lss: Person = {
  name: '刘诗诗',
  age: 19,
  weight: 88
}
console.log('姓名', lss.name)

结果：

1.5 联合类型

联合类型可以给变量两个数据类型

// 需求：定义一个变量，存放【年终考试评价】
// 考试评价：可能是具体的分数，也可能是A、B、C、D等级
let judge: number | string = 100
judge = 'A+'
judge = '优秀'
judge = '不错，继续努力'
console.log('年终考试评价', judge)

// 联合类型还可以将变量值，约定在一组数据范围内进行选择
// 性别：男 女 保密
let gender: 'man' | 'woman' | 'secret' = 'secret'

1.6 枚举类型

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

// 需求：利用枚举类型，给变量设置主色
// 取色范围：
// 红色 '#ff0f29'
// 橙色 '#ff7100'
// 绿色 '#30b30e'

// 1. 定义枚举 （定义常量列表）
enum ThemeColor {
  Red = '#ff0f29',
  Orange = '#ff7100',
  Green = '#30b30e'
}

// 2. 给变量设定枚举类型
let color: ThemeColor = ThemeColor.Orange
console.log('color', color)

2.组件 

布局思路:先排版，再放内容。

2.1 基础组件:界面呈现的基础元素

文本

Text("文本内容")

输入框

TextInput()

 图片

      // 本地图片
      Image($r('app.media.huawei'))
      // 网络图片引用方式
          Image("https://img10.360buyimg.com/img/jfs/t1/156236/11/48260/23911/670bdb7eF9b3253b1/d5c6cd770a7328ad.png")

设置svg图片颜色 

            // 如果图片是svg格式,fillColor可以设置图片颜色
            .fillColor(Color.White)

按钮

Button('按钮登录')

段落

Span('小段文本')

 占位与空白

Blank()

2.2 容器组件:控制布局排布

行

Row(){}

列 

Column(){}

layoutWeight 

空间分配定义了组件在可用空间中的占比。设置为layoutWeight(1) 意味着该组件将在其他具有相同或不同 值的组件中分配可用空间。组件的总权重决定了它们在父容器中如何分配额外的空间

相对大小如果有多个组件设置了不同的 值，它们将根据这些值的比例来分配空间。如果有两个组件，分别设置layoutWeight(1) 和layoutWeight(2) ，那么后者将占据前者的两倍空间

        Text('文本文本文本文本文本')
          .layoutWeight(1)
          .fontColor('#666')

3.组件的属性和方法

美化组件外观效果

字体

      Text("文本内容")
        // 字体颜色
        .fontColor(Color.Gray)
          // 字体大小
        .fontSize(30)
          // 字体粗细
        .fontWeight(FontWeight.Bold)
        // 文本最大行数
        .maxLines(1)
        // 定制超出显示方式
        .textOverflow({
          // 超出已制定行数时让超出文本显示为。。。
          overflow:TextOverflow.Ellipsis
          // 超出已制定行数时让文本轮播显示
          // overflow:TextOverflow.MARQUEE
        })
        // 行高
        .lineHeight(20)

 背景图片

        // 设置背景图片
        .backgroundImage($r('app.media.jd_bg'))
        // 设置背景居中
        .backgroundImagePosition(Alignment.Center)
        // 背景图片尺寸自动适应
        .backgroundImageSize(ImageSize.Cover)

背景图片定位

        // 通过xy轴定位背景图片位置
        .backgroundImagePosition({
          x:vp2px(40),
          y:vp2px(20)
        })

圆角样式

        // 设置4个角
        .borderRadius(30)
        // 单独设置左上角和右下角
        .borderRadius({
          topLeft: 30,
          bottomRight: 30
        })

边框

        .border({
          // 粗度
          width: { left: 1, right: 2 },
          // 颜色
          color: { left: Color.Red, right: Color.Gray },
          // 样式
          style: { left: BorderStyle.Solid, right: BorderStyle.Dotted }
        })

结果：

弹性盒

justifyContent

对其子元素生效

    // 均匀分布，间隔相等，与边界距离也一致
    // .justifyContent(FlexAlign.SpaceEvenly)
    // 均匀分布，但在两端没有距离
    // .justifyContent(FlexAlign.SpaceBetween)
    // 均匀分布，与边界距离只有元素间距离的一半
    // .justifyContent(FlexAlign.SpaceAround)
    // 集中对齐
    // .justifyContent(FlexAlign.Center)
    // 末尾对齐
    // .justifyContent(FlexAlign.End)
    // 起始位置对齐
    // .justifyContent(FlexAlign.Start)

alignItems

    // 将子元素置顶
    // .alignItems(VerticalAlign.Top)
    // 将子元素居中
    // .alignItems(VerticalAlign.Center)
    // 将子元素置底
    // .alignItems(VerticalAlign.Bottom)

    // 起始位置
    // .alignItems(HorizontalAlign.Start)
    // 居中位置
    // .alignItems(HorizontalAlign.Center)
    // 最后位置
    // .alignItems(HorizontalAlign.End)

重叠视图

可以将多个组件重叠显示

常用于将多个子组件重叠放置在一起。它允许你在同一位置放置多个视图

Stack(){}

 小括号中参数设置的是子元素的排列方式

• 对齐选项

• TopStart： 顶部左对齐
• TopCenter： 顶部居中
• TopEnd： 顶部右对齐
• CenterStart： 垂直中心左对齐
• Center： 垂直和水平居中
• CenterEnd： 垂直中心右对齐
• BottomStart： 底部左对齐
• BottomCenter： 底部居中
• BottomEnd： 底部右对齐

示例：

      Stack({alignContent:Alignment.BottomEnd}){
        Column(){
          Text("11111111111111111")
        }.width("100%")
        .backgroundColor(Color.Orange)
        .height("30%").margin({bottom:200})
        Column(){
          Text("22222222222222222")
        }.width("100%")
        .backgroundColor(Color.Blue)
        .height("30%").margin({bottom:100})
        Column(){
          Text("333333333333333333")
        }.width("100%")
        .backgroundColor(Color.Gray )
        .height("30%")
        Scroll(){
        }
      }.width("100%")

结果

滚动框

创建一个可以滚动的区域

Scroll(){}

操控滚动框

      // 操作滚动框对象回到起始位置
      this.myScroll.scrollEdge(Edge.Start)

      // 设置左右滚动或是上下滚动
      .scrollable(ScrollDirection.Vertical)
        // 师傅开启滚动条
      .scrollBar(BarState.On)
        // 滚动条颜色
      .scrollBarColor(Color.Blue)
        // 滚动条粗细
      .scrollBarWidth(5)
        // 管理滚动时的滚动条效果
      .edgeEffect(EdgeEffect.Spring)

示例： 

  myScroll: Scroller = new Scroller()
  @State message: number = 0

  build() {
    Column(){
      Scroll(this.myScroll){
        Column(){
          Image($r('app.media.ic_jd_scroll_01'))
          Image($r('app.media.ic_jd_scroll_02'))
          Image($r('app.media.ic_jd_scroll_03'))
        }
      }.onScroll(()=>{
        this.message = this.myScroll.currentOffset().yOffset;
      })
      Text(":"+this.message)
    }.height("100%").width("100%")
  }
}

示例

选项卡导航

1. BarPosition.Start：标签栏显示在顶部或左侧。
2. BarPosition.End：标签栏显示在底部或右侧（如你的代码所示）。
3. BarPosition.Center：标签栏居中显示

      // 设置标签栏（Tab Bar）的位置
      Tabs({ barPosition: BarPosition.End }) {
        TabContent() {
          // 页面中的内容
          Text('内容1')
          // 页面标题的样式外观，一般使用@Builder的自定义组件
        }.tabBar(this.myBuild('首页', $r('app.media.ic_tabbar_icon_2'), $r('app.media.ic_tabbar_icon_2_selected'), 0))
        TabContent() {
          Text('内容2')
        }.tabBar(this.myBuild('活动', $r('app.media.ic_tabbar_icon_3'), $r('app.media.ic_tabbar_icon_3_selected'), 1))
      }.onChange((index: number) => {
        this.selectIndex = index
      })

弹出窗口功能

弹出一个测试框

      Button("测试").onClick(()=>{
        AlertDialog.show({
          message:'测试点击'
        })
      })

3.类、接口、对象、导入和导出

类:

定义对象的结构和行为

class Cat {}

对象:

1.属性和方法

?表示该属性是可选的。这意味着在创建类的实例时， 属性可以被省略，也可以不赋值。

在console.log中使用`${}`可以插值

class Cat {
  name: string = 'tom'
  foods?: string
  constructor(name: string, foods: string) {
    this.name = name
    this.foods = foods
  }
  run(sudu: number) {
    console.log(`我叫${this.name},我的跑的速度是:${sudu}`);
  }
  sayHello(name: string): string {
    return "我叫" + name
  }
}

 在类中声明的static静态 变量在不声明的情况下也可以调用

class testStatic{
  static testString1:string = "静态测试";
  static testnum1:number = 222222;
}

console.log(testStatic.testString1);

 如果要修改对象中的对象的值，需要把第一级的对象的值也发生改变，如果只修改第二级对象中的值，整体不会发生数据变化

示例：

interface Car {
  name: string
}
interface Person {
  name: string
  car: Car
}
const zhangsan:Person={
  name:'张三',
  car:{
    name:'byd'
  }
}
console.log(JSON.stringify(zhangsan));
console.log("对象:",Object.keys(zhangsan));
@Entry
@Component
struct Index {
  @State msg:string='信息'
  @State lisi:Person={
    name:'李四',
    car:{
      name:'大众'
    }
  }
  build() {
    Column() {
      Text(this.msg)
      Text(JSON.stringify(this.lisi))
      Button('改变').onClick(()=>{
        this.lisi.name='李斯'
        this.msg='改变了'
        // this.lisi.car.name='丰田'
        this.lisi.car={
          name:'jeep'
        }
      })
    }
  }
}

 接口:

接口是一种类型定义，用于规定对象的结构和行为，主要在 TypeScript 中使用

// 声明类
class Food {
  name?: string
  price?: number
  desc?: string
  // constructor是类的构造函数
  // 接口当作参数传递并赋值
  constructor(obj: IFood) {
    this.name = obj.name
    this.price = obj.price
    this.desc = obj.desc
  }
}
// 给类实例化传递接口值
let f1 = new Food({
  name: '饼干',
  price: 10,
  desc: '小鱼饼干'
})
console.log(f1.name, f1.desc, f1.price);

2.方法 

1.弹窗

可以在页面生成弹窗信息

    AlertDialog.show({
      message:"进入39"
    })

导出:

导出是指将模块的某些部分（如类、函数、变量等）暴露给其他模块使用的过程

指定模块导出

let name1: string = '刘备'
let sayHi = () => {
  console.log('打招呼')
}
export {
  name1,sayHi
}

 全部导出

@Preview
@Component
export  struct HelloCom {}

导入:

导入是指在一个文件中引入其他模块或组件的过程，使得可以使用它们的功能。

全部导入并起别名

import * as Module2 from '../tools/Module2'

按需导入

import { name1,name2 ,sayHi , run  as myRun } from '../tools/Module2'

4.注解

4.1 @state 动态更新

@State用于声明一个状态变量，这个变量可以在组件内部被动态更新。

当状态变量发生变化时，框架会自动重新渲染相关的 UI 组件

@State selectIndex: number = 0

      Text(""+this.selectIndex)
      Button("加1")
        .onClick(()=>{
          this.selectIndex++;
        })

可以实现动态加数字 

 

4.2 @Builder 创建视图组件（自定义组件）

  @Builder aFnBuild(){
    Text('传入的标题')
  }

4.3 @BuilderParam定义构建器参数

在实例化类时传递自定义的构建逻辑，

使用@BuilderParam声明的变量在没有赋值时使用设置的默认值

在构建器参数定义参数却没有赋值，调用时会使用默认值

  @BuilderParam abuild :()=>void=this.adefaultBuild

  @BuilderParam bbuild :()=>void=this.bdefaultBuild
  @Builder
  adefaultBuild() {
    Text('默认的标题a')
  }
  @Builder
  bdefaultBuild() {
    Text('默认的内容b')
  }
        
      // build内
      Row(){
        this.abuild()
      }.height(30)
      .width("100%")
      .border({color:'#ccc',width:{bottom:1}})
      .padding(10)

      Row(){
        this.bbuild();
      }.width("100%")
      Row(){
        this.cbuild();
      }.width("100%")

  @Builder aFnBuild(){
    Text('传入的标题')
  }
  @Builder bFnBuild(){
    Text('传入的内容')
  }
  build() {
    Column() {
      MyCard()
      MyCard({
        abuild:this.aFnBuild,
        bbuild:this.bFnBuild
      })
    }
  }

这里调用了两次类，一个没有参数，一个有两个参数没有c参数，则使用c的默认值，

4.3 @Prop父子单向

使用@Prop注解的变量可以接收来自导入文件的变量值

示例 
被导入文件

@Component
export default struct SonCom2 {
  @Prop car: string = ''
  chageCar = (newCar: string) => {
  }

  build() {
    Column() {
      Text(`子组件${this.car}`)
      Button('子组件改变车').onClick(() => {
        this.chageCar('三轮车')
      })
    }
  }
}

导入文件

import SonCom2 from '../components/SonCom2'
@Entry
@Component
struct Index {
  @State fcar:string='电瓶车'
  build() {
    Column() {
      Text(`父组件:${this.fcar}`)
      Button('父组件换乘').onClick(()=>{
        this.fcar='火车'
      })
      SonCom2({
        car:this.fcar,
        chageCar:(sCar:string)=>{
          this.fcar=sCar
        }
      })
    }
  }
}

4.4 @Link双向同步

@Link的作用主要是实现父组件与子组件之间的双向数据绑定。这种装饰器使得子组件能够直接访问和修改父组件的状态，而无需手动传递数据和事件。

示例：

interface Person {
  name: string
  age: number
}

@Component
struct SonComponet {
  @Link count: number
  @Link person: Person
  build() {
    Column({ space: 10 }) {
      Text('子组件')
        .fontSize(20)
      Text(this.count.toString())
      Text(this.person.name+":"+this.person.age)
      Button('修改数据')
        .onClick(() => {
          this.count++
          this.person.age++
        })
    }.backgroundColor(Color.Orange)
    .alignItems(HorizontalAlign.Center)
    .width("80%")
    .padding(10)
  }
}

@Entry
@Component
struct Index {
  @State count: number = 0
  @State person: Person = {
    name: 'zhangsan',
    age: 20
  }

  build() {
    Column() {
      Text('父组件')
        .fontSize(30)
      Text(this.count.toString())
      Text(this.person.name+":"+this.person.age)
        .height(30)
        .backgroundColor(Color.White)
      Button('修改数据')
        .onClick(() => {
          this.count++
          this.person.age++
        })

      SonComponet({
        count:this.count,
        person:this.person
      })
    }
    .backgroundColor(Color.Green)
    .alignItems(HorizontalAlign.Center)
    .width("100%")
    .padding(10)
  }
}

（示例中的SonComponet的作用在于它作为子组件，负责展示和修改父组件 中的状态数据。） 

4.5 @Consume和@Provide

Provide 作为数据的提供方，可以更新其子孙节点的数据，并触发 页面渲染

Consume 在感知到 Provide 数据的更新后，会触发当前view的重新渲染

示例

import { JSON } from '@kit.ArkTS'

interface Person {
  name: string
  age: number
}

@Component
struct SonComponet {
  @Consume count: number
  @Consume person: Person
  build() {
    Column({ space: 10 }) {
      Text('后代-子组件')
        .fontSize(20)
      Text(this.count.toString())
      Text(this.person.name+":"+this.person.age)
      Button('修改数据')
        .onClick(() => {
          this.count++
          this.person.age++
        })
    }.backgroundColor(Color.Orange)
    .alignItems(HorizontalAlign.Center)
    .width("80%")
    .padding(10)
  }
}

@Entry
@Component
struct Index {
  @Provide count: number = 0
  @Provide person: Person = {
    name: 'zhangsan',
    age: 20
  }

  build() {
    Column() {
      Text('后代-父组件')
        .fontSize(30)
      Text(this.count.toString())
      Text(this.person.name+":"+this.person.age)
        .height(30)
        .backgroundColor(Color.White)
      Button('修改数据')
        .onClick(() => {
          this.count++
          this.person.age++
        })

      SonComponet()
    }
    .backgroundColor(Color.Green)
    .alignItems(HorizontalAlign.Center)
    .width("100%")
    .padding(10)
  }
}

4.6 @ObjectLink 和 @Observed 

@ObjectLink 和 @Observed 类装饰器用于在涉及嵌套对象或数组的场景中进行双向数据同步： 被 @Observed 装饰的类，可以被观察到属性的变化； 子组件中 @ObjectLink 装饰器装饰的状态变量用于接收 @Observed 装饰的类的实例，和父组件中对应的状态变量建立双向数据绑定。

示例：

interface IPerson {
  id: number
  name: string
  age: number
}

@Observed
class Person {
  id?: number
  name?: string
  age: number = 0

  constructor(obj: IPerson) {
    this.id = obj.id
    this.name = obj.name
    this.age = obj.age
  }
}

@Entry
@Component
struct Index {
  @State personList: Person[] = [
    new Person({
      id: 1,
      name: 'zs1',
      age: 20
    }),
    new Person({
      id: 2,
      name: 'zs2',
      age: 21
    }), new Person({
    id: 3,
    name: 'zs3',
    age: 22
  })
  ]

  build() {
    Column({ space: 10 }) {
      Text('父组件').fontSize(30)
      List({ space: 10 }) {
        ForEach(this.personList, (item: Person, index: number) => {
          ItemCom({
            person:item,
            addAge:()=>{
              item.age++
            }
          })
        })
      }
    }
  }
}

@Component
struct ItemCom {
  @ObjectLink person: Person
  addAge = () => {

  }

  build() {
    ListItem() {
      Row({ space: 10 }) {
        Text('名称:' + this.person.name)
        Text('年龄:' + this.person.age)
        Blank()
        Button('修改年龄').onClick(() => {
          //this.person.age = this.person.age + 1
          this.addAge()
        })
      }
    }
  }
}

5.路由

5.1 创建页面

两种方式都可以实现创建跳转也页面

1.直接创建

2.配置创建

（创建跳转的页面和和跳转页面都需要配置在main_pages） 

（如甲页面跳转乙页面，这两个页面都需要在main_pages中配置，否则报错：）

11-04 08:35:50.203   34916-39820   C03900/Ace                                            W     [manifest_router.cpp(50)-(0:0:scope)] [Engine Log] can't find this page pages/TestPage path
11-04 08:35:50.203   34916-39820   C03900/Ace                                            W     [page_router_manager.cpp(968)-(0:0:scope)] [Engine Log] this uri is empty, not support in route push.

5.2 页面跳转和后退

引入router 包

import { router } from '@kit.ArkUI'

1.跳转

设置跳转路径，跳转路径 要在main_pages文件中记录，

      Button("跳转EditPage")
        .onClick(()=>{
          router.pushUrl({
            url:'pages/EditPage'
          })
        })

2.后退

      Button('后退').onClick(() => {
        router.back()
      })

5.3 页面栈

        页面栈是一个数据结构，用于管理用户在应用中导航的历史记录。每当用户访问新页面时，该页面会被压入栈中；每当用户后退时，栈顶的页面会被弹出。这样用户可以通过后退操作返回到之前访问的页面。

页面站最大容量为32个页面。如果超过这个限制，可以调用方法清空历史页面栈，释放内存空间。

5.4 路由模式

路由模式定义了应用如何管理页面的展示和导航。常见的路由模式包括：

• 单一模式 (Single Mode)：每次跳转都会清空页面栈，仅保留当前页面。适用于需要清晰页面状态的场景。
• 多重模式 (Multiple Mode)：可以在页面栈中保留多个页面，用户可以在这些页面之间自由切换。适用于需要保留历史记录的应用。

          router.pushUrl({
            url:'pages/EditPage'
          },router.RouterMode.Single)

5.5 路由传参

1.设置传参

    router.pushUrl({
      url: 'pages/Upd',
      params:{
        "id":clazz.id+"",
        "cname":clazz.cname
      }
    }, router.RouterMode.Single)

2. 取参

根据key获取值

  @State rou: object = router.getParams();

      Text("编号："+this.rou?.['id'])
      Text("原班级名："+this.rou?.['cname'])

6.axios

6.1 配置

 安装axios（在终端输入）

ohpm install @ohos/axios

添加配置申请网络权限

    "requestPermissions": [
      {"name": "ohos.permission.INTERNET"}
    ]

 ​

6.2 网络请求和响应

网络请求

import axios, { AxiosError, AxiosResponse, InternalAxiosRequestConfig } from '@ohos/axios';


const request = axios.create({
  baseURL: 'http://127.0.0.1:9001',
  timeout: 20000
})

//在发起axios的请求之前先访问的方法
request.interceptors.request.use(
  (config: InternalAxiosRequestConfig) => {
    //config 网络请求的配置对象 完成token的设置
    const token = AppStorage.get('token') as string;
    console.log("检查token，用户服务器验证是否有令牌：", token);
    if (token) {
      config.headers.token = token;
    }
    console.log("调用用户方法之前执行")
    return config;
  }
)

//axios的请求之后，并获取响应结果的时候，该方法被调用
request.interceptors.response.use(
  (response: AxiosResponse) => {
    console.log("后台返回的数据==>", JSON.stringify(response));
    //后台程序返回的结果信息都存储到了response对象里面
    if (response.data.code == 200) {
      return response.data.data
    } else {
      return Promise.reject(response.data.message)
    }
  },
  (error: AxiosError) => {
    return Promise.reject(error.message)
  }
)

export default class Http {
  get<T>(url: string, params?: Object) {
    return request.get<null, T>(url, {
      params
    })
  }

  post<T>(url: string, data?: Object) {
    return request.post<null, T>(url, data)
  }

  put<T>(url: string, data?: Object) {
    return request.put<null, T>(url, data)
  }

  delete<T>(url: string, params?: Object) {
    return request.delete<null, T>(url, {
      params
    })
  }
}

封装

import Http from './Http'

export const http = new Http()

7.函数（生命周期钩子）

• 触发时机：当页面被显示或重新展示时调用。

  onPageShow(): void {

  }

• 触发时机：在页面即将显示之前调用，通常用于进行一些准备工作。

  //一进入页面就会立即执行的方法,钩子函数
  aboutToAppear(): void {
    console.log("进入初始化方法");
  }

标签：ArkTS,console,Ability,Text,age,log,ArkUI,string,name
From： https://blog.csdn.net/yihai_77/article/details/143398183