当前位置：首页 > backend >正文

11-帮助中心

backend 2025/5/22 10:36:02

涉及知识点: 1. Navigation系统路由表
2. @Provide和@Consume组件状态装饰器
3. RichText：富文本组件

1 任务

1.1 需求

从更多服务进入帮助中心，在帮助中心列表中选择常见问题，点击具体问题进入问题解答页面。

1.2 界面原型

点击帮助中心：

在这里插入图片描述

进入常见问题列表：

在这里插入图片描述

点击具体问题，进入问题详情：

在这里插入图片描述

2 预备知识

2.1 系统路由表

如何将Router切换到Navigation

官网指南：

https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/arkts-router-to-navigation-V5

3 改造导航页

3.1 ItemBean接口改造

在ItemBean中添加toPage属性保存要跳转页面的名称：

export default interface  ItemBean{title:stringicon?:ResourcetoPage?:string  //菜单页面名称}

3.2 改造MineModel类

修改getMoreServiceItems函数，添加跳转的页面名称：

  getMoreServiceItems(): Array<ItemBean> {let serviceItems: ItemBean[] = [{icon:$r('app.media.password'),title:'修改密码',toPage:'ModifyPwd'},{icon:$r('app.media.help'),title:'帮助中心',toPage:'HelpCenter'},{icon:$r('app.media.set'),title:'设置',toPage:'MySet'},{icon:$r('app.media.logout'),title:'退出登陆',toPage:'Logout'}]return serviceItems;}

3.3 改造导航页

改造Mine组件，添加路由栈变量，并将页面根容器改为Navigation：

  private pageInfosStack:NavPathStack = new NavPathStack()//页面路由栈build() {Navigation(this.pageInfosStack){Scroll(){...}.width('100%').backgroundColor('#f1f3f5')}.mode(NavigationMode.Stack)

Note:
NavigationMode枚举类型：
Stack：导航栏与内容区独立显示，相当于两个页面。
Split：导航栏与内容区分两栏显示。
Auto：窗口宽度>=600vp时，采用Split模式显示；窗口宽度<600vp时，采用Stack模式显示

3.4 点击菜单页面压栈操作

修改Mine组件的moreServiceItem函数添加点击事件，点击后跳转对应名称的页面，在最外层row上面添加单击事件：

    List(){ForEach(this.mineModel.getMoreServiceItems(),(item:ItemBean)=>{ListItem(){Row(){Row({space:5}){...}Image($r('app.media.right')).width(32).height(32)}....onClick(()=>{this.pageInfosStack.pushPathByName(item.toPage,item.title)})}},(item:ItemBean)=>JSON.stringify(item))}

4 新建帮助中心页面

在pages文件夹下，新建帮助中心页面，命名为：HelpCenterPage

@Builder
export function HelpCenterPageBuilder(name:string,param:Object){HelpCenterPage({title : param as string})}@Entry
@Component
struct HelpCenterPage {private title:string = '帮助中心';build() {NavDestination(){Text('常见问题列表')}.title(this.title)}
}

Note:
HelpCenterPageBuilder在系统路由表中调用，页面入口

5 配置系统路由表

在src/main/resources/base/profile下创建route_map.json文件，配置为如下内容：

{"routerMap": [{"name": "HelpCenter","pageSourceFile": "src/main/ets/pages/HelpCenterPage.ets","buildFunction": "HelpCenterPageBuilder","data": {"description" : "FAQ List"}}]
}

在src/main/module.json5中module的最后添加如下内容：

{"module": {..."extensionAbilities": [...],"routerMap": "$profile:route_map"//在此处添加}
}

在本地模拟器中测试效果（不要在预览器中测试，预览器不支持）：

从帮助中心进入：

在这里插入图片描述

进入后的帮助中心页面：

在这里插入图片描述

6 常见问题列表

界面原型：

在这里插入图片描述

6.1 封装问题接口

在model文件夹下新建arkts文件，命名为：QuestionBean：

export default interface QuestionBean {title: string;content: string;
}

6.2 准备数据

在model下新建ArkTS文件，命名为FaqModel：

export default class FaqModel {getFaqList():Array<QuestionBean>{let faqList:QuestionBean[] = [{title:'四大洋都是哪四大洋?',content:'<h1>四大洋是地球上四片广阔的海洋的总称，它们按照面积大小，从大到小依次为：太平洋、大西洋、印度洋和北冰洋。</h1>'},{title:'七大洲是哪七个?',content:'七大洲指地球陆地分成的七大部分，即亚洲、欧洲、非洲、北美洲、南美洲、大洋洲与南极洲。以下是这七大洲的简要介绍：\n' +'\n' +'亚洲：面积4400万平方千米，约占世界陆地总面积的29.4%，是世界第一大洲。共有48个国家和地区。人口45.4亿，约占世界总人口的60.5%。\n' +'欧洲：面积1016万平方千米，约占世界陆地总面积的6.8%，仅大于大洋洲，是世界第六大洲。共有37个国家和地区。人口7.4亿，约占世界总人口的10.4%，居世界第三位。\n' +'非洲：面积约3020万平方千米，约占世界陆地总面积的20.2%，是世界第二大洲。共有56个国家和地区。人口10.325亿，占世界总人口的12.3%，居世界第二位。\n' +'北美洲：面积约2422.8万平方千米（包括附近岛屿），约占世界陆地总面积的16.2%，是世界第三大洲。共有37个国家和地区。人口5.287亿，约占世界总人口的8.1%，居世界第四位。\n' +'南美洲：面积约1784万平方千米（包括附近岛屿），约占世界陆地总面积的12%，是世界第四大洲。共有13个国家和地区。人口4.59亿，约占世界总人口的7.3%。\n' +'大洋洲：面积约897万平方千米，约占世界陆地总面积的6%，是世界上最小的一个大洲。共有24个国家和地区。人口4200多万，约占世界总人口的0.5%，是除南极洲外，世界人口最少的一洲。\n' +'南极洲：面积1400万平方千米，约占世界陆总面积的9.4%，是世界第五大洲。南极洲仅有一些来自其它大陆的科学考察人员和捕鲸队，无定居居民。\n' +'这七大洲不仅各自拥有独特的地理特征、历史文化和生态环境，还共同构成了地球上丰富多彩的人类文明和自然奇观。'},{title:'巴黎圣母院的作者是谁?',content:'巴黎圣母院》的作者是法国文学家维克多·雨果。维克多·雨果（Victor Hugo，1802年2月26日~1885年5月22日），是法国19世纪前期积极浪漫主义文学的代表作家，人道主义的代表人物，法国文学史上卓越的资产阶级民主作家，被人们称为“法兰西的莎士比亚”。\n' +'\n' +**'《巴黎圣母院》是雨果的第一部具有自身风格的长篇小说，1831年1月14日首次出版。小说以离奇和对比手法写了一个发生在15世纪法国的故事：巴黎圣母院副主教克洛德道貌岸然、蛇蝎心肠，先爱后恨，迫害吉卜赛女郎埃斯梅拉达。面目丑陋、心地善良的敲钟人卡西莫多为救女郎舍身。小说揭露了宗教的虚伪，宣告禁欲主义的破产，歌颂了下层劳动人民的善良、友爱、舍己为人，反映了雨果的人道主义思想。\n' +'\n' +'这部小说打破了以往古典主义的桎梏，是浪漫主义作品中一座里程碑，也奠定了雨果作为世界著名小说家的崇高地位。'},**{title:'巴黎圣母院的主人公是谁?',content:'《巴黎圣母院》的主人公主要包括以下几位：\n' +'\n' +'卡西莫多：他是圣母院的敲钟人，天生独眼、驼背、浑身畸形，丑陋不堪，因敲钟后天造成耳聋。卡西莫多深爱着吉普赛女郎艾斯梅拉达，为了保护她不惜一切代价，最后与她一同死去。卡西莫多是小说中一个极具悲剧色彩的人物，他的善良和勇敢在黑暗中闪耀。\n' +'艾斯梅拉达（或爱斯梅拉达、埃斯梅拉达）：她是一名纯洁、美丽、善良的吉卜赛女郎，被无情的命运捉弄，爱上了英俊却放浪轻浮的军官费比斯（或弗比斯）。艾斯梅拉达在故事中展现了她的善良和勇敢，她救下了流浪诗人格兰古瓦，并为被捆绑鞭笞的卡西莫多送去了水。然而，她最终却葬身于当时水深火热的社会中。\n' +'克洛德：他是巴黎圣母院的副主教，出身于法国的一个中产阶级家庭，从小受到了良好的教育。然而，自从认识了艾斯梅拉达后，他的行为逐渐偏执化、残忍化，最终导致了艾斯梅拉达和自己的悲剧结局。克洛德是小说中一个复杂而矛盾的人物，他既有着对艾斯梅拉达的深情厚爱，又有着对宗教的狂热和偏执。\n' +'此外，格兰古瓦也是小说中的重要人物之一，他是被艾斯梅拉达救下的流浪诗人。格兰古瓦在故事中展现了他的懦弱和利己主义，最终在艾斯梅拉达和小山羊之间选择了救走小山羊。\n' +'\n' +'综上所述，《巴黎圣母院》的主人公包括卡西莫多、艾斯梅拉达、克洛德和格兰古瓦等人物，他们共同构成了这部小说的丰富和多彩的故事情节。'},{title:'李白的代表做有哪些？',content:'李白的代表作众多，以下是一些广为人知的作品：\n' +'\n' +'《静夜思》：此诗创作于李白客居异乡之时，通过简洁的语言描绘了一个寂静的夜晚，表达了诗人对故乡的深深思念之情。这首诗以其质朴和含蓄的表达方式，展现了李白对自然和生活的敏感与热爱。\n' +'《将进酒》：此诗创作于李白被赐金放还之后，表达了他对人生的豪迈态度和对自由放纵的追求。诗中“君不见，黄河之水天上来，奔流到海不复回”等名句，展示了李白对生命的思考和对自由的向往。\n' +'《蜀道难》：此诗创作于李白游览蜀地之时，描绘了他在蜀地行走时所经历的艰苦和壮丽景色。这首诗以其雄浑壮丽的笔墨，表现了李白对自然的敬畏和对困难的坚韧不拔。\n' +'《望庐山瀑布》：此诗以庐山瀑布为背景，通过夸张的手法描绘了瀑布的壮丽景色，同时也表达了诗人对自然的赞美和敬畏之情。\n' +'《早发白帝城》：此诗创作于李白流放途中突然获得自由之时，以轻盈明快的笔触描绘了诗人乘船穿越三峡的壮丽景色，同时也表达了诗人获得自由后的喜悦心情。\n' +'《黄鹤楼送孟浩然之广陵》：这是一首送别诗，通过描绘黄鹤楼和长江的美景，以及诗人对友人的深情厚谊，表达了诗人对离别的感慨和不舍之情。\n' +'此外，《行路难》、《赠汪伦》等也是李白的代表作之一。这些诗作以其独特的艺术风格和情感表达，深受后世读者的喜爱，并在中国古代文学史上占有重要地位。'}]return faqList;}}

6.3 展示问题列表

修改HelpCenterPage页面，使用List组件展示常见问题列表：

@Entry
@Component
struct HelpCenterPage {private title:string = '帮助中心';private faqModel:FaqModel = new FaqModel();@Consume('pageInfos') pageInfosStack: NavPathStack;...NavDestination(){//Text('常见问题列表')// 问题列表List(){ForEach(this.faqModel.getFaqList(),(question:QuestionBean)=>{ListItem(){Row(){Text(question.title)Image($r('app.media.right')).width(32).height(32)}.width('100%').height(50).justifyContent(FlexAlign.SpaceBetween).padding({left:10,right:10}).onClick(()=>{this.pageInfosStack.pushPathByName('FaqDetail',question)})}},(question:QuestionBean)=> JSON.stringify(question.title))}.divider({strokeWidth:1})}.title(this.title)

由于需要继续向路由栈中压入页面，需要修改Mine中的路由栈变量由@Provide装饰：

export default struct Mine {private mineModel:MineModel = new MineModel();//private pageInfosStack:NavPathStack = new NavPathStack()//页面路由栈@Provide('pageInfos') pageInfosStack:NavPathStack = new NavPathStack()//页面路由栈...

在本地模拟器中的运行效果：

在这里插入图片描述

标题部分的左箭头可以返回个人中心页，点击列表项中的右箭头可以进入详情页，尽管还没有内容。

7 问题详情页

界面原型：

在这里插入图片描述

7.1 创建问题详情页

在pages文件夹下新建页面，命名为：FaqDetailPage：

需要编写navigation跳转页面入口函数，必须使用@Builder函数，并带上要传递的参数：

// 跳转页面入口函数
@Builder
export function FaqDetailPageBuilder(name:string,param:Object) {FaqDetailPage({param: param as QuestionBean})
}

接收参数并使用NavDestination显示问题详情，标题为问题标题，问题详情包含在scroll支持滚动，如果要支持html需要使用RichText，否则可以直接使用text：

@Entry
@Component
struct FaqDetailPage {param:QuestionBean =  {title:'',content:''};build() {NavDestination() {Scroll(){Column() {//内容支持html标签RichText(this.param.content).width('100%').height('50%')//内容不支持html标签Text(this.param.content)}.width('100%')}}.title(this.param.title)}
}

7.2 配置系统路由表

继续修改route_map.json中添加代码：

{"routerMap": [{"name": "HelpCenter",...},{"name": "FaqDetail","pageSourceFile": "src/main/ets/pages/FaqDetailPage.ets","buildFunction": "FaqDetailPageBuilder","data": {"description": "faqdetail"}}]
}

在本地模拟器中测试效果:

在这里插入图片描述