企业官网建设流程全解析

Harmony鸿蒙实战开发-博客新闻app「首页、广场、体系、公众号、我的、登录注册、并可收藏进行查看」【源码在文末】

运行工具：DevEco Studio

一、运行演示

1、首页

2、广场

3、体系

4-1、公众号界面

4-2、公众号内容

5、我的-未登录

6、登录注册提醒

7、登录注册

8、我的-登录后

9、收藏内容

二、部分代码

import router from '@ohos.router' import promptAction from '@ohos.promptAction' import Api from '../net/Api' import UserService, { User } from '../service/UserService' import { LoadState, PageLoading } from '../widget/PageLoading' import { TitleLayout } from '../widget/TitleLayout' class UserInfo { name: string level: string rank: string point: string } @Component export struct Mine { @State loadState: LoadState = LoadState.SUCCESS; @State showLoading: boolean = false; @State title: string = ""; private unLoginInfo: UserInfo = { name: "未登录", level: "", rank: "", point: "" } @State userInfo: UserInfo = this.unLoginInfo; @State isLogin: boolean = false; private userObserver = (user?: User) => { if (user) { this.isLogin = true; this.userInfo = { name: user.nickname, level: user.level, rank: user.rank, point: user.coinCount.toString() } } else { this.isLogin = false; this.userInfo = this.unLoginInfo } } aboutToAppear() { UserService.get().addUserObserver(this.userObserver); let user = UserService.get().getUser(); this.userObserver(user); } aboutToDisappear() { UserService.get().removeUserObserver(this.userObserver); } clickUrl( url: string ) { router.pushUrl({ url: 'pages/WebPage', params: { url: url } }); } async logout() { let res = await promptAction.showDialog({ title: "提示", message: "确认退出登录？", buttons: [ { text: "确认", color: $r("app.color.main") }, { text: "取消", color: $r("app.color.text_h2") } ] }) if (res.index === 0) { await Api.get().logout(); UserService.get().clearUser(); } } build() { PageLoading({ loadState: $loadState, showLoading: $showLoading }) { Column() { TitleLayout({ title: $title, isJustShowStatusBar: true }) Column() { Image($r("app.media.icon_fly")) .objectFit(ImageFit.Cover) .clip(new Circle({ width: 100, height: 100 })) // .borderWidth(20) // .borderColor(Color.Gray) // .borderRadius(20) .width(100) .height(100) Text(this.userInfo.name) .fontColor($r("app.color.text_h1")) .fontSize(17) .margin({ top: 16 }) Row({ space: 5 }) { Text("LV" + this.userInfo.level) .fontColor($r("app.color.white")) .fontSize(15) .backgroundColor($r("app.color.green")) .padding({ left: 4, top: 2, right: 4, bottom: 2 }) Text("排名" + this.userInfo.rank) .fontColor($r("app.color.white")) .fontSize(15) .backgroundColor($r("app.color.blue")) .padding({ left: 4, top: 2, right: 4, bottom: 2 }) } .margin({ top: 16 }).visibility(Visibility.None) Row({ space: 5 }) { Text("博客地址") .fontColor($r("app.color.white")) .fontSize(15) .backgroundColor($r("app.color.green")) .padding({ left: 4, top: 2, right: 4, bottom: 2 }) //Text("Ddup" + this.userInfo.rank) //.fontColor($r("app.color.white")) //.fontSize(15) //.backgroundColor($r("app.color.blue")) //.padding({ left: 4, top: 2, right: 4, bottom: 2 }) } .onClick(() => this.clickUrl('https://blog.csdn.net/m0_63324772')) .margin({ top: 16 }) Row({ space: 5 }) { Text("GitHub地址") .fontColor($r("app.color.white")) .fontSize(15) .backgroundColor($r("app.color.green")) .padding({ left: 4, top: 2, right: 4, bottom: 2 }) //Text("androideoe" + this.userInfo.rank) //.fontColor($r("app.color.white")) //.fontSize(15) //.backgroundColor($r("app.color.blue")) //.padding({ left: 4, top: 2, right: 4, bottom: 2 }) } .onClick(() => this.clickUrl('https://blog.csdn.net/m0_63324772')) .margin({ top: 16 }) } .margin({ top: 30 }) .alignItems(HorizontalAlign.Center) .onClick((e) => { UserService.get().checkLogin() }) Row() { Text("我的积分") .layoutWeight(1) .fontSize(15) .fontColor($r("app.color.text_h1")) Text(this.userInfo.point) .fontSize(15) .fontColor($r("app.color.text_h1")) } .width('100%') .height(50) .margin({ top: 50 }) .alignItems(VerticalAlign.Center) .padding({ left: 16, right: 16 }) .backgroundColor($r("app.color.white")) .onClick((e) => { UserService.get().checkLogin() }) Row() .width('100%') .height(0.5) .backgroundColor($r("app.color.divider")) Row() { Text("我的收藏") .layoutWeight(1) .fontSize(15) .fontColor($r("app.color.text_h1")) Image($r("app.media.ic_arrow_right")) .fillColor($r("app.color.text_h1")) .width(20) .height(20) } .width('100%') .height(50) .alignItems(VerticalAlign.Center) .padding({ left: 16, right: 16 }) .backgroundColor($r("app.color.white")) .onClick((event) => { UserService.get().checkLogin(() => { router.pushUrl({ url: "pages/CollectList" }) }) }) if (this.isLogin) { Column() { Button("退出登录", { type: ButtonType.Capsule }) .width('100%') .fontSize(15) .fontColor($r("app.color.white")) .backgroundColor($r("app.color.red")) .onClick((e) => { this.logout(); }) } .width('100%') .margin({ top: 50 }) .padding({ left: 16, right: 16 }) } } .width('100%') .height('100%') } } }

三、源码

相关鸿蒙项目点此专栏

通过百度网盘分享的文件：…zip 链接：百度网盘 请输入提取码

文件已经加密，请点击下方名片获取源码

或：Lvnvn0508