大家好，江鸟中原鸿蒙展翅，今天小试牛刀给大家讲解一下HarmonyOS WeChat的开发过程。
HarmonyOS WeChat是基于鸿蒙3.0的ArkUI开发的仿微信界面，使用的是eTS开发范式，基于鸿蒙SDK3.0（API Version 7）。
该项目只有前端UI，无后端逻辑。
数据说明：
UI界面的显示数据通过数据模型进行定义更新，所有模型均位于ets/default/model下
data包中为数据结构定义
Model文件为模型接口
部分代码：
import { navigationBar } from '../common/components/navigationBar'
import { BottomTabs } from '../common/components/bottomTabs'
import { SessionTabContent } from '../common/components/tabcontent/SessionTabContent'
import { ContactTabContent } from '../common/components/tabcontent/ContactTabContent'
import { MeTabContent } from '../common/components/tabcontent/MeTabContent'
import { DiscoveryTabContent } from '../common/components/tabcontent/DiscoveryTabContent'
@Entry
@Component
struct Main {
private controller: TabsController = new TabsController()
@State bottomTabIndex: number = 0
@State title: Resource[] = [$r('app.string.title_wechat') ,$r('app.string.title_contact'),$r('app.string.title_discovery')]
build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.End, justifyContent: FlexAlign.End }) {
if(this.bottomTabIndex < 3){
navigationBar({title: this.title[this.bottomTabIndex] , isBack:false , isClose:false , isMenu: true , isSearch: true , isMore:false})
}
Tabs({ barPosition: BarPosition.End, index: 0, controller: this.controller }) {
TabContent() {
SessionTabContent()
}
TabContent() {
ContactTabContent()
}
TabContent() {
DiscoveryTabContent()
}
TabContent() {
MeTabContent()
}
}.onChange((index: number) => {
this.bottomTabIndex = index
})
.vertical(false)
.barHeight(0)
.width('100%')
.scrollable(true)
BottomTabs({ controller: this.controller, bottomTabIndex: $bottomTabIndex })
}
.backgroundColor($r('app.color.white'))
.width('100%').height('100%')
}
}朋友圈代码：
@Entry
@Component
struct Moments {
private name: string = '刘备'
private momentItems: MomentData[] = getMomentDatas()
build(){
Column(){
Stack({ alignContent: Alignment.Top }){
Image($rawfile('discovery_bg.jpg'))
.objectFit(ImageFit.Cover)
.height(250)
.width('100%')
Flex({direction: FlexDirection.Row , justifyContent: FlexAlign.SpaceBetween , alignItems: ItemAlign.Center}){
Image($r('app.media.ic_back_white'))
.height(30)
.width(30)
.margin({ left: 15})
.onClick(() => {
router.back()
})
Image($r('app.media.ic_camera'))
.height(30)
.width(30)
.margin({ right: 15})
}.width('100%').height(60).zIndex(1)
Flex({direction: FlexDirection.Row , justifyContent: FlexAlign.End , alignItems: ItemAlign.End}){
Text(this.name)
.margin({bottom: 35 , right: 10})
.fontFamily($r('sys.float.id_text_size_body1'))
.fontColor($r('app.color.white'))
.fontSize(18)
.maxLines(1)
Image($rawfile('header1.png'))
.width(75).height(75)
.borderRadius(8)
.margin({right: 15})
}.width('100%').height(280)
}.width('100%').height(280)
List(){
ForEach(this.momentItems , item=>{
ListItem() {
MomentListItem({ momentItem: item })
}
})
}
.width('100%')
.layoutWeight(1)
}
}
}聊天页面：
build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Start, justifyContent: FlexAlign.SpaceBetween }) {
navigationBar({title: this.sessionData.name, isBack:true , isClose:false , isMenu: false , isSearch: false , isMore:true})
List(){
ForEach(this.msgsItems , item=>{
ListItem() {
MessageListItem({ msgItem: item })
}
},item => item.mid)
}.padding({top:10 , bottom: 10})
.width('100%')
messageBottom()
}
.width('100%')
.height('100%')
.backgroundColor($r('app.color.grey0'))
}运行截图：
