开发准备

上一节我们针对首页的一些静态按钮做了一些功能上的完善，这一节我们要针对已有的功能做一下逻辑完善，经过测试，在一开始的登录中我们登录之后当前页面的状态并不能马上的展示出来，并且缺少退出功能，退出后我们同样要立马让页面修改为用户未登录的状态，在个人中心页面关于功能缺失，这一节我们就来完善对应的内容

功能分析

要实现状态的修改，我们在登录以及退出登录页面间通信采用emitter来发送和接收消息，在消息接收成功后的回调里修改当前页面的参数，同时销毁存储的用户信息，关于页面我们直接添加当前应用以及作者的信息即可，同时为了能更好的方便同学们查看其他内容，在关于中我使用webview展示了某站的个人主页，可以查看最新的文章列表，同时在个人信息页面添加退出按钮和对应逻辑

代码实现

首先修改登录页面添加对应的逻辑，用来发送我们的登录状态

 async login(): Promise<void>{if (this.acc===''&&this.psw==='') {promptAction.showToast({message:"请输入账号或密码"})return}else {let condition = new cloudDatabase.DatabaseQuery(user);condition.equalTo("user_name",this.acc).and().equalTo("psw",this.psw)let listData = await databaseZone.query(condition);let json = JSON.stringify(listData)let data1:User[]= JSON.parse(json)if (data1.length>0) {if (data1[0].is_log_off) {promptAction.showDialog({title: '提示',message: '改账号已经注销',buttons: [{text: '去处理',color: '#ffffff'},{text: '关闭',color: '#ffffff'}],}).then(data => {showToast(data.index+"")console.info('showDialog success, click button: ' + data.index);}).catch((err: Error) => {console.info('showDialog error: ' + err);})}else {let eventData: emitter.EventData = {data: {}};let innerEvent: emitter.InnerEvent = {eventId: 2001,priority: emitter.EventPriority.HIGH};emitter.emit(innerEvent, eventData);StorageUtils.set("user",JSON.stringify(data1[0]))router.back({url: 'pages/Index',params: {info: user}});}}else {showToast("请检查用户名或密码")}hilog.info(0x0000, 'testTag', `Succeeded in querying data, result: ${data1}`);}}

在这里我们通知后在我的页面组件中去接收，同时查询用户信息赋值，实现修改页面状态

aboutToAppear(): void {let innerEvent: emitter.InnerEvent = {eventId: 2001};let callback: Callback<emitter.EventData> = async (eventData: emitter.EventData) => {console.info(`eventData: ${JSON.stringify(eventData)}`);const value = await StorageUtils.getAll('user');if (value != "") {this.user = JSON.parse(value)if (this.user != null) {let databaseZone = cloudDatabase.zone('default');let condition = new cloudDatabase.DatabaseQuery(user_info);condition.equalTo("user_id", this.user?.user_id)let listData = await databaseZone.query(condition);let json = JSON.stringify(listData)let data2: UserInfo[] = JSON.parse(json)this.userInfo = data2[0]hilog.error(0x0000, 'testTag', `Failed to query data, code: ${data2}`);}}else {this.userInfo=nullthis.user=null}}emitter.on(innerEvent, callback);}

完成之后我们在个人信息页面新增退出按钮，添加发送事件，以及清空用户信息缓存

 Text("退出").width('50%').height(45).fontColor(Color.White).fontSize(16).textAlign(TextAlign.Center).backgroundColor("#fffc1515").borderRadius(10).margin({top:20}).onClick(()=>{StorageUtils.remove('user')router.back()let eventData: emitter.EventData = {data: {}};let innerEvent: emitter.InnerEvent = {eventId: 2001,priority: emitter.EventPriority.HIGH};emitter.emit(innerEvent, eventData);})

查看一下当前个人信息页面的样式

我们继续实现关于页面的逻辑，在这个页面我们只需要填充对应的信息即可，只需要注意跳转到web页面的事件

import { CommonTopBar } from '../widget/CommonTopBar';
import { router } from '@kit.ArkUI';
import { WebUrlModel } from '../model/WebUrlModel';@Entry
@Component
struct AboutPage {@State message: string = 'Hello World';build() {Column() {CommonTopBar({ title: "关于", alpha: 0, titleAlignment: TextAlign.Center ,backButton:true})Column({space:20}){Image($r('app.media.e_logo')).height(200).width(200).borderRadius(10).margin({top:20})Text("一款端云一体化的购物App").fontSize(16).fontWeight(FontWeight.Bold).fontColor(Color.Black)Text("开发者：鸿蒙小林").fontSize(16).fontWeight(FontWeight.Bold).fontColor(Color.Black)Text("点击查看app对应说明文章").fontSize(16).fontWeight(FontWeight.Bold).fontColor(Color.Blue).onClick(()=>{let url: WebUrlModel = {url: 'https://blog.csdn.net/qq_43238112?spm=1001.2014.3001.10640'};router.pushUrl({url:'pages/view/WebPage',params:url})})}.backgroundColor(Color.White).height('100%').width('100%').alignItems(HorizontalAlign.Center)}.height('100%').width('100%')}
}

运行代码查看效果

点击后跳转到对应的web 展示页面

import { webview } from '@kit.ArkWeb';
import { router } from '@kit.ArkUI';
import { WebUrlModel } from '../model/WebUrlModel';
import { CommonTopBar } from '../widget/CommonTopBar';@Entry
@Component
struct WebPage {@State urlInfo: WebUrlModel = null!;@State mode: MixedMode = MixedMode.All;aboutToAppear(): void {this.urlInfo = router.getParams() as WebUrlModel}webController: webview.WebviewController = new webview.WebviewController();build() {Column() {CommonTopBar({ title: "我的主页", alpha: 0, titleAlignment: TextAlign.Center ,backButton:true})Web({ src: this.urlInfo.url, controller: this.webController }).height('100%').width('100%').mixedMode(this.mode).domStorageAccess(true)}.height('100%').width('100%')}
}

我们执行一下代码看看webview页面的展示效果

到这里我们就实现了对已有功能的业务逻辑完善了