diff --git a/entry/src/main/ets/common/constants/ArticleClass.ets b/entry/src/main/ets/common/constants/ArticleClass.ets new file mode 100644 index 0000000..816ae83 --- /dev/null +++ b/entry/src/main/ets/common/constants/ArticleClass.ets @@ -0,0 +1,15 @@ +export class ArticleClass { + id: string = ''; + imageSrc: ResourceStr = ''; + title: string = ''; + brief: string = ''; + webUrl: string = ''; + + constructor(id: string, imageSrc: ResourceStr, title: string, brief: string, webUrl: string) { + this.id = id; + this.imageSrc = imageSrc; + this.title = title; + this.brief = brief; + this.webUrl = webUrl; + } +} \ No newline at end of file diff --git a/entry/src/main/ets/common/constants/BannerClass.ets b/entry/src/main/ets/common/constants/BannerClass.ets new file mode 100644 index 0000000..af80075 --- /dev/null +++ b/entry/src/main/ets/common/constants/BannerClass.ets @@ -0,0 +1,11 @@ +export class BannerClass { + id: string = ''; + imageSrc: ResourceStr = ''; + url: string = ''; + + constructor(id: string, imageSrc: ResourceStr, url: string) { + this.id = id; + this.imageSrc = imageSrc; + this.url = url; + } +} \ No newline at end of file diff --git a/entry/src/main/ets/common/constants/Constants.ets b/entry/src/main/ets/common/constants/Constants.ets index 6685ada..f86b438 100644 --- a/entry/src/main/ets/common/constants/Constants.ets +++ b/entry/src/main/ets/common/constants/Constants.ets @@ -140,7 +140,8 @@ export class CommonConstants { new Link("第二页","pages/Second"), new Link("方法页","pages/Method"), new Link("待办页","pages/ToDoListPage"), - new Link("生命周期","") + new Link("生命周期","pages/LifeCyclePage"), + new Link("快速入门","pages/QuickStart") ]; /** diff --git a/entry/src/main/ets/pages/QuickStart.ets b/entry/src/main/ets/pages/QuickStart.ets new file mode 100644 index 0000000..879dd7d --- /dev/null +++ b/entry/src/main/ets/pages/QuickStart.ets @@ -0,0 +1,38 @@ +import BackView from '../view/BackView'; +import Banner from '../view/Banner'; +import EnablementView from '../view/EnablementView'; +import TutorialView from '../view/TutorialView'; + +@Entry +@Component +struct QuickStart { + @State message: string = '快速入门'; + + build() { + Column() { + Text(this.message) + .fontSize(24) + .fontWeight('700') + .width('100%') + .textAlign(TextAlign.Start) + .padding({left: 16}) + .fontFamily('HarmonyHeiTi-Bold') + .lineHeight(33) + Scroll() { + Column() { + Banner() + EnablementView() + TutorialView() + } + } + .layoutWeight(1) + .scrollBar(BarState.Off) + .align(Alignment.TopStart) + + BackView(); + } + .height('100%') + .width('100%') + .backgroundColor('#F1F3F5') + } +} diff --git a/entry/src/main/ets/view/Banner.ets b/entry/src/main/ets/view/Banner.ets new file mode 100644 index 0000000..98462e8 --- /dev/null +++ b/entry/src/main/ets/view/Banner.ets @@ -0,0 +1,38 @@ +import { BannerClass } from "../common/constants/BannerClass"; + +@Preview +@Component +export default struct Banner { + @State bannerList: Array = [ + new BannerClass('pic0', $r('app.media.banner_pic0'), + 'https://developer.huawei.com/consumer/cn/training/course/video/C101718352529709527'), + new BannerClass('pic1', $r('app.media.banner_pic1'), + 'https://developer.huawei.com/consumer/cn/'), + new BannerClass('pic2', $r('app.media.banner_pic2'), + 'https://developer.huawei.com/consumer/cn/deveco-studio/'), + new BannerClass('pic3', $r('app.media.banner_pic3'), + 'https://developer.huawei.com/consumer/cn/arkts/'), + new BannerClass('pic4', $r('app.media.banner_pic4'), + 'https://developer.huawei.com/consumer/cn/arkui/'), + new BannerClass('pic5', $r('app.media.banner_pic5'), + 'https://developer.huawei.com/consumer/cn/sdk') + ]; + + build() { + Swiper() { + ForEach(this.bannerList, (item: BannerClass, index: number) => { + Image(item.imageSrc) + .objectFit(ImageFit.Contain) + .width('100%') + .padding({ top: 11, left: 16, right: 16 }) + .borderRadius(16) + }, (item: BannerClass, index: number) => item.id) + } + .autoPlay(true) + .loop(true) + .indicator( + new DotIndicator() + .color('#1a000000') + .selectedColor('#0A59F7')) + } +} \ No newline at end of file diff --git a/entry/src/main/ets/view/EnablementItem.ets b/entry/src/main/ets/view/EnablementItem.ets new file mode 100644 index 0000000..ca7db8c --- /dev/null +++ b/entry/src/main/ets/view/EnablementItem.ets @@ -0,0 +1,44 @@ +import { ArticleClass } from "../common/constants/ArticleClass"; + +@Component +export default struct EnablementItem { + @Prop enablementItem: ArticleClass; + + build() { + Column() { + Image(this.enablementItem.imageSrc) + .width('100%') + .objectFit(ImageFit.Cover) + .height(96) + .borderRadius({ + topLeft: 16, + topRight: 16 + }) + Text(this.enablementItem.title) + .height(19) + .width('100%') + .fontSize(14) + .textAlign(TextAlign.Start) + .textOverflow({ overflow: TextOverflow.Ellipsis }) + .maxLines(1) + .fontWeight(400) + .padding({ left: 12, right: 12 }) + .margin({ top: 8 }) + Text(this.enablementItem.brief) + .height(32) + .width('100%') + .fontSize(12) + .textAlign(TextAlign.Start) + .textOverflow({ overflow: TextOverflow.Ellipsis }) + .maxLines(2) + .fontWeight(400) + .fontColor('rgba(0, 0, 0, 0.6)') + .padding({ left: 12, right: 12 }) + .margin({ top: 2 }) + } + .width(160) + .height(169) + .borderRadius(16) + .backgroundColor(Color.White) + } +} \ No newline at end of file diff --git a/entry/src/main/ets/view/EnablementView.ets b/entry/src/main/ets/view/EnablementView.ets new file mode 100644 index 0000000..b2f4f7d --- /dev/null +++ b/entry/src/main/ets/view/EnablementView.ets @@ -0,0 +1,58 @@ +import { ArticleClass } from "../common/constants/ArticleClass"; +import EnablementItem from "./EnablementItem"; + +@Preview +@Component +export default struct EnablementView{ + @State enablementList: Array = [ + new ArticleClass('1', $r('app.media.enablement_pic1'), 'HarmonyOS第一课', + '基于真实的开发场景,提供向导式学习,多维度融合课程等内容,给开发者提供全新的学习体验。', + 'https://developer.huawei.com/consumer/cn/doc/harmonyos-video-courses/video-tutorials-0000001443535745'), + new ArticleClass('2', $r('app.media.enablement_pic2'), '开发指南', + '提供系统能力概述、快速入门,用于指导开发者进行场景化的开发。指南涉及到的知识点包括必要的背景知识、符合开发者实际开发场景的操作任务流(开发流程、开发步骤、调测验证)以及常见问题等。', + 'https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/application-dev-guide-0000001630265101'), + new ArticleClass('3', $r('app.media.enablement_pic3'), '最佳实践', + '针对新发布特性及热点特性提供详细的技术解析和开发最佳实践。', + 'https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/topic-architecture-0000001678045510'), + new ArticleClass('4', $r('app.media.enablement_pic4'), 'Codelabs', + '以教学为目的的代码样例及详细的开发指导,帮助开发者一步步地完成指定场景的应用开发并掌握相关知识。Codelabs将最新的鸿蒙生态应用开发技术与典型场景结合,让开发者快速地掌握开发高质量应用的方法。同时支持互动式操作,通过文字、代码和效果联动为开发者带来更佳的学习体验。', + 'https://developer.huawei.com/consumer/cn/doc/harmonyos-codelabs/codelabs-0000001443855957'), + new ArticleClass('5', $r('app.media.enablement_pic5'), 'Sample', + '面向不同类型的开发者提供的鸿蒙生态应用开发优秀实践,每个Sample Code都是一个可运行的工程,为开发者提供实例化的代码参考。', + 'https://developer.huawei.com/consumer/cn/doc/harmonyos-samples/samples-0000001162414961'), + new ArticleClass('6', $r('app.media.enablement_pic6'), 'API参考', + '面向开发者提供鸿蒙系统开放接口的全集,供开发者了解具体接口使用方法。API参考详细地描述了每个接口的功能、使用限制、参数名、参数类型、参数含义、取值范围、权限、注意事项、错误码及返回值等。', + 'https://developer.huawei.com/consumer/cn/doc/harmonyos-references/development-intro-0000001580026066'), + new ArticleClass('7', $r('app.media.enablement_pic7'), 'FAQ', + '开发者常见问题的总结,开发者可以通过FAQ更高效地解决常见问题。FAQ会持续刷新,及时呈现最新的常见问题。', + 'https://developer.huawei.com/consumer/cn/doc/harmonyos-faqs/faqs-development-0000001753952202'), + new ArticleClass('8', $r('app.media.enablement_pic8'), '开发者论坛', '和其他应用开发者交流技术、共同进步。', + 'https://developer.huawei.com/consumer/cn/forum/home?all=1'), + ]; + build() { + Column() { + Text('赋能套件') + .fontColor('#182431') + .fontSize(24) + .fontWeight(700) + .fontFamily('HarmonyHeiTi-Bold') + .textAlign(TextAlign.Start) + .padding({ left: 16 }) + .margin({ bottom: 8.5 }) + Grid() { + ForEach(this.enablementList, (item: ArticleClass) => { + GridItem() { + EnablementItem({ enablementItem: item }) + } + }, (item: ArticleClass) => item.id) + } + .rowsTemplate('1fr') + .columnsGap(8) + .scrollBar(BarState.Off) + .height(169) + .padding({ top: 2, left: 16, right: 16 }) + } + .margin({ top: 18 }) + .alignItems(HorizontalAlign.Start) + } +} \ No newline at end of file diff --git a/entry/src/main/ets/view/TutorialItem.ets b/entry/src/main/ets/view/TutorialItem.ets new file mode 100644 index 0000000..cb88c5e --- /dev/null +++ b/entry/src/main/ets/view/TutorialItem.ets @@ -0,0 +1,48 @@ +import { ArticleClass } from "../common/constants/ArticleClass"; + +@Component +export default struct TutorialItem { + @Prop tutorialItem: ArticleClass; + + build() { + Row() { + Column() { + Text(this.tutorialItem.title) + .height(19) + .width('100%') + .fontSize(14) + .textAlign(TextAlign.Start) + .textOverflow({ overflow: TextOverflow.Ellipsis }) + .maxLines(1) + .fontWeight(400) + .margin({ top: 4 }) + Text(this.tutorialItem.brief) + .height(32) + .width('100%') + .fontSize(12) + .textAlign(TextAlign.Start) + .textOverflow({ overflow: TextOverflow.Ellipsis }) + .maxLines(2) + .fontWeight(400) + .fontColor('rgba(0, 0, 0, 0.6)') + .margin({ top: 5 }) + } + .height('100%') + .layoutWeight(1) + .alignItems(HorizontalAlign.Start) + .margin({ right: 12 }) + + Image(this.tutorialItem.imageSrc) + .height(64) + .width(108) + .objectFit(ImageFit.Cover) + .borderRadius(16) + } + .width('100%') + .height(88) + .borderRadius(16) + .backgroundColor(Color.White) + .padding(12) + .alignItems(VerticalAlign.Top) + } +} \ No newline at end of file diff --git a/entry/src/main/ets/view/TutorialView.ets b/entry/src/main/ets/view/TutorialView.ets new file mode 100644 index 0000000..2c8b76e --- /dev/null +++ b/entry/src/main/ets/view/TutorialView.ets @@ -0,0 +1,63 @@ +import { ArticleClass } from "../common/constants/ArticleClass"; +import TutorialItem from "./TutorialItem"; + +@Component +export default struct TutorialView{ + @State tutorialList: Array = [ + new ArticleClass('1', $r('app.media.tutorial_pic1'), 'Step1 环境的搭建', + '本篇教程实现了快速入门——一个用于了解和学习HarmonyOS的应用程序。', + 'https://developer.huawei.com/consumer/cn/forum/home?all=1'), + new ArticleClass('2', $r('app.media.tutorial_pic2'), 'Step2 使用Swiper构建运营广告位', + 'Swiper组件提供滑动轮播显示的能力。Swiper本身是一个容器组件,当设置了多个子组件后,可以对这些子组件进行轮播显示。', + 'https://developer.huawei.com/consumer/cn/forum/home?all=1'), + new ArticleClass('3', $r('app.media.tutorial_pic3'), 'Step3 创建和组合视图', + 'Item定义子组件相关特征。相关组件支持使用条件渲染、循环渲染、懒加载等方式生成子组件。', + 'https://developer.huawei.com/consumer/cn/forum/home?all=1'), + new ArticleClass('4', $r('app.media.tutorial_pic4'), 'Step4 网格和列表组建的使用', + '网格和列表组件中,当Item达到一定数量,内容超过屏幕大小时,可以自动提供滚动功能,适合用于呈现同类数据类型或数据类型集', + 'https://developer.huawei.com/consumer/cn/forum/home?all=1'), + new ArticleClass('5', $r('app.media.tutorial_pic5'), 'Step5 应用架构设计基础', + 'ArkUI采取MVVM = Model + View + ViewModel模式,将数据与视图绑定在一起,更新数据的时候直接更新视图。', + 'https://developer.huawei.com/consumer/cn/forum/home?all=1'), + new ArticleClass('6', $r('app.media.tutorial_pic6'), 'Step6 ArkWeb页面适配', + 'ArkWeb(方舟Web)提供了Web组件,用于在应用程序中显示Web页面内容,为开发者提供页面加载、页面交互、页面调试等能力。', + 'https://developer.huawei.com/consumer/cn/forum/home?all=1'), + new ArticleClass('7', $r('app.media.tutorial_pic7'), 'Step7 数据驱动UI更新', '数据更新的同时会直接驱动UI的改变', + 'xxx'), + new ArticleClass('8', $r('app.media.tutorial_pic8'), 'Step8 设置组件导航', + 'Navigation组件适用于模块内页面切换,一次开发,多端部署场景。通过组件级路由能力实现更加自然流畅的转场体验,并提供多种标题栏样式来呈现更好的标题和内容联动效果。', + 'https://developer.huawei.com/consumer/cn/forum/home?all=1'), + new ArticleClass('9', $r('app.media.tutorial_pic8'), 'Step9 原生智能:AI语音朗读', + '文本转语音服务提供将文本信息转换为语音并进行播报的能力,便于用户与设备进行互动,实现实时语音交互,文本播报。', + 'https://developer.huawei.com/consumer/cn/forum/home?all=1'), + new ArticleClass('10', $r('app.media.tutorial_pic8'), 'Step10 原生互联:分布式流转', + '流转能力打破设备界限,多设备联动,使用户应用程序可分可合、可流转,实现如邮件跨设备编辑、多设备协同健身、多屏游戏等分布式业务。', + 'https://developer.huawei.com/consumer/cn/forum/home?all=1'), + new ArticleClass('11', $r('app.media.tutorial_pic8'), 'Step11 一次开发,多端部署', + '一套代码工程,一次开发上架,多端按需部署。支撑开发者快速高效的开发支持多种终端设备形态的应用,实现对不同设备兼容的同时,提供跨设备的流转、迁移和协同的分布式体验。', + 'https://developer.huawei.com/consumer/cn/forum/home?all=1'), + ]; + build() { + Column() { + Text('入门教程') + .fontColor('#182431') + .fontSize(24) + .fontWeight(700) + .fontFamily('HarmonyHeiTi-Bold') + .textAlign(TextAlign.Start) + .padding({ left: 16 }) + .margin({ bottom: 8.5 }) + List({ space: 12 }) { + ForEach(this.tutorialList, (item: ArticleClass) => { + ListItem() { + TutorialItem({ tutorialItem: item }) + } + }, (item: ArticleClass) => item.id) + } + .scrollBar(BarState.Off) + .padding({ left: 16, right: 16 }) + } + .margin({ top: 18 }) + .alignItems(HorizontalAlign.Start) + } +} \ No newline at end of file diff --git a/entry/src/main/resources/base/media/banner_pic0.png b/entry/src/main/resources/base/media/banner_pic0.png new file mode 100644 index 0000000..6a1429f Binary files /dev/null and b/entry/src/main/resources/base/media/banner_pic0.png differ diff --git a/entry/src/main/resources/base/media/banner_pic1.png b/entry/src/main/resources/base/media/banner_pic1.png new file mode 100644 index 0000000..eaecda2 Binary files /dev/null and b/entry/src/main/resources/base/media/banner_pic1.png differ diff --git a/entry/src/main/resources/base/media/banner_pic2.png b/entry/src/main/resources/base/media/banner_pic2.png new file mode 100644 index 0000000..bdf7c12 Binary files /dev/null and b/entry/src/main/resources/base/media/banner_pic2.png differ diff --git a/entry/src/main/resources/base/media/banner_pic3.png b/entry/src/main/resources/base/media/banner_pic3.png new file mode 100644 index 0000000..ad3a144 Binary files /dev/null and b/entry/src/main/resources/base/media/banner_pic3.png differ diff --git a/entry/src/main/resources/base/media/banner_pic4.png b/entry/src/main/resources/base/media/banner_pic4.png new file mode 100644 index 0000000..db07d68 Binary files /dev/null and b/entry/src/main/resources/base/media/banner_pic4.png differ diff --git a/entry/src/main/resources/base/media/banner_pic5.png b/entry/src/main/resources/base/media/banner_pic5.png new file mode 100644 index 0000000..a1db950 Binary files /dev/null and b/entry/src/main/resources/base/media/banner_pic5.png differ diff --git a/entry/src/main/resources/base/media/enablement_pic1.png b/entry/src/main/resources/base/media/enablement_pic1.png new file mode 100644 index 0000000..1921034 Binary files /dev/null and b/entry/src/main/resources/base/media/enablement_pic1.png differ diff --git a/entry/src/main/resources/base/media/enablement_pic2.png b/entry/src/main/resources/base/media/enablement_pic2.png new file mode 100644 index 0000000..1b8c814 Binary files /dev/null and b/entry/src/main/resources/base/media/enablement_pic2.png differ diff --git a/entry/src/main/resources/base/media/enablement_pic3.png b/entry/src/main/resources/base/media/enablement_pic3.png new file mode 100644 index 0000000..a84eedd Binary files /dev/null and b/entry/src/main/resources/base/media/enablement_pic3.png differ diff --git a/entry/src/main/resources/base/media/enablement_pic4.png b/entry/src/main/resources/base/media/enablement_pic4.png new file mode 100644 index 0000000..fcbe156 Binary files /dev/null and b/entry/src/main/resources/base/media/enablement_pic4.png differ diff --git a/entry/src/main/resources/base/media/enablement_pic5.png b/entry/src/main/resources/base/media/enablement_pic5.png new file mode 100644 index 0000000..bd72866 Binary files /dev/null and b/entry/src/main/resources/base/media/enablement_pic5.png differ diff --git a/entry/src/main/resources/base/media/enablement_pic6.png b/entry/src/main/resources/base/media/enablement_pic6.png new file mode 100644 index 0000000..05311e5 Binary files /dev/null and b/entry/src/main/resources/base/media/enablement_pic6.png differ diff --git a/entry/src/main/resources/base/media/enablement_pic7.png b/entry/src/main/resources/base/media/enablement_pic7.png new file mode 100644 index 0000000..badb43c Binary files /dev/null and b/entry/src/main/resources/base/media/enablement_pic7.png differ diff --git a/entry/src/main/resources/base/media/enablement_pic8.png b/entry/src/main/resources/base/media/enablement_pic8.png new file mode 100644 index 0000000..ce47be8 Binary files /dev/null and b/entry/src/main/resources/base/media/enablement_pic8.png differ diff --git a/entry/src/main/resources/base/media/tutorial_pic1.png b/entry/src/main/resources/base/media/tutorial_pic1.png new file mode 100644 index 0000000..0dfb98d Binary files /dev/null and b/entry/src/main/resources/base/media/tutorial_pic1.png differ diff --git a/entry/src/main/resources/base/media/tutorial_pic10.png b/entry/src/main/resources/base/media/tutorial_pic10.png new file mode 100644 index 0000000..411d568 Binary files /dev/null and b/entry/src/main/resources/base/media/tutorial_pic10.png differ diff --git a/entry/src/main/resources/base/media/tutorial_pic11.png b/entry/src/main/resources/base/media/tutorial_pic11.png new file mode 100644 index 0000000..1a57b78 Binary files /dev/null and b/entry/src/main/resources/base/media/tutorial_pic11.png differ diff --git a/entry/src/main/resources/base/media/tutorial_pic12.png b/entry/src/main/resources/base/media/tutorial_pic12.png new file mode 100644 index 0000000..b65cc1f Binary files /dev/null and b/entry/src/main/resources/base/media/tutorial_pic12.png differ diff --git a/entry/src/main/resources/base/media/tutorial_pic2.png b/entry/src/main/resources/base/media/tutorial_pic2.png new file mode 100644 index 0000000..8ce806c Binary files /dev/null and b/entry/src/main/resources/base/media/tutorial_pic2.png differ diff --git a/entry/src/main/resources/base/media/tutorial_pic3.png b/entry/src/main/resources/base/media/tutorial_pic3.png new file mode 100644 index 0000000..622dab1 Binary files /dev/null and b/entry/src/main/resources/base/media/tutorial_pic3.png differ diff --git a/entry/src/main/resources/base/media/tutorial_pic4.png b/entry/src/main/resources/base/media/tutorial_pic4.png new file mode 100644 index 0000000..049aad5 Binary files /dev/null and b/entry/src/main/resources/base/media/tutorial_pic4.png differ diff --git a/entry/src/main/resources/base/media/tutorial_pic5.png b/entry/src/main/resources/base/media/tutorial_pic5.png new file mode 100644 index 0000000..1b2ab24 Binary files /dev/null and b/entry/src/main/resources/base/media/tutorial_pic5.png differ diff --git a/entry/src/main/resources/base/media/tutorial_pic6.png b/entry/src/main/resources/base/media/tutorial_pic6.png new file mode 100644 index 0000000..e649e1a Binary files /dev/null and b/entry/src/main/resources/base/media/tutorial_pic6.png differ diff --git a/entry/src/main/resources/base/media/tutorial_pic7.png b/entry/src/main/resources/base/media/tutorial_pic7.png new file mode 100644 index 0000000..b07aae9 Binary files /dev/null and b/entry/src/main/resources/base/media/tutorial_pic7.png differ diff --git a/entry/src/main/resources/base/media/tutorial_pic8.png b/entry/src/main/resources/base/media/tutorial_pic8.png new file mode 100644 index 0000000..f830f8a Binary files /dev/null and b/entry/src/main/resources/base/media/tutorial_pic8.png differ diff --git a/entry/src/main/resources/base/media/tutorial_pic9.png b/entry/src/main/resources/base/media/tutorial_pic9.png new file mode 100644 index 0000000..6f7db19 Binary files /dev/null and b/entry/src/main/resources/base/media/tutorial_pic9.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 dc434db..941c8cd 100644 --- a/entry/src/main/resources/base/profile/main_pages.json +++ b/entry/src/main/resources/base/profile/main_pages.json @@ -4,6 +4,7 @@ "pages/Second", "pages/Method", "pages/ToDoListPage", - "pages/LifeCyclePage" + "pages/LifeCyclePage", + "pages/QuickStart" ] }