鸿蒙HarmonyOS项目实战：实现微信app效果（基础界面搭建）_鸿蒙原生开发微信(1)

最新推荐文章于 2024-08-21 15:54:02 发布

2301_78399616

最新推荐文章于 2024-08-21 15:54:02 发布

阅读量1k

点赞数 9

分类专栏： 2024年程序员学习文章标签： harmonyos 微信华为

本文链接：https://blog.csdn.net/2301_78399616/article/details/137938234

版权

2024年程序员学习专栏收录该内容

113 篇文章 0 订阅

订阅专栏

先自我介绍一下，小编浙江大学毕业，去过华为、字节跳动等大厂，目前阿里P7

深知大多数程序员，想要提升技能，往往是自己摸索成长，但自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年最新HarmonyOS鸿蒙全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友。

htt

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上鸿蒙开发知识点，真正体系化！

由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新

如果你需要这些资料，可以添加V获取：vip204888 （备注鸿蒙）

正文

最近鸿蒙HarmonyOS开发相关的消息非常的火，后续将不再支持原生Android应用，所以对于原Android应用开发对应的Harmony版本也被一系列大厂提上了日程。

本次内容是实现一个类微信app效果，计划将常规的app效果都实现一下。

功能拆分

在这里插入图片描述

上面只是一个简单的拆分示例，当我们拿到一个功能的时候，一定要先将页面进行拆分，当我们要实现的功能通过一个个子模块实现后，最终通过子模块的拼接，就可以得到一个完整的功能。

细节实现

今天第一课，先实现整体的界面搭建，最终的实现效果如下图。

当我们点击之后，可以切换上面的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) ?? ‘’);
});
}
…

至此整个页面的框架结构完成了。