HarmonyOS Next 组件或页面之间的所有通信(传参)方法总结

系列文章目录

【鸿蒙】HarmonyOS NEXT开发快速入门教程之ArkTS语法装饰器(上)
【鸿蒙】HarmonyOS NEXT开发快速入门教程之ArkTS语法装饰器(下)
【鸿蒙】HarmonyOS NEXT应用开发快速入门教程之布局篇(上)
【鸿蒙】HarmonyOS NEXT应用开发快速入门教程之布局篇(下)


HarmonyOS Next 系列之省市区弹窗选择器实现(一)
HarmonyOS Next 系列之验证码输入组件实现(二)
HarmonyOS Next 系列之底部标签栏TabBar实现(三)
HarmonyOS Next 系列之HTTP请求封装和Token持久化存储(四)
HarmonyOS Next 系列之从手机选择图片或拍照上传功能实现(五)
HarmonyOS Next 系列之可移动悬浮按钮实现(六)
HarmonyOS Next 系列之沉浸式状态实现的多种方式(七)
HarmonyOS Next系列之Echarts图表组件(折线图、柱状图、饼图等)实现(八)
HarmonyOS Next系列之地图组件(Map Kit)使用(九)
HarmonyOS Next系列之半圆环进度条实现(十)
HarmonyOS Next 系列之列表下拉刷新和触底加载更多数据实现(十一)
HarmonyOS Next系列之实现一个左右露出中间大两边小带缩放动画的轮播图(十二)
HarmonyOS Next系列之水波纹动画特效实现(十三)


文章目录

  • 系列文章目录
  • 前言
  • 一、父子组件参数传递
    • 1、父传子
      • 方法一:@Prop
      • 方法二:@Link
      • 方法三:普通变量
      • 三种方法区别
        • 示例1:
        • 示例2:
      • 方法四:@Provide+@Consume
      • 方法五:@LocalStorageProp或@LocalStorageLink
      • 方法六:@StorageProp和@StorageLink
      • 方法七:eventHub
      • 方法八:globalThis
    • 2、子传父
  • 二、爷孙组件参数传递
    • 方法一:@Provide和@Consume
      • 方法二:@LocalStorageProp或@LocalStorageLink
      • 方法三:@StorageProp和@StorageLink
      • 方法四:eventHub
      • 方法五:globalThis
  • 三、兄弟组件参数传递
    • 方法一:@Provide和@Consume
    • 方法二:@Prop和事件回调函数
    • 方法三:@LocalStorageProp或@LocalStorageLink
      • 方法四:@StorageProp和@StorageLink
      • 方法五:eventHub
      • 方法六:globalThis
  • 三、不同页面组件间数据传递
    • 方法一:@StorageProp和@StorageLink
    • 方法二:eventHub
    • 方法三:globalThis
  • 四、父组件调用子组件内部方法
  • 四、子组件调用父组件内部方法
  • 五、路由跳转和传参


前言

本文总结了鸿蒙中常用的组件或页面之间参数传递方法,包括父子组件,子孙组件,兄弟组件,互不相关的组件(页面)和页面路由跳转的参数传递以及父子组件方法互调等。


一、父子组件参数传递

1、父传子

方法一:@Prop

说明:子组件定义@Prop变量,父组件通过对象形式传入数据

示例:

@Entry
/*** 父组件*/
@Component
struct Parent {@State title:string='鸿蒙系统'build() {Column() {Child({title:this.title})}.width('100%').height('100%')}
}/*** 子组件*/
@Component
struct Child {@Prop title:string;build() {Text(`我是子组件标题:${this.title}`)}
}

运行效果:

在这里插入图片描述

方法二:@Link

说明:子组件定义@Link变量,父组件通过对象形式传入数据

@Entry
/*** 父组件*/
@Component
struct Parent {@State title:string='鸿蒙系统'build() {Column() {Child({title:this.title})}.width('100%').height('100%')}
}/*** 子组件*/
@Component
struct Child {@Link title:string;build() {Button(this.title)}
}

运行效果:
在这里插入图片描述

方法三:普通变量

说明:子组件定义普通变量,父组件通过对象形式传入数据

@Entry
/*** 父组件*/
@Component
struct Parent {@State title:string='普通变量'build() {Column() {Child({title:this.title})}.width('100%').height('100%')}
}/*** 子组件*/
@Component
struct Child {private title:string='';build() {Text(`我是${this.title}`)}
}

运行结果:
在这里插入图片描述

三种方法区别

1、@Prop数据为单向传递,只能从父组件传递到子组件,无法从子组件回传到父组件。也就是子组件被@Prop修饰的变量值改变后,对应的父组件数据不变。
2、@Link数据为双向绑定,子组件被@Link修饰的变量值改变,对应的父组件的数据也跟着变化,而且具有UI响应变化
3、普通变量只在子组件初始化时候能拿到父组件传递的数据,后续如果父组件改变值子组件将无法获取到最新值

示例1:

通过改变父组件值看看对应子组件数据变化情况

@Entry
/*** 父组件*/
@Component
struct Parent {@State prop:string='prop方式'@State link:string='link方式'@State common:string="普通方式"build() {Column({space:10}) {Child({prop:this.prop})Child2({link:this.link})Child3({common:this.common})Button('父组件改变值').onClick(()=>{this.prop='父组件改变后的prop'this.link='父组件改变后的link'this.common='父组件改变后的普通方式'})}.width('100%').height('100%')}
}/*** 子组件*/
@Component
struct Child {@Prop prop:string;build() {Row(){Text(`我是子组件prop变量,值为:${this.prop}`).fontColor(Color.Red)}}
}
/*** 子组件*/
@Component
struct Child2 {@Link link:string;build() {Row(){Text(`我是子组件link变量,值为:${this.link}`).fontColor(Color.Red)}}
}
/*** 子组件*/
@Component
struct Child3 {private common?:string='';build() {Row(){Text(`我是子组件普通变量,值为:${this.common}`).fontColor(Color.Red)}}
}

运行效果:

请添加图片描述
说明:从运行结果可以看出普通变量方式只能在首次拿到数据后续无法响应UI变化,而@Prop和@Link可以。

示例2:

通过改变子组件值看看父组件数据变化情况

@Entry
/*** 父组件*/
@Component
struct Parent {@State prop:string='prop方式'@State link:string='link方式'@State common:string="普通方式"build() {Column({space:10}) {Text(`父组件prop值为:${this.prop}`)Text(`父组件link值为:${this.link}`)Text(`父组件common值为:${this.common}`)Child({prop:this.prop})Child2({link:this.link})Child3({common:this.common})}.width('100%').height('100%')}
}/*** 子组件*/
@Component
struct Child {@Prop prop:string;build() {Row(){Button('改变子组件prop值').onClick(()=>{this.prop="新prop"})}}
}
/*** 子组件*/
@Component
struct Child2 {@Link link:string;build() {Row(){Button('改变子组件link值').onClick(()=>{this.link="新link"})}}
}
/*** 子组件*/
@Component
struct Child3 {private  common?:string='';build() {Row(){Button('改变子组件common值').onClick(()=>{this.common="新common"})}}
}

运行效果:
在这里插入图片描述
说明:从运行效果可以看出@Link绑定的变量改变同时父组件数据跟着变,另两个父组件数据不受影响。


方法四:@Provide+@Consume

见下文介绍


方法五:@LocalStorageProp或@LocalStorageLink

见下文介绍


方法六:@StorageProp和@StorageLink

见下文介绍


方法七:eventHub

见下文介绍


方法八:globalThis

见下文介绍


2、子传父

子传父需求场景一般都是一些事件参数传递,如点击事件回调等

方法:父组件传递一个函数参数给子组件,子组件调用函数并传入入参,父组件就可以拿到该入参

示例:

@Entry/*** 父组件*/
@Component
struct Parent {@State name: string = ''build() {Column({ space: 10 }) {Text(`姓名是:${this.name}`)Child({clickAction: (name) => {this.name = name}})}.width('100%').height('100%')}
}/*** 子组件*/
@Component
struct Child {//回调函数private clickAction: (name: string) => void = () => {}build() {Row() {Button('获取姓名').onClick(() => {this.clickAction('小明')})}}
}

运行效果:
请添加图片描述

二、爷孙组件参数传递

方法一:@Provide和@Consume

说明@Provide和@Consume组合可以把参数往子孙层传递,不单单支持爷孙组件之间,支持跨层级(多层级、不限层级)传递。
并且数据是双向绑定的和@Link一样,改变孙子组件数据,爷爷组件数据也会跟着变化

ps:所以@Provide和@Consume也支持父子组件参数传递,但其更多用在跨层级组件之间数据传递,父子组件优先使用上面介绍前三种。

示例:

//父组件
@Entry
@Component
struct Parent {@Provide('weight') weight: number = 50build() {Column({ space: 20 }) {Text(`爷组件体重值:${this.weight}`)Button(`爷组件件体重+1`).onClick(() => {this.weight++})Child()}.padding(20).alignItems(HorizontalAlign.Start)}
}//子组件
@Component
struct Child {build() {Grandson()}
}//孙组件
@Component
struct Grandson {@Consume('weight') weight: numberbuild() {Column({ space: 20 }) {Text(`孙组件体重值:${this.weight}`)Button(`孙组件体重+1`).onClick(() => {this.weight++})}.margin({ top: 50 })}
}

运行效果:
请添加图片描述

方法二:@LocalStorageProp或@LocalStorageLink

见下文介绍


方法三:@StorageProp和@StorageLink

见下文介绍


方法四:eventHub

见下文介绍


方法五:globalThis

见下文介绍


三、兄弟组件参数传递

方法一:@Provide和@Consume

利用@Provide和@Consume数据双向绑定特性,以公共的父组件为中间媒介传递数据

示例代码:

//父组件
@Entry
@Component
struct Index {//姓名@Provide('name') name: string ='张三'build() {Column({ space: 20 }) {Child()Child2()}}
}//子组件1
@Component
struct Child {@Consume('name') name: stringbuild() {Column({ space: 20 }) {Text(`姓名为${this.name}`)}}
}//子组件2
@Component
struct Child2 {@Consume('name') name: stringbuild() {Column({ space: 20 }) {Button('改变姓名').onClick(()=>{this.name='李四'})}}
}

运行效果:
请添加图片描述

方法二:@Prop和事件回调函数

利用父组件为中间媒介,数据先从子组件1传递到父组件,在从父组件传给组件2

示例:

//父组件
@Entry
@Component
struct Index {//姓名@State name: string ='张三'build() {Column({ space: 20 }) {Child({name:this.name})Child2({changeAction:(name:string)=>{this.name=name}})}}
}//子组件1
@Component
struct Child {@Prop name: stringbuild() {Column({ space: 20 }) {Text(`姓名为${this.name}`)}}
}//子组件2
@Component
struct Child2 {//回调函数private changeAction:(name:string)=>void=()=>{}build() {Column({ space: 20 }) {Button('改变姓名').onClick(()=>{this.changeAction('李四')})}}
}

运行效果:和方法一:@Provide和@Consume示例一样效果

方法三:@LocalStorageProp或@LocalStorageLink

@LocalStorageProp和@LocalStorageLink是页面级的UI状态存储,页面内的所有组件共享一份存储数据

示例:

let storage: LocalStorage = new LocalStorage();
storage.setOrCreate('name','张三')//父组件
@Entry(storage)
@Component
struct Index {build() {Column({ space: 20 }) {Child()Child2()}}
}//子组件1
@Component
struct Child {@LocalStorageProp('name') name:string='' //姓名build() {Column({ space: 20 }) {Text(`姓名为${this.name}`)}}
}//子组件2
@Component
struct Child2 {@LocalStorageLink('name') name:string='' //姓名build() {Column({ space: 20 }) {Button('改变姓名').onClick(()=>{this.name='李四'})}}
}

运行效果:和方法一:@Provide和@Consume示例一样效果


方法四:@StorageProp和@StorageLink

见下文介绍


方法五:eventHub

见下文介绍


方法六:globalThis

见下文介绍


三、不同页面组件间数据传递

方法一:@StorageProp和@StorageLink

@StorageProp和@StorageLink是应用全局的UI状态存储,与之对应的是全局静态类AppStorage。和进程绑定,同一进程下的所有页面共用。

示例:

第一个页面Index.ets

import { router } from '@kit.ArkUI'AppStorage.setOrCreate('name','张三')
@Entry
@Component
struct Index {@StorageProp('name') name:string=''build() {Column({space:20}) {Text(`姓名为:${this.name}`)Button('跳转下一页').onClick(()=>{router.pushUrl({url:'pages/Second'})})}.width('100%').height('100%').padding({top:30})}
}

第二个页面Second.ets

import { router } from '@kit.ArkUI'@Entry
@Component
struct Second {@StorageLink('name') name: string = ''build() {Column({space:20}) {Text(`当前姓名:${this.name}`)Button('改变姓名值').onClick(() => {this.name = '李四'})Button('返回').onClick(()=>{router.back()})}.width('100%').height('100%').padding({top:30})}
}

运行效果:
请添加图片描述

方法二:eventHub

eventHub和vue中eventBus一样使用方法也类似安卓的广播机制,通过emit发出事件(广播)并携带参数,在有注册该事件(on)的页面会同步接收到该事件的回调,

eventHub.emit():发出事件
eventHub.on():注册事件
eventHub.off():解绑事件

ps:需要注意的是离开页面必须进行解绑,不然再次打开会页面会造成多次注册导致同一个事件被多次触发回调

eventHub为Context上一个属性对象,在页面内通过getContext().eventHub获取

示例:
场景:个人信息编辑成功后通知前面页面更新个人信息

第一个页面Index.ets

import { router } from '@kit.ArkUI'//父组件
@Entry
@Component
struct Index {@State name: string = '张三';@State age: number = 25aboutToAppear(): void {//注册事件getContext().eventHub.on('userInfoChange', this.handleUserInfoChange.bind(this))}aboutToDisappear(): void {//解绑事件getContext().eventHub.off('userInfoChange', this.handleUserInfoChange.bind(this))}//用户信息修改成功回调private handleUserInfoChange(data: Record<string, string>) {this.name = data.name ?? ''this.age = data.age ? Number(data.age) : this.age}build() {Column({ space: 20 }) {Text(`姓名:${this.name}`)Text(`年龄:${this.age}`)Button('修改个人信息').onClick(() => {router.pushUrl({url: 'pages/Editor'})})}.width('100%').padding({ top: 20 })}
}

第二个页面:Editor.ets

import { promptAction, router } from '@kit.ArkUI'@Entry
@Component
struct Editor {@State name:string=''@State age:string=''build() {Column({space:15}) {TextInput({placeholder:'请输入姓名',text:$$this.name})TextInput({placeholder:'请输入年龄',text:$$this.age}).type(InputType.Number)Button('提交').onClick(()=>{getContext().eventHub.emit('userInfoChange',{age:this.age,name:this.name})promptAction.showToast({message:'修改成功'})router.back()})}.width('100%').height('100%').justifyContent(FlexAlign.Center).padding(20)}
}

ps:注意this的指向,绑定回调函数需要用bind(this)

运行效果:
请添加图片描述

eventHub在实际项目开发中非常实用,可以很轻松实现任意不同页面或组件之间的通信。常用于一些需要刷新页面操作的场景,除了上述例子外,还可以应用于提交一个表单数据后通知前面页面刷新列表数据,或者比如在支付完成后通知订单列表刷新订单状态等。

ps:注意预览器和真机的差异性对eventHub支持不友好,所以如有使用eventHub功能要在真机或者模拟器测试

方法三:globalThis

globalThis是ArkTS引擎实例内部的一个全局对象,引擎内部的UIAbility/ExtensionAbility/Page都可以使用,简单说globalThis是一个全局对象变量,所有页面都可以直接引用,所以可以把数据存到globalThis属性上供其他页面使用

示例:
以方法eventHub示例一样功能场景用globalThis实现

第一个页面Index.ets

import { router } from '@kit.ArkUI'//父组件
@Entry
@Component
struct Index {@State name: string = ''@State age: number = 0build() {Column({ space: 20 }) {Text(`姓名:${this.name}`)Text(`年龄:${this.age}`)Button('修改个人信息').onClick(() => {router.pushUrl({url: 'pages/Editor'})})}.width('100%').padding({ top: 20 }).onVisibleAreaChange([0.0, 1.0], async (isVisible: boolean, currentRatio: number) => {//页面重新加载从globalThis获取最新数据this.name = globalThis.name ?? '张三'this.age = globalThis.age ?? 25})}
}

第二个页面:Editor.ets

import { promptAction, router } from '@kit.ArkUI'@Entry
@Component
struct Editor {build() {Column({space:15}) {TextInput({placeholder:'请输入姓名'}).onChange((value:string)=>{//姓名数据存储到全局globalThisglobalThis.name=value})TextInput({placeholder:'请输入年龄'}).type(InputType.Number).onChange((value:string)=>{//年龄数据存储到全局globalThisglobalThis.age=value})Button('提交').onClick(()=>{promptAction.showToast({message:'修改成功'})router.back()})}.width('100%').height('100%').justifyContent(FlexAlign.Center).padding(20)}
}

实现效果:如方法2所示

需要注意的是globalThis全局变量数据非响应式,如有更新,需要在返回第一个页面从重新获取。
globalThis为全局变量为了避免变量污染,尽可能优先使用其他方案替代。


四、父组件调用子组件内部方法

方法提炼:子组件暴露一个回调方法,把子组件实例通过入参回传给父组件,父组件全局缓存子组件实例,在需要的时候调用子组件实例上方法。

示例:
下面实现一个这样场景需求:页面重复倒计时5秒后刷新列表数据,其中列表在子组件渲染,刷新动作在父组件触发

import { SwipeRefresher } from '@kit.ArkUI';//父组件
@Entry
@Component
struct Parent {child: Child | null = null; //子组件实例@State count: number = 5aboutToAppear(): void {setInterval(() => {this.count--if (this.count < 0) {//重新获取子组件数据this.child && this.child.getData();this.count = 5}}, 1000)}build() {Column({ space: 20 }) {Text(`倒计时:${this.count}`)Child({complete: (child: Child) => {this.child = child}})}.width('100%')}
}//子组件
@Component
struct Child {//初始化回调complete: (child: Child) => void = () => {}@State list: number[] = []@State isLoading: boolean = falseaboutToAppear(): void {//把子组件实例回传给父组件this.complete(this)this.getData()}//模拟接口获取列表数据getData() {this.isLoading = truelet list: number[] = []for (let i = 1; i < 6; i++) {list.push(this.getRandom())}this.list = listsetTimeout(() => {this.isLoading = false}, 1000)}//获取随机数getRandom() {return Math.round(Math.random() * 10000)}build() {Column() {if (this.isLoading) {SwipeRefresher({content: '正在加载中',isLoading: this.isLoading})} else {List() {ForEach(this.list, (item: number, index: number) => {ListItem() {Text(item.toString()).width('100%').height(80).textAlign(TextAlign.Center).border({width: {bottom: 1}})}.width('100%')}, (item: number, index: number) => item.toString())}.width('100%')}}.width('100%').height('100%')}
}

运行效果:
请添加图片描述

四、子组件调用父组件内部方法

方法提炼:父组件实例当参数传递给子组件,子组件缓存父组件实例,在需要的时候调用实例上方法

示例:
下面实现一个这样场景需求:父组件有一个加载中组件,对应有关闭和显示2个控制方法。子组件接口正在请求数据时显示加载中,接口请求完毕后关闭加载中。

import { SwipeRefresher } from '@kit.ArkUI';//父组件
@Entry
@Component
struct Parent {@State isLoading: boolean = false//显示加载中showLoading() {this.isLoading = true}//隐藏加载中hideLoading() {this.isLoading = false}build() {Column({ space: 20 }) {if (this.isLoading) {SwipeRefresher({content: '正在加载中',isLoading: this.isLoading})}Child({parent: this})}.width('100%')}
}//子组件
@Component
struct Child {parent: Parent | null = nullbuild() {Column() {Button('加载数据').onClick(() => {this.parent?.showLoading()//模拟接口请求2秒后关闭加载显示setTimeout(() => {this.parent?.hideLoading()}, 2000)})}.width('100%').height('100%')}
}

运行效果:
请添加图片描述

五、路由跳转和传参

1、通过 router.pushUrl( options: RouterOptions)实现路由跳转

RouterOptions:类型属性字段:
url:目标页面的url
params:路由跳转时要同时传递到目标页面的数据

import { router } from '@kit.ArkUI'
......
.....
router.pushUrl({url:'pages/Editor',params:{name:'张三',}})

2、通过router.getParams()获取路由参数

aboutToAppear(): void {//获取路由参数let params = router.getParams() as Record<string, string >console.log( params['name'] as string )}

代码示例:
由页面A跳转到页面B并携带姓名和年龄参数

页面A:
Index.ets

//父组件
import { router } from '@kit.ArkUI'@Entry
@Component
struct Parent {build() {Column({ space: 20 }) {Button('跳转下一页').onClick(()=>{router.pushUrl({url:'pages/Editor',params:{name:'张三',age:20}})})}.width('100%')}
}

页面B:
Editor.ets

import { router } from '@kit.ArkUI'@Entry
@Component
struct Editor {@State name: string = ''//姓名@State age: string = ''//年龄aboutToAppear(): void {//获取路由参数let params = router.getParams() as Record<string, string | number>this.name = params['name'] as string ?? ''this.age =( params['age'] as number ?? 0).toString()}build() {Column({ space: 15 }) {TextInput({ placeholder: '请输入姓名', text: $$this.name })TextInput({ placeholder: '请输入年龄', text: $$this.age }).type(InputType.Number)}.width('100%').height('100%').justifyContent(FlexAlign.Center).padding(20)}
}

运行效果:
请添加图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系一条长河网进行投诉反馈,一经查实,立即删除!

相关文章

API接口:助力汽车管理与安全应用

随着汽车行业的飞速发展&#xff0c;越来越多的汽车管理技术被应用到交通安全和智慧交通系统中。在这一过程中&#xff0c;API接口起到了至关重要的作用。通过API接口&#xff0c;我们可以实现诸如车主身份验核、车辆信息查询等功能&#xff0c;从而为汽车智慧交通发展与安全应…

C哈的刷题计划之输出数字螺旋矩阵(1)

1、盲听C哈说 都说数据结构与算法是编程的核心&#xff0c;它们两个是内功与心法&#x1f600;&#xff0c;其它编程工具只是招式&#xff0c;学会了内功与心法&#xff0c;学习新事物&#xff08;这里特指层出不穷的IT技术&#xff09;就没有那么难了&#xff0c;实际上&#…

AD22Duplicate Net Names Wire问题

在验证的时候发现报了这个错误 我这个原理图都是用自定义的元件 只写在name引脚名字是会报这个错的 但是换成designator引脚标识就不会了 建议是name引脚名字和designator引脚标识都写 写成一样都行&#xff0c;就不会报这个错了&#xff0c;别空着

centos7上安装mysql

1.现查看虚拟机上有没有wget包&#xff0c;如果没有的话进行安装 yum install -y wget 2.进入MySQL :: Download MySQL Yum Repository下载mysql安装源 找到与linux相应的版本&#xff0c;复制地址&#xff0c;如果找不到地址&#xff0c;可以复制如下 3.下载mysql官方yum源 …

hadoop报错找不到主类

错误&#xff1a; (base) mpsmps3:~$ hadoop hadoop_map_redce-1.0-SNAPSHOT.jar MovieDriver /input/movies-to-be-predicted.txt Error: Could not find or load main class hadoop_map_redce-1.0-SNAPSHOT.jar解决办法&#xff1a; 1.输入命令 hadoop classpath配置好了ha…

使用 start-local 脚本在本地运行 Elasticsearch

警告&#xff1a;请勿将这些说明用于生产部署 本页上的说明仅适用于本地开发。请勿将此配置用于生产部署&#xff0c;因为它不安全。请参阅部署选项以获取生产部署选项列表。 使用 start-local 脚本在 Docker 中快速设置 Elasticsearch 和 Kibana 以进行本地开发或测试。 此设…

Day14 - CV项目实战:SAR飞机检测识别

论文原文&#xff1a; ​​​​​​SAR-AIRcraft-1.0:高分辨率SAR飞机检测识别数据集 - 中国知网 第一排的7张图片&#xff0c;普通人肉眼很难看出对应的是第二排的飞机。 还有上图里标注的飞机&#xff0c;外行根本看不明白&#xff0c;为什么这些是&#xff0c;其他的不是。…

Threejs 材质贴图、光照和投影详解

1. 材质和贴图 材质&#xff08;Material&#xff09;定义了物体表面的外观&#xff0c;包括颜色、光泽度、透明度等。贴图&#xff08;Textures&#xff09;是应用于材质的图像&#xff0c;它们可以增加物体表面的细节和真实感。 1.1材质类型 MeshBasicMaterial&#xff1a…

笔记整理—linux驱动开发部分(11)中断上下文

触摸屏分为两种&#xff0c;一种为电阻式触摸屏&#xff0c;另一种为电容式触摸屏。电阻式触摸屏&#xff08;x、x-、y、y-、AD&#xff09;有两种接口&#xff0c;一种为SOC自带的接口&#xff08;miscinput或platform&#xff09;&#xff0c;第二种为外部IC&#xff0c;通过…

网络编程示例之开发板测试

编译elf1_cmd_net程序 &#xff08;一&#xff09;设置交叉编译环境。 &#xff08;二&#xff09;查看elf1_cmd_net文件夹Makefile文件。查看当前编译规则&#xff0c;net_demo是编译整个工程&#xff0c;clean是清除工程。 &#xff08;三&#xff09;输入命令。 &#xff0…

【GD32】(一) 开发方式简介及标准库开发入门

文章目录 0 前言1 开发方式选择2 标准库模板的创建3 遇到的问题和解决方法 0 前言 因为项目关系&#xff0c;需要使用GD32。之前对此早有耳闻&#xff0c;知道这个是一个STM32的替代品&#xff0c;据说甚至可以直接烧录STM32的程序&#xff08;一般是同型号&#xff09;&#x…

Java NIO 核心知识总结

NIO 简介 在传统的 Java I/O 模型&#xff08;BIO&#xff09;中&#xff0c;I/O 操作是以阻塞的方式进行的。也就是说&#xff0c;当一个线程执行一个 I/O 操作时&#xff0c;它会被阻塞直到操作完成。这种阻塞模型在处理多个并发连接时可能会导致性能瓶颈&#xff0c;因为需…

Spring如何解决循环依赖的问题

Spring 如何解决循环依赖的问题 Spring 是通过三级缓存来解决循环依赖问题&#xff0c;第一级缓存里面存储完整的Bean实例&#xff0c;这些实例是可以直接被使用的&#xff0c;第二级缓存存储的是实例化后但是还没有设置属性值的Bean实例&#xff0c;也就是Bean里面的 依赖注入…

深度图变换器的新突破:DeepGraph

人工智能咨询培训老师叶梓 转载标明出处 在图变换器领域&#xff0c;尽管其全局注意力机制在图结构数据处理上显示出了巨大潜力&#xff0c;但现有的图变换器模型却普遍较浅&#xff0c;通常不超过12层。这一现象引发了学者们对于“增加层数是否能进一步提升图变换器性能”的深…

单体架构 IM 系统之 Server 节点状态化分析

基于 http 短轮询模式的单体架构的 IM 系统见下图&#xff0c;即客户端通过 http 周期性地轮询访问 server 实现消息的即时通讯&#xff0c;也就是我们前面提到的 “信箱模型”。“信箱模型” 虽然实现非常容易&#xff0c;但是消息的实时性不高。 我们在上一篇文章&#xff08…

阿里云通义大模型团队开源Qwen2.5-Coder:AI编程新纪元

&#x1f680; 11月12日&#xff0c;阿里云通义大模型团队宣布开源通义千问代码模型全系列&#xff0c;共6款Qwen2.5-Coder模型。这些模型在同等尺寸下均取得了业界最佳效果&#xff0c;其中32B尺寸的旗舰代码模型在十余项基准评测中均取得开源最佳成绩&#xff0c;成为全球最强…

计算机网络(8)数据链路层之子层

上一篇已经讲到数据链路层可以分为两个子层&#xff0c;这次将重点讲解子层的作用和ppp协议 数据链路层的子层 数据链路层通常被分为两个子层&#xff1a; 逻辑链路控制子层&#xff08;LLC&#xff0c;Logical Link Control&#xff09;&#xff1a; LLC子层负责在数据链路…

【操作系统】输入/输出(I/O)管理

王道笔记 一、I/O管理描述 1.1 I/O设备的概念和分类 1.1.1 什么是I/O设备 “I/O”就是“输入/输出”&#xff08;Input/Output&#xff09; I/O设备机会可以将数据输入到计算机&#xff0c;或者可以接收计算机输出数据的外部设备&#xff0c;属于计算机中的硬件部件。下图就…

Day44 | 动态规划 :状态机DP 买卖股票的最佳时机IV买卖股票的最佳时机III309.买卖股票的最佳时机含冷冻期

Day44 | 动态规划 &#xff1a;状态机DP 买卖股票的最佳时机IV&&买卖股票的最佳时机III&&309.买卖股票的最佳时机含冷冻期 动态规划应该如何学习&#xff1f;-CSDN博客 本次题解参考自灵神的做法&#xff0c;大家也多多支持灵神的题解 买卖股票的最佳时机【…

Koa进阶:掌握中间件和参数校验的艺术

目录 一、首先下载依赖 二、在index.js中引入koa-parameter&#xff0c;一般挂载这个中间件时会放在注册请求体的后面 三、使用实例 四、如果跟我们所需求的参数不同&#xff0c;返回结果直接会返回422 koa-parameter一般是用来校验请求传过来的参数是否是自己所需要的的 G…