diff --git a/entry/src/main/ets/common/constants/Constants.ets b/entry/src/main/ets/common/constants/Constants.ets index f86b438..4141afd 100644 --- a/entry/src/main/ets/common/constants/Constants.ets +++ b/entry/src/main/ets/common/constants/Constants.ets @@ -141,7 +141,8 @@ export class CommonConstants { new Link("方法页","pages/Method"), new Link("待办页","pages/ToDoListPage"), new Link("生命周期","pages/LifeCyclePage"), - new Link("快速入门","pages/QuickStart") + new Link("快速入门","pages/QuickStart"), + new Link("知识地图页","pages/KnowledgeMap") ]; /** diff --git a/entry/src/main/ets/pages/Index.ets b/entry/src/main/ets/pages/Index.ets index f40ac82..ffa8c89 100644 --- a/entry/src/main/ets/pages/Index.ets +++ b/entry/src/main/ets/pages/Index.ets @@ -38,9 +38,9 @@ struct Index { .width('80%') .height('5%') .onClick(() => { - console.info(`Succeeded in clicking the 'Next' button.`) + console.info(`Succeeded in clicking the ${link.name} button.`) router.pushUrl({ url: link.path }).then(() => { - console.info('Succeeded in jumping to the second page.') + console.info(`Succeeded in jumping to the ${link.name} page.`) }).catch((err: BusinessError) => { console.error(`Failed to jump to the second page. Code is ${err.code}, message is ${err.message}`) }) diff --git a/entry/src/main/ets/pages/KnowledgeMap.ets b/entry/src/main/ets/pages/KnowledgeMap.ets new file mode 100644 index 0000000..c3bf759 --- /dev/null +++ b/entry/src/main/ets/pages/KnowledgeMap.ets @@ -0,0 +1,78 @@ +import BackView from "../view/BackView"; +import { NavBarItem, NavBarItemType } from "../view/NavBarItem"; +import { Section } from "./KnowledgeMapContent"; +import { BusinessError } from "@kit.BasicServicesKit"; +import { util } from "@kit.ArkTS"; + +@Entry +@Preview +@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[] = []; + 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.60)') + .fontWeight(400) + .textAlign(TextAlign.Start) + List({ space: 12 }) { + ForEach(this.navBarList, (item: NavBarItemType, index: number) => { + ListItem() { + NavBarItem({ navBarItem: item }) + } + .width('100%') + }, (item: NavBarItemType): string => item.title) + } + .width('100%') + .margin({ top: 24 }) + BackView() + } + .padding({ top: 12, right: 16, bottom: 12, left: 16}) + .backgroundColor('#F1F3F5') + } + .backgroundColor('#F1F3F5') + .align(Alignment.TopStart) + .constraintSize({ minHeight: '100%' }) + .edgeEffect(EdgeEffect.Spring) + } + + 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(); + } +} \ No newline at end of file diff --git a/entry/src/main/ets/pages/KnowledgeMapContent.ets b/entry/src/main/ets/pages/KnowledgeMapContent.ets new file mode 100644 index 0000000..1351826 --- /dev/null +++ b/entry/src/main/ets/pages/KnowledgeMapContent.ets @@ -0,0 +1,114 @@ +interface KnowledgeBaseItem { + type: string, + title: string +} + +interface Material { + subtitle: string, + knowledgeBase: KnowledgeBaseItem[] +} + +export interface Section { + title: string, + brief: string, + materials: Material[] +} + +const TypeMapIcon: Record = { + '指南': '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 }) + } + .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) + } + + scroller: Scroller = new Scroller(); + + build() { + Scroll(this.scroller) { + 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.60)') + .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') + } + .align(Alignment.TopStart) + .constraintSize({ minHeight: '100%' }) + .edgeEffect(EdgeEffect.Spring) + .scrollable(ScrollDirection.Vertical) + .scrollBar(BarState.Auto) + .backgroundColor('#F1F3F5') + } +} \ No newline at end of file diff --git a/entry/src/main/ets/view/NavBarItem.ets b/entry/src/main/ets/view/NavBarItem.ets new file mode 100644 index 0000000..60111dd --- /dev/null +++ b/entry/src/main/ets/view/NavBarItem.ets @@ -0,0 +1,39 @@ +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') + .textAlign(TextAlign.Start) + .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') + } +} \ No newline at end of file diff --git a/entry/src/main/resources/base/media/ic_arrow.svg b/entry/src/main/resources/base/media/ic_arrow.svg new file mode 100644 index 0000000..4b60570 --- /dev/null +++ b/entry/src/main/resources/base/media/ic_arrow.svg @@ -0,0 +1,13 @@ + + + ic_arrow + + + + + + + + + + \ No newline at end of file diff --git a/entry/src/main/resources/base/media/ic_guide.svg b/entry/src/main/resources/base/media/ic_guide.svg new file mode 100644 index 0000000..31a40c8 --- /dev/null +++ b/entry/src/main/resources/base/media/ic_guide.svg @@ -0,0 +1,7 @@ + + + ic_guide + + + + \ No newline at end of file diff --git a/entry/src/main/resources/base/media/ic_medals.svg b/entry/src/main/resources/base/media/ic_medals.svg new file mode 100644 index 0000000..c5f4c04 --- /dev/null +++ b/entry/src/main/resources/base/media/ic_medals.svg @@ -0,0 +1,7 @@ + + + ic_medals + + + + \ No newline at end of file diff --git a/entry/src/main/resources/base/media/ic_prepare.svg b/entry/src/main/resources/base/media/ic_prepare.svg new file mode 100644 index 0000000..a1295c1 --- /dev/null +++ b/entry/src/main/resources/base/media/ic_prepare.svg @@ -0,0 +1,7 @@ + + + ic_prepare + + + + \ No newline at end of file diff --git a/entry/src/main/resources/base/media/ic_video.svg b/entry/src/main/resources/base/media/ic_video.svg new file mode 100644 index 0000000..2d8ed08 --- /dev/null +++ b/entry/src/main/resources/base/media/ic_video.svg @@ -0,0 +1,7 @@ + + + ic_video + + + + \ No newline at end of file diff --git a/entry/src/main/resources/base/media/knowledge_map_banner.png b/entry/src/main/resources/base/media/knowledge_map_banner.png new file mode 100644 index 0000000..3b335ec Binary files /dev/null and b/entry/src/main/resources/base/media/knowledge_map_banner.png differ diff --git a/entry/src/main/resources/base/profile/main_pages.json b/entry/src/main/resources/base/profile/main_pages.json index 941c8cd..5ec8848 100644 --- a/entry/src/main/resources/base/profile/main_pages.json +++ b/entry/src/main/resources/base/profile/main_pages.json @@ -5,6 +5,7 @@ "pages/Method", "pages/ToDoListPage", "pages/LifeCyclePage", - "pages/QuickStart" + "pages/QuickStart", + "pages/KnowledgeMap" ] } diff --git a/entry/src/main/resources/rawfile/MapData.json b/entry/src/main/resources/rawfile/MapData.json new file mode 100644 index 0000000..39c3e67 --- /dev/null +++ b/entry/src/main/resources/rawfile/MapData.json @@ -0,0 +1,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": "版本说明" + } + ] + } + ] + } +] \ No newline at end of file