Popup控制
给组件绑定popup弹窗,并设置弹窗内容,交互逻辑和显示状态。
说明:
从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
popup弹窗的显示状态在onStateChange事件回调中反馈,其显隐与组件的创建或销毁无强对应关系。
bindPopup
bindPopup(show: boolean, popup: PopupOptions | CustomPopupOptions)
给组件绑定Popup弹窗。
原子化服务API: 从API version 11开始,该接口支持在原子化服务中使用。
系统能力: SystemCapability.ArkUI.ArkUI.Full
参数:
参数名 | 类型 | 必填 | 说明 |
---|---|---|---|
show | boolean | 是 | 弹窗显示状态,默认值为false,隐藏弹窗。popup弹窗必须等待页面全部构建完成才能展示,因此show不能在页面构建中设置为true,否则会导致popup弹窗显示位置及形状错误。 |
popup | PopupOptions | CustomPopupOptions8+ | 是 | 配置弹出弹窗的参数。 |
PopupOptions类型说明
名称 | 类型 | 必填 | 描述 |
---|---|---|---|
message | string | 是 | 弹窗信息内容。 原子化服务API: 从API version 11开始,该接口支持在原子化服务中使用。 |
placementOnTop(deprecated) | boolean | 否 | 是否在组件上方显示,默认值为false。 说明: 从 API version 10 开始废弃,建议使用 placement 替代。 |
primaryButton | { value: string, action: () => void } | 否 | 第一个按钮。 value: 弹窗里主按钮的文本。 action: 点击主按钮的回调函数。 原子化服务API: 从API version 11开始,该接口支持在原子化服务中使用。 |
secondaryButton | { value: string, action: () => void } | 否 | 第二个按钮。 value: 弹窗里辅助按钮的文本。 action: 点击辅助按钮的回调函数。 原子化服务API: 从API version 11开始,该接口支持在原子化服务中使用。 |
onStateChange | (event: { isVisible: boolean }) => void | 否 | 弹窗状态变化事件回调,参数isVisible为弹窗当前的显示状态。 原子化服务API: 从API version 11开始,该接口支持在原子化服务中使用。 |
arrowOffset9+ | Length | 否 | popup箭头在弹窗处的偏移。箭头在气泡上下方时,数值为0表示箭头居最左侧,偏移量为箭头至最左侧的距离,默认居中。箭头在气泡左右侧时,偏移量为箭头至最上侧的距离,默认居中。如果显示在屏幕边缘,气泡会自动左右偏移,数值为0时箭头始终指向绑定组件。 原子化服务API: 从API version 11开始,该接口支持在原子化服务中使用。 |
showInSubWindow9+ | boolean | 否 | 是否在子窗口显示气泡,默认值为false。 原子化服务API: 从API version 11开始,该接口支持在原子化服务中使用。 |
mask10+ | boolean | { color : ResourceColor } | 否 | 设置气泡是否有遮罩层及遮罩颜色。如果设置为false,则没有遮罩层;如果设置为true,则设置有遮罩层并且颜色为透明色;如果设置为Color,则为遮罩层的颜色。 原子化服务API: 从API version 11开始,该接口支持在原子化服务中使用。 |
messageOptions10+ | PopupMessageOptions | 否 | 设置弹窗信息文本参数。 原子化服务API: 从API version 11开始,该接口支持在原子化服务中使用。 |
targetSpace10+ | Length | 否 | 设置popup与目标的间隙。 原子化服务API: 从API version 11开始,该接口支持在原子化服务中使用。 |
placement10+ | Placement | 否 | 设置popup组件相对于目标的显示位置,默认值为Placement.Bottom。 如果同时设置了 placementOnTop 和placement ,则以placement 的设置生效。原子化服务API: 从API version 11开始,该接口支持在原子化服务中使用。 |
offset10+ | Position | 否 | 设置popup组件相对于placement设置的显示位置的偏移。 说明: 不支持设置百分比。 原子化服务API: 从API version 11开始,该接口支持在原子化服务中使用。 |
enableArrow10+ | boolean | 否 | 设置是否显示箭头。 默认值:true 说明: 当页面可用空间无法让气泡完全避让时,气泡会覆盖到组件上并且不显示箭头。 原子化服务API: 从API version 11开始,该接口支持在原子化服务中使用。 |
popupColor11+ | Color | string | number | Resource | 否 | 提示气泡的颜色。如需去除模糊背景填充效果,需将backgroundBlurStyle设置为BlurStyle.NONE。 默认值:透明色TRANSPARENT加模糊背景填充效果COMPONENT_ULTRA_THICK。 原子化服务API: 从API version 12开始,该接口支持在原子化服务中使用。 |
autoCancel11+ | boolean | 否 | 页面有操作时,是否自动关闭气泡。 默认值:true 原子化服务API: 从API version 12开始,该接口支持在原子化服务中使用。 |
width11+ | Dimension | 否 | 弹窗宽度。 说明: showInSubWindow=true时最大高度为设备屏幕高度,showInSubWindow=false时最大高度为应用窗口高度。高度限定逻辑=最大高度-状态栏高度(没有时高度为0)-dock栏高度(没有时高度为0)-40VP-40VP。 原子化服务API: 从API version 12开始,该接口支持在原子化服务中使用。 |
arrowPointPosition11+ | ArrowPointPosition | 否 | 气泡尖角相对于父组件显示位置,气泡尖角在垂直和水平方向上有 ”Start“、”Center“、”End“三个位置点可选。以上所有位置点均位于父组件区域的范围内,不会超出父组件的边界范围。 原子化服务API: 从API version 12开始,该接口支持在原子化服务中使用。 |
arrowWidth11+ | Dimension | 否 | 设置箭头宽度。若所设置的箭头宽度超过所在边的长度减去两倍的气泡圆角大小,则不绘制气泡箭头。 默认值:16.0_vp 说明: 不支持设置百分比。 原子化服务API: 从API version 12开始,该接口支持在原子化服务中使用。 |
arrowHeight11+ | Dimension | 否 | 设置箭头高度。 默认值:8.0_vp 说明: 不支持设置百分比。 原子化服务API: 从API version 12开始,该接口支持在原子化服务中使用。 |
radius11+ | Dimension | 否 | 设置气泡圆角半径。 默认值:20.0_vp 原子化服务API: 从API version 12开始,该接口支持在原子化服务中使用。 |
shadow11+ | ShadowOptions | ShadowStyle | 否 | 设置气泡阴影。 默认值:ShadowStyle.OUTER_DEFAULT_MD 原子化服务API: 从API version 12开始,该接口支持在原子化服务中使用。 |
backgroundBlurStyle11+ | BlurStyle | 否 | 设置气泡模糊背景参数。 默认值:BlurStyle.COMPONENT_ULTRA_THICK 原子化服务API: 从API version 12开始,该接口支持在原子化服务中使用。 |
transition12+ | TransitionEffect | 否 | 自定义设置popup弹窗显示和退出的动画效果。 说明: 1.如果不设置,则使用默认的显示/退出动效。 2.显示动效中按back键,打断显示动效,执行退出动效,动画效果为显示动效与退出动效的曲线叠加后的效果。 3.退出动效中按back键,不会打断退出动效,退出动效继续执行,back键不被响应。 |
onWillDismiss12+ | boolean|(dismissPopupAction: DismissPopupAction) => void | 否 | 设置popup交互式关闭拦截开关及拦截回调函数,默认值为true,popup响应点击、左滑/右滑、三键back。 1.当为boolean类型时,如果设置为false,则不响应点击、左滑/右滑、三键back或键盘ESC退出事件,仅当设置“弹窗显示状态”参数show值为false时才退出;如果设置为true,则正常响应退出事件; 2.如果设置为函数类型,则拦截退出事件且执行回调函数。 说明: 在onWillDismiss回调中,不能再做onWillDismiss拦截。 |
PopupMessageOptions10+类型说明
原子化服务API: 从API version 11开始,该接口支持在原子化服务中使用。
名称 | 类型 | 必填 | 描述 |
---|---|---|---|
textColor | ResourceColor | 否 | 设置弹窗信息文本颜色。 |
font | Font | 否 | 设置弹窗信息字体属性。 |
DismissPopupAction12+类型说明
名称 | 类型 | 必填 | 描述 |
---|---|---|---|
dismiss | function | 是 | popup关闭回调函数。开发者需要退出时调用,不需要退出时无需调用。 |
reason | DismissReason | 是 | 关闭原因,返回本次拦截popup消失的事件原因。 |
DismissReason12+枚举说明
名称 | 参数描述 |
---|---|
PRESS_BACK | 点击Back键。 |
TOUCH_OUTSIDE | 点击组件外部区域。 |
CustomPopupOptions8+类型说明
名称 | 类型 | 必填 | 描述 |
---|---|---|---|
builder | CustomBuilder | 是 | 提示气泡内容的构造器。 说明: popup为通用属性,自定义popup中不支持再次弹出popup。对builder下的第一层容器组件不支持使用position属性,如果使用将导致气泡不显示。builder中若使用自定义组件,自定义组件的aboutToAppear和aboutToDisappear生命周期与popup弹窗的显隐无关,不能使用其生命周期判断popup弹窗的显隐。 原子化服务API: 从API version 11开始,该接口支持在原子化服务中使用。 |
placement | Placement | 否 | 气泡组件优先显示的位置,当前位置显示不下时,会自动调整位置。 默认值:Placement.Bottom 原子化服务API: 从API version 11开始,该接口支持在原子化服务中使用。 |
popupColor | number | Color | string | Resource | 否 | 提示气泡的颜色。如需去除模糊背景填充效果,需将backgroundBlurStyle设置为BlurStyle.NONE。 API version 10,默认值:‘#4d4d4d’ API version 11及以后,默认值:透明色TRANSPARENT加模糊背景填充效果COMPONENT_ULTRA_THICK 原子化服务API: 从API version 11开始,该接口支持在原子化服务中使用。 |
enableArrow | boolean | 否 | 是否显示箭头。 从API Version 9开始,如果箭头所在方位侧的气泡长度不足以显示下箭头,则会默认不显示箭头。比如:placement设置为Left,此时如果气泡高度小于箭头的宽度(32vp)与气泡圆角两倍(48vp)之和(80vp),则实际不会显示箭头。 默认值:true 原子化服务API: 从API version 11开始,该接口支持在原子化服务中使用。 |
autoCancel | boolean | 否 | 页面有操作时,是否自动关闭气泡。 默认值:true 说明: 如果要实现点击气泡内消失需要在builder中先放一个布局组件,然后再将Popup高级组件放在布局组件里面,再在布局组件的onClick事件中修改的传入bindPopup的变量(show: boolean)值。 原子化服务API: 从API version 11开始,该接口支持在原子化服务中使用。 |
onStateChange | (event: { isVisible: boolean }) => void | 否 | 弹窗状态变化事件回调,参数为弹窗当前的显示状态。 原子化服务API: 从API version 11开始,该接口支持在原子化服务中使用。 |
arrowOffset9+ | Length | 否 | popup箭头在弹窗处的偏移。箭头在气泡上下方时,数值为0表示箭头居最左侧,偏移量为箭头至最左侧的距离,默认居中。箭头在气泡左右侧时,偏移量为箭头至最上侧的距离,默认居中。如果显示在屏幕边缘,气泡会自动左右偏移,数值为0时箭头始终指向绑定组件。 原子化服务API: 从API version 11开始,该接口支持在原子化服务中使用。 |
showInSubWindow9+ | boolean | 否 | 是否在子窗口显示气泡,默认值为false。 原子化服务API: 从API version 11开始,该接口支持在原子化服务中使用。 |
maskColor(deprecated) | Resource | string | number | Color | 否 | 设置气泡遮罩层颜色。 说明: 从 API version 10 开始废弃,建议使用 mask 替代。 |
mask10+ | boolean | { color : ResourceColor } | 否 | 设置气泡是否有遮罩层及遮罩颜色。如果设置为false,则没有遮罩层;如果设置为true,则设置有遮罩层并且颜色为透明色;如果设置为Color,则为遮罩层的颜色。 原子化服务API: 从API version 11开始,该接口支持在原子化服务中使用。 |
targetSpace10+ | Length | 否 | 设置popup与目标的间隙。 原子化服务API: 从API version 11开始,该接口支持在原子化服务中使用。 |
offset10+ | Position | 否 | 设置popup组件相对于placement设置的显示位置的偏移。 说明: 不支持设置百分比。 原子化服务API: 从API version 11开始,该接口支持在原子化服务中使用。 |
width11+ | Dimension | 否 | 弹窗宽度。 说明: showInSubWindow=true时最大高度为设备屏幕高度,showInSubWindow=false时最大高度为应用窗口高度。高度限定逻辑=最大高度-状态栏高度(没有时高度为0)-dock栏高度(没有时高度为0)-40VP-40VP。 原子化服务API: 从API version 12开始,该接口支持在原子化服务中使用。 |
arrowPointPosition11+ | ArrowPointPosition | 否 | 气泡尖角相对于父组件显示位置,气泡尖角在垂直和水平方向上有 ”Start“、”Center“、”End“三个位置点可选。以上所有位置点均位于父组件区域的范围内,不会超出父组件的边界范围。 原子化服务API: 从API version 12开始,该接口支持在原子化服务中使用。 |
arrowWidth11+ | Dimension | 否 | 设置箭头宽度。若所设置的箭头宽度超过所在边的长度减去两倍的气泡圆角大小,则不绘制气泡箭头。 默认值:16.0_vp 说明: 不支持设置百分比。 原子化服务API: 从API version 12开始,该接口支持在原子化服务中使用。 |
arrowHeight11+ | Dimension | 否 | 设置箭头高度。 默认值:8.0_vp 说明: 不支持设置百分比。 原子化服务API: 从API version 12开始,该接口支持在原子化服务中使用。 |
radius11+ | Dimension | 否 | 设置气泡圆角半径。 默认值:20.0_vp 原子化服务API: 从API version 12开始,该接口支持在原子化服务中使用。 |
shadow11+ | ShadowOptions | ShadowStyle | 否 | 设置气泡阴影。 默认值:ShadowStyle.OUTER_DEFAULT_MD 原子化服务API: 从API version 12开始,该接口支持在原子化服务中使用。 |
backgroundBlurStyle11+ | BlurStyle | 否 | 设置气泡模糊背景参数。 默认值:BlurStyle.COMPONENT_ULTRA_THICK 原子化服务API: 从API version 12开始,该接口支持在原子化服务中使用。 |
focusable11+ | boolean | 否 | 设置气泡弹出后是否获焦。 默认值:false 原子化服务API: 从API version 12开始,该接口支持在原子化服务中使用。 |
transition12+ | TransitionEffect | 否 | 自定义设置popup弹窗显示和退出的动画效果。 说明: 如果不设置,则使用默认的显示/退出动效。 2.显示动效中按back键,打断显示动效,执行退出动效,动画效果为显示动效与退出动效的曲线叠加后的效果。 3.退出动效中按back键,不会打断退出动效,退出动效继续执行,back键不被响应。 |
onWillDismiss12+ | boolean|(dismissPopupAction: DismissPopupAction) => void | 否 | 设置popup交互式关闭拦截开关及拦截回调函数,默认值为true,popup响应点击、左滑/右滑、三键back。 1.当为boolean类型时,如果设置为false,则不响应点击、左滑/右滑、三键back或键盘ESC退出事件,仅当设置“弹窗显示状态”参数show值为false时才退出;如果设置为true,则正常响应退出事件; 2.如果设置为函数类型,则拦截退出事件且执行回调函数。 说明: 在onWillDismiss回调中,不能再做onWillDismiss拦截。 |
示例
示例1
// xxx.ets
@Entry
@Component
struct PopupExample {
@State handlePopup: boolean = false
@State customPopup: boolean = false
// popup构造器定义弹框内容
@Builder popupBuilder() {
Row({ space: 2 }) {
Image($r("app.media.icon")).width(24).height(24).margin({ left: -5 })
Text('Custom Popup').fontSize(10)
}.width(100).height(50).padding(5)
}
build() {
Flex({ direction: FlexDirection.Column }) {
// PopupOptions 类型设置弹框内容
Button('PopupOptions')
.onClick(() => {
this.handlePopup = !this.handlePopup
})
.bindPopup(this.handlePopup, {
message: 'This is a popup with PopupOptions',
placementOnTop: true,
showInSubWindow:false,
primaryButton: {
value: 'confirm',
action: () => {
this.handlePopup = !this.handlePopup
console.info('confirm Button click')
}
},
// 第二个按钮
secondaryButton: {
value: 'cancel',
action: () => {
this.handlePopup = !this.handlePopup
console.info('cancel Button click')
}
},
onStateChange: (e) => {
console.info(JSON.stringify(e.isVisible))
if (!e.isVisible) {
this.handlePopup = false
}
}
})
.position({ x: 100, y: 150 })
// CustomPopupOptions 类型设置弹框内容
Button('CustomPopupOptions')
.onClick(() => {
this.customPopup = !this.customPopup
})
.bindPopup(this.customPopup, {
builder: this.popupBuilder,
placement: Placement.Top,
mask: {color:'#33000000'},
popupColor: Color.Yellow,
enableArrow: true,
showInSubWindow: false,
onStateChange: (e) => {
if (!e.isVisible) {
this.customPopup = false
}
}
})
.position({ x: 80, y: 300 })
}.width('100%').padding({ top: 5 })
}
}
ts
示例2
// xxx.ets
@Entry
@Component
struct PopupExample {
@State handlePopup: boolean = false
@State customPopup: boolean = false
// popup构造器定义气泡内容
@Builder popupBuilder() {
Row() {
Text('Custom Popup Message').fontSize(10)
}.height(50).padding(5)
}
build() {
Column({space: 100}) {
Button('PopupOptions')
.onClick(() => {
this.handlePopup = !this.handlePopup
})
.bindPopup(this.handlePopup, { // PopupOptions类型气泡的内容
message: 'This is a popup with PopupOptions',
messageOptions: { // 气泡的文本样式
textColor: Color.Red,
font: {
size: '14vp',
style: FontStyle.Italic,
weight: FontWeight.Bolder
}
},
placement: Placement.Bottom,
enableArrow: false,
targetSpace: '15vp',
onStateChange: (e) => {
console.info(JSON.stringify(e.isVisible))
if (!e.isVisible) {
this.handlePopup = false
}
}
})
Button('CustomPopupOptions')
.onClick(() => {
this.customPopup = !this.customPopup
})
.bindPopup(this.customPopup, { // CustomPopupOptions类型气泡的内容
builder: this.popupBuilder,
targetSpace: '15vp',
enableArrow: false, // 气泡弹出时不显示箭头
onStateChange: (e) => {
if (!e.isVisible) {
this.customPopup = false
}
}
})
}.margin(20)
}
}
ts
示例3
// xxx.ets
@Entry
@Component
struct PopupExample {
@State customPopup: boolean = false
@State handlePopup: boolean = false
build() {
Column({ space: 100 }) {
Button("popup")
.margin({ top: 50 })
.onClick(() => {
this.customPopup = !this.customPopup
})
.bindPopup(this.customPopup, {
message: "this is a popup",
arrowHeight: 20, // 设置气泡箭头高度
arrowWidth: 20, // 设置气泡箭头宽度
radius: 20, // 设置气泡的圆角
shadow: ShadowStyle.OUTER_DEFAULT_XS, // 设置气泡的阴影
})
Button('PopupOptions')
.onClick(() => {
this.handlePopup = !this.handlePopup
})
.bindPopup(this.handlePopup, {
width: 300,
message: 'This is a popup with PopupOptions',
arrowPointPosition: ArrowPointPosition.START, // 设置箭头的位置
backgroundBlurStyle: BlurStyle.NONE, // 关闭气泡的模糊背景
popupColor: Color.Red, // 设置气泡的背景色
autoCancel: true,
})
}
.width('100%')
}
}
ts
示例4
本示例通过transition实现了自定义气泡显示/退出动效。
// xxx.ets
@Entry
@Component
struct PopupExample {
@State handlePopup: boolean = false
@State customPopup: boolean = false
// popup构造器定义弹框内容
@Builder popupBuilder() {
Row() {
Text('Custom Popup with transitionEffect').fontSize(10)
}.height(50).padding(5)
}
build() {
Flex({ direction: FlexDirection.Column }) {
// PopupOptions 类型设置弹框内容
Button('PopupOptions')
.onClick(() => {
this.handlePopup = !this.handlePopup
})
.bindPopup(this.handlePopup, {
message: 'This is a popup with transitionEffect',
placementOnTop: true,
showInSubWindow: false,
onStateChange: (e) => {
console.info(JSON.stringify(e.isVisible))
if (!e.isVisible) {
this.handlePopup = false
}
},
// 设置弹窗显示动效为透明度动效与平移动效的组合效果,无退出动效
transition:TransitionEffect.asymmetric(
TransitionEffect.OPACITY.animation({ duration: 1000, curve: Curve.Ease }).combine(
TransitionEffect.translate({ x: 50, y: 50 })),
TransitionEffect.IDENTITY)
})
.position({ x: 100, y: 150 })
// CustomPopupOptions 类型设置弹框内容
Button('CustomPopupOptions')
.onClick(() => {
this.customPopup = !this.customPopup
})
.bindPopup(this.customPopup, {
builder: this.popupBuilder,
placement: Placement.Top,
showInSubWindow: false,
onStateChange: (e) => {
if (!e.isVisible) {
this.customPopup = false
}
},
// 设置弹窗显示动效与退出动效为缩放动效
transition:TransitionEffect.scale({ x: 1, y: 0 }).animation({ duration: 500, curve: Curve.Ease })
})
.position({ x: 80, y: 300 })
}.width('100%').padding({ top: 5 })
}
}
ts
示例5
// xxx.ets
//该示例实现了设置bindPopup的onWillDismiss属性为回调函数时,拦截退出事件并执行回调函数
@Entry
@Component
struct PopupExample {
@State handlePopup: boolean = false
build() {
Column() {
Button('PopupOptions')
.onClick(() => {
this.handlePopup = true
})
.bindPopup(this.handlePopup, {
message: 'This is a popup with PopupOptions',
messageOptions: {
textColor: Color.Red,
font: {
size: '14vp',
style: FontStyle.Italic,
weight: FontWeight.Bolder
}
},
placement: Placement.Bottom,
enableArrow: false,
targetSpace: '15vp',
onStateChange: (e) => {
if (!e.isVisible) {
this.handlePopup = false
}
},
onWillDismiss: (
(dismissPopupAction: DismissPopupAction) => {
console.info("dismissReason:" + JSON.stringify(dismissPopupAction.reason))
if (dismissPopupAction.reason == DismissReason.PRESS_BACK) {
dismissPopupAction.dismiss()
}
}
)
})
}.margin(20)
}
}
ts
示例6
// xxx.ets
//该示例实现了设置bindPopup的onWillDismiss属性为false时,拦截退出事件
@Entry
@Component
struct PopupExample {
@State handlePopup: boolean = false
build() {
Column() {
Button('PopupOptions')
.onClick(() => {
this.handlePopup = true
})
.bindPopup(this.handlePopup, {
message: 'This is a popup with PopupOptions',
messageOptions: {
textColor: Color.Red,
font: {
size: '14vp',
style: FontStyle.Italic,
weight: FontWeight.Bolder
}
},
placement: Placement.Bottom,
enableArrow: false,
targetSpace: '15vp',
onStateChange: (e) => {
let timer = setTimeout(()=>{this.handlePopup = false},6000)
if (!e.isVisible) {
this.handlePopup = false
clearTimeout(timer)
}
},
onWillDismiss: false
})
}.margin(20)
}
}
ts
最后
有很多小伙伴不知道学习哪些鸿蒙开发技术?不知道需要重点掌握哪些鸿蒙应用开发知识点?而且学习时频繁踩坑,最终浪费大量时间。所以有一份实用的鸿蒙(HarmonyOS NEXT)资料用来跟着学习是非常有必要的。
这份鸿蒙(HarmonyOS NEXT)资料包含了鸿蒙开发必掌握的核心知识要点,内容包含了(ArkTS、ArkUI开发组件、Stage模型、多端部署、分布式应用开发、音频、视频、WebGL、OpenHarmony多媒体技术、Napi组件、OpenHarmony内核、OpenHarmony南向开发、鸿蒙项目实战等等)鸿蒙(HarmonyOS NEXT)技术知识点。
希望这一份鸿蒙学习资料能够给大家带来帮助,有需要的小伙伴自行领取,限时开源,先到先得~无套路领取!!
获取这份完整版高清学习路线,请点击→纯血版全套鸿蒙HarmonyOS NEXT学习资料
鸿蒙(HarmonyOS NEXT)最新学习路线
-
HarmonOS基础技能
- HarmonOS就业必备技能
- HarmonOS多媒体技术
- 鸿蒙NaPi组件进阶
- HarmonOS高级技能
- 初识HarmonOS内核
- 实战就业级设备开发
有了路线图,怎么能没有学习资料呢,小编也准备了一份联合鸿蒙官方发布笔记整理收纳的一套系统性的鸿蒙(OpenHarmony )学习手册(共计1236页)与鸿蒙(OpenHarmony )开发入门教学视频,内容包含:ArkTS、ArkUI、Web开发、应用模型、资源分类…等知识点。
获取以上完整版高清学习路线,请点击→纯血版全套鸿蒙HarmonyOS NEXT学习资料
《鸿蒙 (OpenHarmony)开发入门教学视频》
《鸿蒙生态应用开发V2.0白皮书》
《鸿蒙 (OpenHarmony)开发基础到实战手册》
OpenHarmony北向、南向开发环境搭建
《鸿蒙开发基础》
- ArkTS语言
- 安装DevEco Studio
- 运用你的第一个ArkTS应用
- ArkUI声明式UI开发
- .……
《鸿蒙开发进阶》
- Stage模型入门
- 网络管理
- 数据管理
- 电话服务
- 分布式应用开发
- 通知与窗口管理
- 多媒体技术
- 安全技能
- 任务管理
- WebGL
- 国际化开发
- 应用测试
- DFX面向未来设计
- 鸿蒙系统移植和裁剪定制
- ……
《鸿蒙进阶实战》
- ArkTS实践
- UIAbility应用
- 网络案例
- ……
获取以上完整鸿蒙HarmonyOS学习资料,请点击→纯血版全套鸿蒙HarmonyOS NEXT学习资料
总结
总的来说,华为鸿蒙不再兼容安卓,对中年程序员来说是一个挑战,也是一个机会。只有积极应对变化,不断学习和提升自己,他们才能在这个变革的时代中立于不败之地。