鸿蒙Next星河版基础用例

目录：

    • 1、鸿蒙箭头函数的写法
    • 2、鸿蒙数据类型的定义
    • 3、枚举的定义以及使用
    • 4、position绝对定位及层级zIndex
    • 5、字符串的拼接转换以及数据的处理
      • (1)字符串转数字
      • (2)数字转字符串
      • (3)布尔值转换情况
      • (4)数组的增删改查
    • 6、三元表达式
    • 7、鸿蒙for循环的几种写法
      • 7.1、基本用法
      • 7.2、foreach的渲染控制用法
    • 8、鸿蒙中class类的extend和super用法
    • 9、泛型的用法
    • 10、自定义组件用法
    • 11、@prop单向数据传递和 @Link的双向数据绑定
    • 12、@Provide和@Consume的用法
    • 13、@Observed 和@ObjectLink 的用法
    • 14、router路由的用法
    • 15、鸿蒙页面和组件的生命周期函数
    • 16、Stage模型应用组件-UIAbility
      • （1）Ability的生命周期
      • （2）WindowStageCreate和WindowStageDestroy状态
      • （3）同模块Ability拉起
        • 1、跳转页引入 want和common 两个模块，want 为启动参数的载体，common用来调取上下文。
        • 2、准备（配置）want，作为UIAbility启动参数
        • 3、拉起方法
      • （4）跨模块Ability拉起
        • 1、跳转页引入 want和common 两个模块，want 为启动参数的载体，common用来调取上下文。
        • 2、准备（配置）want，作为UIAbility启动参数
        • 3、拉起方法

1、鸿蒙箭头函数的写法

(param1, param2) => param1 + param2

用作属性如下：

  cancel?: () => void | undefined
  confirm?: () => void | undefined

用作函数参数如下：

function f(funcCB: () => void) {
}

函数定义如下：

function 函数名(参数1, 参数2, ...) {
    // 函数体
    return 返回值; // 可选
}

//可以省略void返回类型
function greet(name: string): void {
    console.log('Hello ' + name + '!');
}
greet('World'); // 输出: Hello World!

2、鸿蒙数据类型的定义

1‌、number（数字）‌：表示数字，包括浮点数和整数。例如：
let a:number=100;
let b:number=-33;
let c:number=2.5;‌

2‌、string（字符串）‌：表示文本数据。可以使用双引号或单引号表示字符串。例如：
let str:string='你好,鸿蒙';
let str1:string='hello world';‌

3‌、boolean（布尔值）‌：表示真（true）或假（false）。例如：
let flag:boolean=true;
let pass:boolean=false;‌

4‌、array（数组）‌：由一系列元素组成，可以是数字、字符串或其他类型的数组。例如：
let arr:number[]=[1,2,3];
let b:string[]=['你好','鸿蒙'];‌

‌5、object（对象）‌：表示一系列由属性名称和属性值组成的数据类型。例如：
let person:{name:string,age:number,gender:string}={name:"旧约",age:24,gender:'男'};

6‌、联合类型的写法
let val: string | number = 12;
console.log("数字为 " + val);
val = "Runoob";
console.log("字符串为 " + val);

示例：
function disp(name: string | string[]): void {
  if (typeof name === "string") {
    console.log(name);
  } else {
    for (let i = 0; i < name.length; i++) {
      console.log(name[i]);
    }
  }
}
disp("Runoob");
disp(["Runoob", "Google", "Taobao", "Facebook"]);

3、枚举的定义以及使用

enum Direction {
    Up = 'UP',
    Down = 'DOWN',
    Left = 'LEFT',
    Right = 'RIGHT'
}
 
function move(direction: Direction): void {
    console.log(`移动方向: ${direction}`);
}
 
move(Direction.Up); // 输出: 移动方向: UP
move(Direction.Down); // 输出: 移动方向: DOWN

4、position绝对定位及层级zIndex

在这里插入图片描述

5、字符串的拼接转换以及数据的处理

let name: string = '悟空'
let age: number = 500
console.log('name: ',name+age+'岁')
console.log('年龄',18+age+2)

运行结果：

在这里插入图片描述

console.log('',`我的名字是${name}`)

(1)字符串转数字

//Number转换
console.log('Number',Number(str))

//保留整数
console.log('parseInt',parseInt(str))

(2)数字转字符串

let num1: number = 1.3531
let num2: number = 1.4341

console.log('',num1.toString())
console.log('',num2.toString())

let num1: number = 1.3531
let num2: number = 1.4341
//查看数据类型 typeof
console.log('',typeof num2.toString())
//toFixed(保留小数位数)
console.log('tofixed',num1.toFixed(2))
console.log('tofixed',num2.toFixed(2))

(3)布尔值转换情况

//转false情况
console.log('',Boolean(NaN))
console.log('',Boolean(0))
console.log('',Boolean(``))
console.log('',Boolean(undefined))
console.log('',Boolean(false))

在这里插入图片描述

(4)数组的增删改查

//定义一个数组
let arr: string[] = ['悟空','八戒','牛魔王']
//查找(悟空)
console.log('name: ',arr[0])
//修改牛魔王
arr[2] = '沙僧'
console.log('names: ',arr)

//向前添加
arr.unshift('唐僧','牛魔王')
console.log('unshift',arr)

//向后添加 push
arr.push('红孩儿','犀牛怪')
console.log('push',arr)

//删除前面的元素-只删除一个
 arr.shift()
console.log('shift',arr)
//删除后面的元素
arr.pop()
console.log('pop',arr)
//任意位置删除或添加元素
arr.splice(0,2,'黑神话','如来')
console.log('splice',arr)

6、三元表达式

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: Text('Multi-condition Rendering Example'),
    ),
    body: Center(
      child: () {
        if (isLoggedIn) ...[
          return Text('欢迎回来！');
        ] else if (isGuest) ... [
          return Text('欢迎，游客！');
        ] else ... [
          return Text('请登录以继续。');
        ]
      }(),
    ),
  );
}

改造成三元表达式写法：

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: Text('Ternary Operator Example'),
    ),
    body: Center(
      child: Text(
        isLoggedIn ? '欢迎回来！' : '请登录以继续。',
        style: TextStyle(fontSize: 24),
      ),
    ),
  );
}

7、鸿蒙for循环的几种写法

7.1、基本用法

for (int i = 1; i <= 10; i++) {
  print(i);
}

for (int i in arr) {
  print(i);
}

for (let char of str) {
  print(char);
}


int i = 1;
while (i <= 5) {
  print(i);
  i++;
}

7.2、foreach的渲染控制用法

@Entry
@Component
struct Parent {
  @State simpleList: Array<string> = ['one', 'two', 'three'];
 
  build() {
    Row() {
      Column() {
        ForEach(this.simpleList, (item: string) => {
          ChildItem({ item: item })
        }, (item: string) => item)
      }
      .width('100%')
      .height('100%')
    }
    .height('100%')
    .backgroundColor(0xF1F3F5)
  }
}
 
@Component
struct ChildItem {
  @Prop item: string;
 
  build() {
    Text(this.item)
      .fontSize(50)
  }
}

8、鸿蒙中class类的extend和super用法

class Parent {
    constructor(name) {
        this.name = name;
    }
}

class Child extends Parent {
    constructor(name, age) {
        super(name); // 调用父类的构造方法
        this.age = age; // 初始化子类特有的属性
    }
}

9、泛型的用法

interface KeyValuePair<K, V> {
    key: K;
    value: V;
}

class Stack<T> {
    private arr: T[] = [];
    public push(item: T) {
        this.arr.push(item);
    }
    public pop() {
        return this.arr.pop();
    }
}

10、自定义组件用法

1‌、定义自定义组件‌：使用@Component装饰器修饰一个struct类型的结构体，该结构体定义了组件的名称和build函数。例如：

@Component struct MyComponent {
    @State message: string = 'Hello, World!'
    build() {
        Row() {
            Text(this.message)
                .onClick(() => {
                    this.message = 'Hello, ArkUI!'
            })
        }
    }
}

2‌、使用自定义组件‌：在其他组件中引用自定义组件时，需要使用import关键字导入自定义组件，并在需要使用的地方通过@Entry装饰器创建实例。例如：

@Entry @Component struct ParentComponent {
    msg: string = 'Hello, World!'
    build() {
        Column() {
            Text('Parent Component')
            MyComponent({ message: this.msg })
        }
    }
}

11、@prop单向数据传递和 @Link的双向数据绑定

@ComponentstructParent{
  @State countDownStartValue:number=16;
  build(){
    Column(){
      Text(`父组件当前数字 ${this.countDownStartValue}`)
      Button(`父组件改变数字`).onClick(()=>{this.countDownStartValue+=1;})
      Child({count:this.countDownStartValue})
    }
  }
}

@ComponentstructChild{
   //这里其他都一样，使用link后，子组件修改值，父组件也可以同步变化
  //@Link count:number=0;
  @Prop count:number=0;
  build(){
    Column(){
      Text(`子组件当前数字 ${this.count}`)
      Button(`子组件改变数字`).onClick(()=>{this.count+=1;})
    }
  }
}

父组件点击按钮修改值，子组件可以收到父组件传递的count的值。

12、@Provide和@Consume的用法

// 祖先组件
@Entry @Component struct GrandfatherComponent {
    build() {
        Column() {
            Text('祖先组件')
                .fontSize(30)
                .fontWeight(900)
            ParentComponent()
        }
    }
}
// 父级组件
@Entry @Component struct ParentComponent {
    @Provide count: number = 0; // 提供状态变量count给后代组件使用
    build() {
        Column() {
            Button('增加') { this.count += 1 } // 按钮点击增加count值
        }
    }
}
// 后代组件（孙组件）
@Entry @Component struct ChildComponent {
    @Consume count: number; // 消费祖先组件提供的count变量
    build() {
        Text('当前值：${this.count}') // 显示当前值
    }
}

13、@Observed 和@ObjectLink 的用法

// 需要监控的组件使用@Observed装饰
@Observed class Task {
  static id: number = 1;
  name: string = '任务名称' + Task.id++;
  finished: boolean = false;
}

// 新组件内部引用对象使用@ObjectLink装饰
@ObjectLink var task: Task = new Task();

在这个例子中，Task 类被 @Observed 装饰，而 task 变量被 @ObjectLink 装饰。这样，当 Task 类的属性发生变化时，使用 task 变量的组件也会相应更新。

14、router路由的用法

import router from '@ohos.router';

// 跳转到新的页面，保留当前路由栈，并传递参数
router.pushUrl({
  url: 'pages/HomePage',
  params: { id: 1 }
}, router.RouterMode.Standard, (err) => {
  if (err) {
    console.log('路由失败');
  }
});

// 获取传递的参数
let param = router.getParams()['id']; // 获取id的值

路由跳转模式：

  • ‌router.pushUrl‌：目标页不会替换当前页，而是压入页面栈，保留当前页的状态，可以通过返回键或调用router.back方法返回到当前页。
  • ‌router.replaceUrl‌：目标页会替换当前页，并销毁当前页，无法返回到当前页。

15、鸿蒙页面和组件的生命周期函数

‌页面生命周期函数‌：

  • ‌onPageShow‌：当页面显示时触发。
  • ‌onPageHide‌：当页面隐藏时触发。
  • ‌onBackPress‌：当用户点击返回按钮时触发（注意，这不同于使用router.back()返回时的触发）。

‌组件生命周期函数‌：

  • ‌aboutToAppear‌：组件即将出现时触发，具体时机为创建自定义组件的新实例后，在执行其build()函数之前。
  • ‌aboutToDisappear‌：在自定义组件即将析构销毁时触发‌。

16、Stage模型应用组件-UIAbility

（1）Ability的生命周期

  • Create状态：Create状态为在应用加载过程中，UIAbility实例创建完成时触发，系统会调用onCreate()回调。可以在该回调中进行应用初始化操作，例如变量定义资源加载等，用于后续的UI展示。
  • Foreground状态：切换至前台时触发，对应onForeground()回调
  • Background状态：切换至后台时触发，对应onBackground()回调
  • Destroy状态：Destroy状态在UIAbility实例销毁时触发。可以在onDestroy()回调中进行系统资源的释放、数据的保存等操作。
    在这里插入图片描述

（2）WindowStageCreate和WindowStageDestroy状态

UIAbility实例Create完成之后，在进入Foreground之前，系统会创建一个WindowStage。WindowStage创建完成后会进入onWindowStageCreate()回调，可以在该回调中设置UI加载、设置WindowStage的事件订阅。

在这里插入图片描述

在onWindowStageCreate()回调中通过loadContent()方法设置应用要加载的页面，并根据需要调用on(‘windowStageEvent’)方法订阅WindowStage的事件（获焦/失焦、可见/不可见）。
对应onWindowStageCreate()回调。在UIAbility实例销毁之前，则会先进入onWindowStageDestroy()回调，可以在该回调中释放UI资源。例如在onWindowStageDestroy()中注销获焦/失焦等WindowStage事件。

（3）同模块Ability拉起

项目中同模块下有多个UIAbility，从一个ability 唤起另一个 ability（同模块）：
1、准备want 作为UIAbility的启动参数
2、利用上下文的 context方法，调用starAbility启动。

1、跳转页引入 want和common 两个模块，want 为启动参数的载体，common用来调取上下文。

// import Want from ‘@ohos.app.ability.Want’
// import {common} from ‘@kit.AbilityKit’
在这里插入图片描述

2、准备（配置）want，作为UIAbility启动参数

在这里插入图片描述

3、拉起方法

在这里插入图片描述
注意：this.context.startAbility() 方法中返回的结果是promise对象，工作中可以不写，但是如果报错或拉起失败可在promise的catch中查看报错信息等。

（4）跨模块Ability拉起

项目中同模块下有多个UIAbility，从一个ability 唤起另一个 ability（同模块）：
1、准备want 作为UIAbility的启动参数
2、利用上下文的 context方法，调用starAbility启动。

1、跳转页引入 want和common 两个模块，want 为启动参数的载体，common用来调取上下文。

// import Want from ‘@ohos.app.ability.Want’
// import {common} from ‘@kit.AbilityKit’
在这里插入图片描述

2、准备（配置）want，作为UIAbility启动参数

注意：跨模块和同模块拉起新的UIAbility区别不大，但是在配置want时，一定注意moduleName，这块要配置你要拉起的模块名字

在这里插入图片描述

3、拉起方法

在这里插入图片描述
注意：this.context.startAbility() 方法中返回的结果是promise对象，工作中可以不写，但是如果报错或拉起失败可在promise的catch中查看报错信息等。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/927338.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

Spring的事务管理

Spring的事务管理

tx标签用于配置事务管理用于声明和配置事务的相关属性 transaction-manager指定一个事务管理器的引用&#xff0c;用于管理事务的生命周期。propagation指定事务的传播属性&#xff0c;决定了在嵌套事务中如何处理事务。isolation指定事务的隔离级别&#xff0c;用于控制事务之…
阅读更多...
华为新手机和支付宝碰一下 带来更便捷支付体验

华为新手机和支付宝碰一下 带来更便捷支付体验

支付正在变的更简单。 11月26日&#xff0c;华为新品发布会引起众多关注。发布会上&#xff0c;华为常务董事余承东专门提到&#xff0c;华为Mate 70和Mate X6折叠屏手机的“独门支付秘技”——“碰一下”&#xff0c;并且表示经过华为和支付宝的共同优化&#xff0c;使用“碰…
阅读更多...
ADS学习笔记 7. 超外差接收机设计

ADS学习笔记 7. 超外差接收机设计

基于ADS2023 update2 更多ADS学习笔记&#xff1a;ADS学习笔记 1. 功率放大器设计ADS学习笔记 2. 低噪声放大器设计ADS学习笔记 3. 功分器设计ADS学习笔记 4. 微带分支定向耦合器设计ADS学习笔记 5. 微带天线设计ADS学习笔记 6. 射频发射机设计 目录 -1、射频接收机性能指标…
阅读更多...
蓝牙定位的MATLAB程序，四个锚点、三维空间

蓝牙定位的MATLAB程序，四个锚点、三维空间

这段代码通过RSSI信号强度实现了在三维空间中的蓝牙定位&#xff0c;展示了如何使用锚点位置和测量的信号强度来估计未知点的位置。代码涉及信号衰减模型、距离计算和最小二乘法估计等基本概念&#xff0c;并通过三维可视化展示了真实位置与估计位置的关系。 目录 程序描述 运…
阅读更多...
Linux命令进阶·如何切换root以及回退、sudo命令、用户/用户组管理，以及解决创建用户不显示问题和Ubuntu不显示用户名只显示“$“符号问题

Linux命令进阶·如何切换root以及回退、sudo命令、用户/用户组管理，以及解决创建用户不显示问题和Ubuntu不显示用户名只显示“$“符号问题

目录 1. root用户&#xff08;超级管理员&#xff09; 1.1 用于账户切换的系统命令——su 1.2 退回上一个用户命令——exit 1.3 普通命令临时授权root身份执行——sudo 1.3.1 为普通用户配置sudo认证 2. 用户/用户组管理 2.1 用户组管理 2.2 用户管理 2.2.1 …
阅读更多...
PDF版地形图矢量出现的问题

PDF版地形图矢量出现的问题

项目描述&#xff1a;已建风电场道路测绘项目&#xff0c;收集到的数据为PDF版本的地形图&#xff0c;图上标注了项目竣工时期的现状&#xff0c;之后项目对施工区域进行了复垦恢复地貌&#xff0c;现阶段需要准确的知道实际复垦修复之后的道路及其它临时用地的面积 解决方法&…
阅读更多...
群论入门笔记

群论入门笔记

群的基本定义 群由一组元素 G 和一个运算&#xff08;常用符号包括 &#xff0c;x , 或 ∗&#xff09;组成。 封闭性 对于任意两个元素 x,y∈G&#xff0c;运算 x * y 的结果仍然属于集合 G&#xff0c;即&#xff1a; ∀x,y∈G,x∗y∈G. 结合律 对于任意 a,b,c∈G&…
阅读更多...
LabVIEW内燃机气道试验台测控系统

LabVIEW内燃机气道试验台测控系统

基于LabVIEW软件开发的内燃机气道试验台测控系统主要应用于内燃机气道的性能测试和数据分析&#xff0c;通过高精度的测控技术&#xff0c;有效提升内燃机的测试精度和数据处理能力。 项目背景 随着内燃机技术的发展&#xff0c;对其气道性能的精准测量需求日益增加。该系统通…
阅读更多...
LabVIEW将TXT文本转换为CSV格式（多行多列）

LabVIEW将TXT文本转换为CSV格式（多行多列）

在LabVIEW中&#xff0c;将TXT格式的文本文件内容转换为Excel格式&#xff08;即CSV文件&#xff09;是一项常见的数据处理任务&#xff0c;适用于将以制表符、空格或其他分隔符分隔的数据格式化为可用于电子表格分析的形式。以下是将TXT文件转换为Excel&#xff08;CSV&#x…
阅读更多...
第二节——计算机网络（四）物理层

第二节——计算机网络（四）物理层

车载以太网采用差分双绞线车载以太网并未指定特定的连接器&#xff0c;连接方式更为灵活小巧&#xff0c;能够大大减轻线束重量。传统以太网一般使用RJ45连接器连接。车载以太网物理层需满足车载环境下更为严格的EMC要求&#xff0c;100BASE-T1\1000BASE-T1对于非屏蔽双绞线的传…
阅读更多...
Next.js - app 路由器之动态路由与并行路由

Next.js - app 路由器之动态路由与并行路由

#题引&#xff1a;我认为跟着官方文档学习不会走歪路 动态路由的约定 (1) 通过将文件夹名称用方括号括起来可以创建动态段&#xff1a;[folderName] 动态段会作为 params 属性传递给 layout、page、route 和 generateMetadata 函数。 例如&#xff0c;一个博客可以包含以下…
阅读更多...
电脑还原重置Windows系统不同操作模式

电脑还原重置Windows系统不同操作模式

电脑有问题，遇事不决就重启，一切都不是问题！是真的这样吗。其实不然，主机系统重启确实可以自动修复一些文件错误，或者是设置问题，但是，当你由于安装了错误的驱动或者中毒严重，亦或是蓝屏，那么重启这个方子可能就治不了你的电脑了。 那么，除了当主机出现异常故障现象…
阅读更多...
基于Java Springboot蛋糕订购小程序

基于Java Springboot蛋糕订购小程序

一、作品包含 源码数据库设计文档万字PPT全套环境和工具资源部署教程 二、项目技术 前端技术&#xff1a;Html、Css、Js、Vue、Element-ui 数据库&#xff1a;MySQL 后端技术&#xff1a;Java、Spring Boot、MyBatis 三、运行环境 开发工具&#xff1a;IDEA/eclipse 微信…
阅读更多...
git 上传代码时报错

git 上传代码时报错

在上传代码时&#xff0c;显示无法上传 PS E:\JavaWeb\vue3-project> git push To https://gitee.com/evening-breeze-2003/vue3.git! [rejected] master -> master (non-fast-forward) error: failed to push some refs to https://gitee.com/evening-breeze-20…
阅读更多...
【学习笔记】GoFrame框架

【学习笔记】GoFrame框架

文章目录 什么是GoFrame框架 and 安装项目初始化 什么是GoFrame框架 and 安装 我也是用过许多框架的程序员了&#xff0c;但是GoFrame框架确实是没听说过&#xff0c;今天就来学习一下。 首先是我们熟悉的选手自我介绍环节 GoFrame 是一款模块化、高性能、企业级的 Go 语言基…
阅读更多...
探索温度计的数字化设计：一个可视化温度数据的Web图表案例

探索温度计的数字化设计：一个可视化温度数据的Web图表案例

随着科技的发展&#xff0c;数据可视化在各个领域中的应用越来越广泛。在温度监控和展示方面&#xff0c;传统的温度计已逐渐被数字化温度计所取代。本文将介绍一个使用Echarts库创建的温度计Web图表&#xff0c;该图表通过动态数据可视化展示了温度值&#xff0c;并通过渐变色…
阅读更多...
Linq(C#)之对数据分组

Linq(C#)之对数据分组

分组是指将数据分到不同的组&#xff0c;使每组中的元素拥有公共的属性。 下图演示了对字符序列进行分组的结果。 每个组的键是字符。 1、group by List<int> numbers [35, 44, 200, 84, 3987, 4, 199, 329, 446, 208];IEnumerable<IGrouping<int, int>> q…
阅读更多...
【字体】Fire Code连字效果开启

【字体】Fire Code连字效果开启

Vscode 开启方法 1、设置字体Fire Code 放在最前面的即可&#xff1a; 2、启用连字 继续往下找到“在 settings.json 中编辑”&#xff0c;然后设置"editor.fontLigatures": true &#xff1a; 保存即可。 Sublime 开启方法 设置中设置字体后&#xff0c;启…
阅读更多...
区块链学习笔记(2)--区块链的交易模型part1

区块链学习笔记(2)--区块链的交易模型part1

模型基础 区块链的tx分为两种模型&#xff0c;分别是比特币为代表的UTXO&#xff08;Unspent Transaction Output&#xff09;模型&#xff0c;和以太坊为代表的Account模型。前者适用于货币记账&#xff0c;后者适用于链上应用。 UTXO模型 类似于现金的交易模型 一个tx包含…
阅读更多...
ComfyUI节点安装笔记

ComfyUI节点安装笔记

AI高速发展&#xff0c;版本更新相当快&#xff08;11月25日才安装的版本v.0.3.4&#xff0c;27日版本就已经更新到v.0.3.5了&#xff0c;当然不是说所有的版本更新都需要全部全新安装&#xff09;&#xff0c;在遇到问题&#xff0c;而不能通过update来更新各个节点解决时&…
阅读更多...
最新文章

Copyright @ 2022~2023