最近鸿蒙HarmonyOS开发相关的消息非常的火,传言华为系手机后续将不再支持原生Android应用,所以对于原Android应用开发对应的Harmony版本也被一系列大厂提上了日程。作为一个名义上的移动端开发工程师((⊙o⊙)…,最近写python多过Android),当人不让要来学习一波。本次的学习计划是实现一个类微信app效果,计划将常规的app效果都实现一下,以便后续如果需要写Harmony应用,可以直接上手。
由于我本人有多年的开发经验和多种语言的开发经验,对于Javascript
和TypeScript
也写得比较多,所以对于TypeScript
语法部分将不再过多说明,想快速了解到的同学可以直接查看我的快速入门TypeScript
系列文章。同时,文章中设计到的我认为比较重要的知识点,会在文章中作说明。
功能拆分
上面只是一个简单的拆分示例,当我们拿到一个功能的时候,一定要先将页面进行拆分,当我们要实现的功能通过一个个子模块实现后,最终通过子模块的拼接,就可以得到一个完整的功能。
细节实现
今天第一课,先实现整体的界面搭建,最终的实现效果如下图。
当我们点击之后,可以切换上面的tab内容界面。
Harmony提供了很多种方式可以实现底部导航栏,真实项目使用的话,大家可以直接使用系统提供的方式即可。这里我采用的方式是自己用最基础的代码实现,这样也能联系到一些想要学习的功能,开箱即用是好的,但是也很容易让我们错过很多关键知识。
实现BottomNavigationItem
我们这里整体的底部是一个BottomNavigation
,他是由四个BottomNavigationItem
组合实现。首先定义一个实体类,用于存贮底部导航栏对象信息。
export class BottomNavigationEntity {
/**
* 底部导航tab标题
*/
title: Resource;
/**
* 底部导航tab图片
*/
image: Resource;
/**
* 底部导航tab图片,未选中
*/
unCheckImage: Resource;
/**
* tab类型标志位
*/
tag: number;
constructor(tag: number, title: Resource, image: Resource, unCheckImage: Resource) {
this.tag = tag;
this.title = title;
this.image = image;
this.unCheckImage = unCheckImage;
}
}
接下来的
组成是一个图标+一个文字组合而成,第一反应我们应该行到Column
组件。
Column
组件中,用于处理组件内容对其方式使用的话flex方式。 alignItems(value: HorizontalAlign): ColumnAttribute; # 水平方向
justifyContent(value: FlexAlign): ColumnAttribute; # 垂直方向
了解了这些之后,接下来看具体BottomNavigationItem
的封装代码。
@Preview # 方便单个view直接预览
@Component # 标记是一个组件,可供其他组件引用
export default struct BottomNavigationItem {
private navigationItem: BottomNavigationEntity;
# 这里的Link是用于父组件和子组件进行通信
@Link currentIndex: number;
build() {
Column({ space: 5 }) {
# 这里判断如果当前选中的item是当前的这个,则使用选中状态图片
Image(this.currentIndex === this.navigationItem.tag ? this.navigationItem.image : this.navigationItem.unCheckImage)
.width(24)
.height(24)
Text(this.navigationItem.title)
.fontSize(14)
.fontColor(this.currentIndex === this.navigationItem.tag ? Color.Green : 0x333333)
}
}
}
代码是不是非常简单。对于@Link
你如果现在不太清楚,也没有关系,我最终会专门进行一个讲解。
实现BottomNavigation
@Preview
@Component
export default struct BottomNavigation {
@Link currentItemIndex: number;
build() {
Row({ space: 5 }) {
// 这里通过对结合遍历,生成BottomNavigationItem进行填充BottomNavigation
ForEach(navigationViewModel.getNavigationList(), (item: BottomNavigationEntity, index: number) => {
# 对于这里的$currentItemIndex写法可以先将疑问留着,后续结合Link一并说明
BottomNavigationItem({ navigationItem: item, currentIndex: $currentItemIndex })
.onClick(() => {
# 点击后更新选中的item,以实现刷新界面的效果
this.currentItemIndex = index
})
})
}
.width('100%')
.height(65)
.padding({
top: 5,
bottom: 5
})
.justifyContent(FlexAlign.SpaceAround)
.backgroundColor(0xF3EEEA)
}
}
实现WechatMainFrame
整体的界面组合使用RelativeContainer
进行组合,将BottomNavigation
固定于屏幕的底部,内容区域底部在BottomNavigation
之上,顶部和屏幕顶部对其,使其填充满BottomNavigation
之上的部分。内容区域使用Stack
将所有的内容层叠展示,切换到哪个展示,则使用visibility
方法设置该页面展示即可。
@Entry
@Component
struct WechatMainFrame {
@State currentCheckIndex: number = 0;
build() {
RelativeContainer() {
BottomNavigation({ currentItemIndex: $currentCheckIndex })
.alignRules({
bottom: { anchor: "__container__", align: VerticalAlign.Bottom },
left: { anchor: "__container__", align: HorizontalAlign.Start }
})
.id("bottomNavigation")
Stack() {
HomeFragment().visibility(this.currentCheckIndex == 0 ? Visibility.Visible : Visibility.Hidden)
ContactFragment().visibility(this.currentCheckIndex == 1 ? Visibility.Visible : Visibility.Hidden)
DiscoverFragment().visibility(this.currentCheckIndex == 2 ? Visibility.Visible : Visibility.Hidden)
MeFragment().visibility(this.currentCheckIndex == 3 ? Visibility.Visible : Visibility.Hidden)
}
.width('100%')
.height('100%')
.alignRules({
left: { anchor: "__container__", align: HorizontalAlign.Start },
right: { anchor: "__container__", align: HorizontalAlign.End },
bottom: { anchor: "bottomNavigation", align: VerticalAlign.Top },
top: { anchor: "__container__", align: VerticalAlign.Top }
})
.id("contentPanel")
}
.width('100%').height('100%')
}
}
入口页面EntryAbility
export default class EntryAbility extends UIAbility {
...
onWindowStageCreate(windowStage: window.WindowStage) {
// Main window is created, set main page for this ability
hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onWindowStageCreate');
windowStage.loadContent('pages/WechatMainFrame', (err, data) => {
if (err.code) {
hilog.error(0x0000, 'testTag', 'Failed to load the content. Cause: %{public}s', JSON.stringify(err) ?? '');
return;
}
hilog.info(0x0000, 'testTag', 'Succeeded in loading the content. Data: %{public}s', JSON.stringify(data) ?? '');
});
}
...
至此整个页面的框架结构完成了。
关于@Link相关的说明
关于更详细的内容,可以看官方文章说明。
我们对于视图更新,可以使用@State
标记变量,但是@State
不能进行跨文件使用。这个时候@Link
的实现就弥补了@State
的不足。使用@Link
的话。子组件中被@Link
装饰的变量与其父组件中对应的数据源建立双向数据绑定。
- @Link装饰的变量与其父组件中的数据源共享相同的值。
- @Link装饰器不能在@Entry装饰的自定义组件中使用。
- @Link子组件从父组件初始化@State的语法为Comp({ aLink: this.aState })。同样Comp({aLink: $aState})也支持。
下面我们回到上面的代码中。结合代码进行分析。 当我们在BottomNavigation
中.onClick(() => { this.currentItemIndex = index })
在点击之后,会更改@Link currentItemIndex: number;
触发界面ui的更改。而BottomNavigationItem({ navigationItem: item, currentIndex: $currentItemIndex })
中,我们需要把选中的item的index
值传递给BottomNavigationItem
本身。而作为传递的值,则需要使用\$
标记。这样点击之后会将BottomNavigationItem
的值也触发更改,以达到更改布局效果。BottomNavigationItem\
的判断也会根据这个值变化而变化。
点击之后,除了对BottomNavigation
的状态更新之外,还需要对内容区域进行判断展示不同的界面。因此BottomNavigation
的@Link currentItemIndex: number;
又要和WechatMainFrame
的 @State currentCheckIndex: number = 0;
进行双向绑定BottomNavigation({ currentItemIndex: $currentCheckIndex })
。最终当我们点击BottomNavigation
的onclick
的时候,就会向上和WechatMainFrame
双向绑定更改内容区域,也会和BottomNavigationItem
双向绑定更改底部导航展示。
由于我自己也是在边学边实现功能逻辑,既要写文章,还要实现代码功能,所以更新大体上控制在2~3天更新一篇,文章中尽可能会将我觉得比较重要的知识点拎出来说明。对于看完还不太清楚的,可以私信或者查阅其他文章了解,知识的获取不应该被局限,希望我的文章给你带来帮助。
码牛课堂也为了积极培养鸿蒙生态人才,让大家都能学习到鸿蒙开发最新的技术,针对一些在职人员、0基础小白、应届生/计算机专业、鸿蒙爱好者等人群,整理了一套纯血版鸿蒙(HarmonyOS Next)全栈开发技术的学习路线。大家可以进行参考学习:https://qr21.cn/FV7h05
①全方位,更合理的学习路径:
路线图包括ArkTS基础语法、鸿蒙应用APP开发、鸿蒙能力集APP开发、次开发多端部署开发、物联网开发等九大模块,六大实战项目贯穿始终,由浅入深,层层递进,深入理解鸿蒙开发原理!②多层次,更多的鸿蒙原生应用:
路线图将包含完全基于鸿蒙内核开发的应用,比如一次开发多端部署、自由流转、元服务、端云一体化等,多方位的学习内容让学生能够高效掌握鸿蒙开发,少走弯路,真正理解并应用鸿蒙的核心技术和理念。③实战化,更贴合企业需求的技术点:
学习路线图中的每一个技术点都能够紧贴企业需求,经过多次真实实践,每一个知识点、每一个项目,都是码牛课堂鸿蒙研发团队精心打磨和深度解析的成果,注重对学生的细致教学,每一步都确保学生能够真正理解和掌握。
为了能让大家更好的学习鸿蒙(HarmonyOS NEXT)开发技术,这边特意整理了《鸿蒙开发学习手册》(共计890页),希望对大家有所帮助:https://qr21.cn/FV7h05
《鸿蒙开发学习手册》:https://qr21.cn/FV7h05
如何快速入门:
- 基本概念
- 构建第一个ArkTS应用
- ……
开发基础知识:https://qr21.cn/FV7h05
- 应用基础知识
- 配置文件
- 应用数据管理
- 应用安全管理
- 应用隐私保护
- 三方应用调用管控机制
- 资源分类与访问
- 学习ArkTS语言
- ……
基于ArkTS 开发:https://qr21.cn/FV7h05
- Ability开发
- UI开发
- 公共事件与通知
- 窗口管理
- 媒体
- 安全
- 网络与链接
- 电话服务
- 数据管理
- 后台任务(Background Task)管理
- 设备管理
- 设备使用信息统计
- DFX
- 国际化开发
- 折叠屏系列
- ……
鸿蒙开发面试真题(含参考答案):https://qr21.cn/FV7h05
大厂鸿蒙面试题::https://qr18.cn/F781PH
鸿蒙开发面试大盘集篇(共计319页):https://qr18.cn/F781PH
1.项目开发必备面试题
2.性能优化方向
3.架构方向
4.鸿蒙开发系统底层方向
5.鸿蒙音视频开发方向
6.鸿蒙车载开发方向
7.鸿蒙南向开发方向