关联章节
- HarmonyOS第一课05：案例
- HarmonyOS第一课05：应用架构设计基础——MVVM模式
- HarmonyOS第一课05：应用架构设计基础——三层架构
- HarmonyOS第一课06：ArkWeb页面适配
说明：本章代码基于HarmonyOS第一课06：ArkWeb页面适配代码
页面效果
资源
MapData.json
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 |
[ { "title": "准备与学习", "brief": "加入HarmonyOS生态，注册成为开发者，通过HarmonyOS课程了解基本概念和基础知识，轻松开启HarmonyOS的开发旅程。", "materials": [ { "subtitle": "HarmonyOS简介", "knowledgeBase": [ { "type": "准备", "title": "注册账号" }, { "type": "准备", "title": "实名认证" }, { "type": "学习与获取证书", "title": "HarmonyOS第一课" }, { "type": "学习与获取证书", "title": "HarmonyOS应用开发认证" } ] }, { "subtitle": "赋能套件介绍", "knowledgeBase": [ { "type": "指南", "title": "开发" }, { "type": "指南", "title": "最佳实践" }, { "type": "指南", "title": "API参考" }, { "type": "指南", "title": "视频教程" }, { "type": "指南", "title": "Codelabs" }, { "type": "指南", "title": "FAQ" } ] } ] }, { "title": "构建应用", "brief": "为了帮助开发者更好的理解HarmonyOS提供的能力，我们对重点功能提供了开发指导，辅助开发者完成应用的开发。", "materials": [ { "subtitle": "开发工具", "knowledgeBase": [ { "type": "指南", "title": "DevEco Studio" }, { "type": "指南", "title": "低代码开发" }, { "type": "视频教程", "title": "使用DevEco Studio高效开发" } ] }, { "subtitle": "开发语言", "knowledgeBase": [ { "type": "指南", "title": "ArkTS" }, { "type": "视频教程", "title": "ArkTS基础知识" }, { "type": "视频教程", "title": "ArkTS开发实践" } ] }, { "subtitle": "开发框架", "knowledgeBase": [ { "type": "指南", "title": "ArkTS" }, { "type": "视频教程", "title": "ArkUI之属性动画" } ] }, { "subtitle": "HarmonyOS云开发", "knowledgeBase": [ { "type": "指南", "title": "体验HarmonyOS云开发" }, { "type": "指南", "title": "云开发" }, { "type": "视频教程", "title": "HarmonyOS云开发" } ] }, { "subtitle": "集成开放能力", "knowledgeBase": [ { "type": "指南", "title": "推送服务" }, { "type": "指南", "title": "广告服务" }, { "type": "指南", "title": "帐号服务" }, { "type": "指南", "title": "分析服务" }, { "type": "指南", "title": "应用内支付服务" }, { "type": "指南", "title": "云函数" }, { "type": "指南", "title": "云存储" }, { "type": "指南", "title": "云数据库" } ] }, { "subtitle": "编译调试", "knowledgeBase": [ { "type": "指南", "title": "编译构建" }, { "type": "指南", "title": "应用签名" }, { "type": "指南", "title": "云调试" }, { "type": "视频教程", "title": "HarmonyOS应用调试前准备" }, { "type": "视频教程", "title": "HarmonyOS应用调试" }, { "type": "视频教程", "title": "HarmonyOS调试工具介绍" } ] } ] }, { "title": "应用测试", "brief": "HarmonyOS应用/服务开发完成后，在发布到应用/服务市场前，还需要对应用进行：漏洞、隐私、兼容性、稳定性、性能等测试，确保HarmonyOS应用/服务纯净、安全，给用户带来更好的使用体验。", "materials": [ { "subtitle": "", "knowledgeBase": [ { "type": "指南", "title": "云测试" }, { "type": "指南", "title": "开放式测试" } ] } ] }, { "title": "上架", "brief": "HarmonyOS应用/服务开发、测试完成后，将应用/服务发布至应用市场，用户可以通过应用市场、负一屏等渠道获取到对应的HarmonyOS应用/服务。", "materials": [ { "subtitle": "应用发布", "knowledgeBase": [ { "type": "指南", "title": "发布HarmonyOS应用" }, { "type": "指南", "title": "发布元服务" }, { "type": "指南", "title": "分阶段发布" }, { "type": "视频教程", "title": "发布HarmonyOS应用" }, { "type": "视频教程", "title": "发布元服务" } ] } ] }, { "title": "运营增长", "brief": "HarmonyOS应用/服务发布以后，通过数据及时了解运营情况、质量表现，制定增长策略，借助App Linking、崩溃服务等能力，实现应用及服务的用户增长以及质量提升。", "materials": [ { "subtitle": "应用发布", "knowledgeBase": [ { "type": "指南", "title": "应用分析" }, { "type": "指南", "title": "App Linking" }, { "type": "指南", "title": "崩溃服务" }, { "type": "视频教程", "title": "远程配置" }, { "type": "视频教程", "title": "发布元服务" } ] } ] }, { "title": "商业变现", "brief": "HarmonyOS应用/服务发布以后，通过数据及时了解运营情况、质量表现，制定增长策略，借助App Linking、崩溃服务等能力，实现应用及服务的用户增长以及质量提升。", "materials": [ { "subtitle": "", "knowledgeBase": [ { "type": "指南", "title": "流量变现 " }, { "type": "指南", "title": "联运服务" }, { "type": "指南", "title": "付费服务" }, { "type": "指南", "title": "结算指南" } ] } ] }, { "title": "更多", "brief": "", "materials": [ { "subtitle": "", "knowledgeBase": [ { "type": "指南", "title": "常见问题" }, { "type": "指南", "title": "版本说明" } ] } ] } ] |
文件变动
代码
map
Index.ets
|
1 2 |
export { KnowledgeMap } from './src/main/ets/pages/KnowledgeMap' export { KnowledgeMapContent } from './src/main/ets/view/KnowledgeMapContent' |
pages
KnowledgeMap.ets
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 |
import { NavBarItemType, NavBarItem } from '../view/NavBarItem' import { Section } from '../view/KnowledgeMapContent' import { BusinessError } from '@kit.BasicServicesKit' import { util } from '@kit.ArkTS' @Component export struct KnowledgeMap { @State navBarList: NavBarItemType[] = [ { order: '01', title: '准备与学习' }, { order: '02', title: '构建应用' }, { order: '03', title: '应用测试' }, { order: '04', title: '上架' }, { order: '05', title: '运营增长' }, { order: '06', title: '商业变现' }, { order: '07', title: '更多' } ] @State sections: Section[] = [] private getSections() { try { getContext(this).resourceManager.getRawFileContent("MapData.json", (error: BusinessError, value: Uint8Array) => { const textDecoder = util.TextDecoder.create('utf-8') const res = textDecoder.decodeWithStream(value, { stream: false }) this.sections = JSON.parse(res) }) } catch (error) { console.error(`callback getRawFileContent failed, error is ${JSON.stringify(error)}`) } } aboutToAppear(): void { this.getSections() } build() { Scroll() { Column() { Text('知识地图') .fontFamily('HarmonyHeiTi-Bold') .fontSize(24) .fontColor(Color.Black) .textAlign(TextAlign.Start) .lineHeight(33) .fontWeight(700) .width('100%') Image($r('app.media.knowledge_map_banner')) .width('100%') .borderRadius(16) .margin({ top: 19, bottom: 8 }) Text('通过循序渐进的学习路径，无经验和有经验的开发者都可以轻松掌握ArkTS语言声明式开发范式，体验更简洁、更友好的HarmonyOS应用开发旅程。') .fontFamily('HarmonyHeiti') .fontSize(14) .fontColor('rgba(0, 0, 0, 0.6)') .fontWeight(400) .textAlign(TextAlign.Start) List({ space: 12 }) { ForEach(this.navBarList, (item: NavBarItemType, index: number) => { ListItem() { NavBarItem({ navBarItem: item }) } .width('100%') .onClick(() => { console.info(JSON.stringify(this.sections[index])) }) }, (item: NavBarItemType): string => item.title) } .width('100%') .margin({ top: 24 }) } .padding({ top: 12, right: 16, bottom: 12, left: 16 }) .backgroundColor("#F1F3F5") } .backgroundColor('#F1F3F5') .align(Alignment.TopStart) .constraintSize({ minHeight: '100%' }) .edgeEffect(EdgeEffect.Spring) } } |
view
KnowledgeMapContent.ets
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 |
interface KnowledgeBaseItem { type: string, title: string } interface Material { subtitle: string, knowledgeBase: KnowledgeBaseItem[] } export interface Section { title: string, brief: string, materials: Material[] } const TypeMapIcon: Record<string, string> = { '指南': 'app.media.ic_guide', '准备': 'app.media.ic_prepare', '学习与获取证书': 'app.media.ic_medals', '视频教程': 'app.media.ic_video' } @Component export struct KnowledgeMapContent { @Prop section: Section @Builder KnowledgeBlockLine(knowledgeBaseItem: KnowledgeBaseItem) { Row() { Image($r(TypeMapIcon[knowledgeBaseItem.type])) .width(20) .height(20) Column() { Text(knowledgeBaseItem.title) .fontFamily('HarmonyHeiTi-Medium') .fontSize(16) .fontWeight(500) Text(knowledgeBaseItem.type) .fontFamily('HarmonyHeiTi') .fontSize(14) .fontWeight(400) } .alignItems(HorizontalAlign.Start) .margin({ left: 18 }) Blank() Image($r('app.media.ic_arrow')) .width(12) .height(24) } .width('100%') .height(64) .alignItems(VerticalAlign.Center) } @Builder KnowledgeBlock(material: Material) { Column() { Text(material.subtitle) .fontFamily('HarmonyHeiTi-Medium') .fontSize(14) .fontWeight(500) .margin({ bottom: 8 }) List({ space: 12 }) { ForEach(material.knowledgeBase, (item: KnowledgeBaseItem, index: number) => { ListItem() { this.KnowledgeBlockLine(item) } }, (item: KnowledgeBaseItem, index: number) => item.title) } .backgroundColor(Color.White) .borderRadius(16) .padding({ left: 12, right: 12 }) .divider({ strokeWidth: 0.5, startMargin: 38, endMargin: 0, color: '#F2F2F2' }) } .width('100%') .margin({ top: 28 }) .alignItems(HorizontalAlign.Start) } build() { Scroll() { Column() { Text(this.section.title) .fontFamily('HarmonyHeiTi-Bold') .fontSize(20) .fontWeight(700) .fontColor(Color.Black) Text(this.section.brief) .fontFamily('HarmonyHeiTi') .fontSize(12) .fontColor('rgba(0, 0, 0, 0.6)') .textAlign(TextAlign.JUSTIFY) .fontWeight(400) .margin({ top: 12 }) ForEach(this.section.materials, (material: Material) => { this.KnowledgeBlock(material) }, (material: Material, index: number) => material.subtitle) } .alignItems(HorizontalAlign.Start) .padding({ top: 12, left: 16, bottom: 12, right: 16 }) .backgroundColor('#F1F3F5') .width('100%') } .align(Alignment.TopStart) .constraintSize({ minHeight: '100%' }) .edgeEffect(EdgeEffect.Spring) .scrollable(ScrollDirection.Vertical) .scrollBar(BarState.Auto) .backgroundColor('#F1F3F5') } } |
NavBarItem.ets
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
export interface NavBarItemType { order: string title: string } @Component export struct NavBarItem { @Prop navBarItem: NavBarItemType build() { Row() { Text(this.navBarItem.order) .margin({ right: 6 }) .fontFamily('HarmonyHeiti-Bold') .fontSize(21) .fontColor('#182431') .textAlign(TextAlign.Start) .lineHeight(22) .fontWeight(700) Text(this.navBarItem.title) .fontFamily('HarmonyHeiti-Medium') .fontSize(16) .fontColor('#182431') .lineHeight(22) .fontWeight(500) Blank() Image($r('app.media.ic_arrow')) .width(12) .height(24) } .width('100%') .height(48) .borderRadius(16) .alignItems(VerticalAlign.Center) .padding({ left: 12, right: 12 }) .backgroundColor('#F1F3F5') } } |
