目录

鸿蒙HarmonyOS-NEXT十大开源项目

鸿蒙HarmonyOS NEXT十大开源项目

一 ArkUI_Component

ArkUI组件库示例App。包括基础组件、容器组件、弹窗组件,可以在预览器或真机中,实时预览组件接口、属性调整的效果。

https://i-blog.csdnimg.cn/blog_migrate/b49720486a46e85cea6cf1c57637d50c.jpeg#pic_center

ArkUI 组件示例覆盖情况

继续研究更新中

组件名称ArkUI组件示例备注
基础组件AlphabetIndexer-
Blank-
Button
Checkbox和CheckboxGroup一起
CheckboxGroup
DataPanel
DatePicker
Divider
Gauge
Image
ImageAnimator
LoadingProgress
Marquee
Menu
MenuItem-
MenuItemGroup-
Navigation-
NavRouter-
NavDestination-
PatternLock
Progress
QRCode
Radio
Rating
RichText-
ScrollBar-
Search
Select
Slider
Span
Stepper和StepperItem一起
StepperItem
Text
TextArea
TextClock
TextInput
TextPicker
TextTimer
TimePicker
Toggle
Web-
XComponent-
容器Badge
Column
ColumnSplit-
Counter
Flex
FlowItem-
GridCol-
GridRow-
Grid和GridItem一起
GridItem
List
ListItem和ListItem一起
ListItemGroup-
Navigator-
Panel
Refresh-
RelativeContainer-
Row
RowSplit-
Scroll
SideBarContainer
Stack
Swiper
Tabs
TabContent-
WaterFlow-
弹窗警告弹窗
列表选择弹窗
自定义弹窗
日期滑动选择器弹窗
时间滑动选择器弹窗
文本滑动选择器弹窗

二 鸿蒙版的仿网易云音乐

https://i-blog.csdnimg.cn/direct/20633f1bb29f41c0af3acad3c7336411.png#pic_center

三 OH哔哩

项目简介

【OH哔哩】是一款基于OpenHarmony系统ArkUI框架开发的哔哩哔哩动画第三方客户端

用到的三方库

  • 哔哩哔哩-API收集整理
  • 基于FFmpeg的视频播放器
  • 下拉刷新、上拉加载组件
  • 基于promise 的网络请求库
  • 一款用于 OpenHarmony平台的HTTP客户端.
  • proto格式解析库
  • 弹幕框架库
  • 日志框架库
  • 图像加载缓存库

https://i-blog.csdnimg.cn/blog_migrate/2af926ebf37d79d79a9381a92815e683.jpeg#pic_center

https://i-blog.csdnimg.cn/blog_migrate/33b455a39a6e080015b04fad96904951.jpeg#pic_center

四 开眼App HarmonyOpenEye

华为鸿蒙Harmony开眼App(项目整体基于Api9+Stage模式+ArkTs+ArkUI) 鸿蒙Harmony版本开眼APP,具体包含功能如下:

1、常用组件的提取;

2、网络请求的基础封装(基于axios);

3、封装项目页面多状态(加载中,成功,失败,空数据);

4、视频播放以及视频列表播放;

5、列表页面刷新加载示例等

https://i-blog.csdnimg.cn/blog_migrate/4989469520f7a90194a2e6732d75b535.png#pic_center

https://i-blog.csdnimg.cn/blog_migrate/b8781f93a879f293e3bd8ff9c9d19b90.png#pic_center

https://i-blog.csdnimg.cn/blog_migrate/48a2778d607f43828b1d95b2aa7a061b.png#pic_center

五 便单

简介

“便单”,OpenHarmony创新赛人气作品,是用于鸿蒙全智能设备平台的待办事项管理的工具。它采用ArkTS语言编写,基于ArkUI的强大能力和原生图标的精确使用,我们创建了简洁明了的设计风格,让用户一目了然地看到自己的任务清单。同时,我们提供了多种主题色供用户自由选择,增加了趣味性和个性化,还适配了系统级的深浅配色,实现了系统级的沉浸式体验。“便单”不仅可以让用户添加、编辑、删除、筛选、归档自己的任务,还可以让用户设置任务的优先级、截止日期、重复规则、提醒方式等多种属性,让用户更灵活地管理自己的任务。我们还提供了日历页面、四象限页面、多种万能卡片等方式拓展用户的使用场景,优化用户的使用体验。

https://i-blog.csdnimg.cn/blog_migrate/fe88fc1f8f90c98f08c81b2c687286db.jpeg#pic_center

https://i-blog.csdnimg.cn/blog_migrate/453469c99eb517b073d014160ae7f033.jpeg#pic_center

六 溪村小镇

溪村小镇是一款展示溪流背坡村园区风貌的应用,Harmony官方示例代码,包括园区内的导航功能,小火车行车状态查看,以及各区域的风景展览介绍,主要用于展示HarmonyOS的ArkUI能力和动画效果。

https://i-blog.csdnimg.cn/blog_migrate/1d5f1cfcd27abb6881499ee856a914fc.jpeg#pic_center

https://i-blog.csdnimg.cn/blog_migrate/7baa521ad161a267904086700dc23abd.jpeg#pic_center

https://i-blog.csdnimg.cn/blog_migrate/22c9f5714339c8f92aae6be497e07b51.jpeg#pic_center

七 购物应用

Harmony官方示例代码,基于自适应和响应式布局,实现一次开发,多端部署的购物应用。

https://i-blog.csdnimg.cn/blog_migrate/4122af710340eb9d8d648977fe1c169c.jpeg#pic_center

https://i-blog.csdnimg.cn/blog_migrate/e14a72821c62e76d1f9075c656a09875.jpeg#pic_center

https://i-blog.csdnimg.cn/blog_migrate/54c44d3365f20ee1439518a436bcb46a.jpeg#pic_center

八 Swiper

Harmony官方示例代码,介绍了滑动容器组件Swiper的几种常见的应用场景,包括顶部导航、轮播图以及视频滑动播放。

https://i-blog.csdnimg.cn/blog_migrate/101fea70b35dae312d5166df947a9c28.png#pic_center

https://i-blog.csdnimg.cn/blog_migrate/aa200c1564bf05f1def4b2b932aea2f8.png#pic_center

九 音乐专辑

Harmony官方示例代码,基于自适应布局和响应式布局,实现一次开发,多端部署音乐专辑。介绍手机、折叠屏、平板等不同屏幕尺寸设备的页面设计和实现方案,通过合理的工程结构组织代码,以及解决系统能力差异的兼容性问题。手机效果如图所示:

https://i-blog.csdnimg.cn/blog_migrate/891a24c93a29413e5bd9a15cc59b9f4b.jpeg#pic_center

https://i-blog.csdnimg.cn/blog_migrate/87d217cfbe9e34ac91e468b144064971.jpeg#pic_center

十 面试宝典

十一

Harmony糖果社区类似于

聚集了一群热爱 Harmony 的开发者们,糖果群致力于通过持续创建、维护和贡献高质量的 Harmony 库,让 Harmony 更易用,助力开发者们更快、更高效地构建优秀的 Flutter 应用

十二

common_app_development
|---AppScope
|---common                                // 公共能力层
|   |---utils     
|   |   |---component                     // 公共布局,如功能介绍布局
|   |   |---log                           // 日志打印 
|---feature                               // 基础特性层
|   |---addressexchange                   // 地址交换动画案例
|   |---akiusepractice                    // AKI使用实践
|   |---applicationexception              // 应用异常处理案例
|   |---barchart                          // MpChart图表实现案例
|   |---customtabbar                      // 自定义TabBar页签 案例
|   |---eventpropagation                  // 阻塞事件冒泡案例
|   |---fitfordarkmode                    // 深色模式适配案例
|   |---functionalscenes                  // 主页瀑布流实现 
|   |---gbktranscoding                    // Axios获取网络GBK数据转换UTF-8网络数据
|   |---handletabs                        // Tab组件实现增删Tab标签案例
|   |---imageviewer                       // 图片预览方案
|   |---marquee                           // 跑马灯案例
|   |---modalwindow                       // 全屏登录页面案例
|   |---nativeprogressnotify              // Native侧进度通知到ArkTS
|   |---nativerawfile                     // Native读取Rawfile中文件部分内容
|   |---navigationparametertransfer       // Navigation页面跳转对象传递案例
|   |---pageturninganimation              // 翻页动效案例
|   |---pendingitems                      // 列表编辑实现案例
|   |---photopickandsave                  // 图片选择和下载保存案例
|   |---pulltorefreshnews                 // 下拉刷新与上滑加载案例
|   |---secondarylinkage                  // 二级联动实现案例
|   |---slidetohideanddisplace            // 滑动页面信息隐藏与组件位移效果案例
|   |---variablewatch                     // 多层嵌套类对象监听案例
|   |---verifycode                        // 验证码布局
|   |---vibrateeffect                     // 基础特性层-抖动动画及手机振动效果
|   |---customcalendarpickerdialog        // 基础特性层-自定义日历选择器
|   |---navigationbarchange               // 基础特性层-状态栏显隐变化案例
|   |---customview                        // 基础特性层-自定义视图实现Tab效果
|   |---waterripples                      // 基础特性层-听歌识曲水波纹特效案例
|   |---citysearch                        // 城市选择案例
|   |---componentstack                    // 组件堆叠案例
|   |---dragandexchange                   // Grid和List内拖拽交换子组件位置案例
|   |---foldablescreencases               // 折叠屏音乐播放器案例
|   |---imagecomment                      // 发布图片评论案例
|   |---mediafullscreen                   // 视频全屏切换案例
|   |---swipercomponent                   // 多层级轮播图案例
|   |---swipersmoothvariation             // Swiper高度可变化效果案例
|   |---decompressfile                    // Worker子线程中解压文件案例
|   |---paintcomponent                    // 使用绘制组件实现自定义进度动画案例
|   |---lottieview                        // Lottie
|   |---imagecompression                  // 图片压缩方案
|   |---votingcomponent                   // 投票组件
|   |---webgetcameraimage                 // WebView拉起原生相机案例
|   |---sidebaranimation                  // SideBarContainer侧边栏淡入淡出动效实现案例
|   |---imageenableanalyzer               // 图片拖拽AI抠图案例
|   |---indicatorbelowswiper              // swiper指示器导航点位于swiper下方
|   |---bigfilecopy                       // 大文件拷贝案例
|   |---diggingholescreen                 // 适配挖孔屏案例
|   |---dragtoswitchpictures              // 左右拖动切换图片效果案例
|   |---listitemoverflow                  // 元素超出List区域
|   |---multiplefilesdownload             // 多文件下载监听案例
|   |---searchcomponent                   // 搜索页一镜到底案例
|   |---dynamicattributes                 // 跨文件样式复用和组件复用
|   |---etswrapper                        // NAPI封装ArkTS接口案例
|   |---handwritingtoimage                // 手写绘制及保存图片
|   |---multimodaltransion                // 多模态页面转场动效实现案例
|   |---nativeembed                       // ArkWeb同层渲染
|   |---sideslipintercept                 // 侧滑返回事件拦截案例
|   |---webpdfviewer                      // Web组件预览PDF文件实现案例
|   |---listslidetohistory                // 长列表滑动到指定列表项动效实现案例
|   |---imagetheft                        // 正确配置ImageKnife请求头实现防盗链功能
|   |---componentinstancesharedinpages    // 页面间共享组件实例的案例
|   |---fontdynamicregistration           // 动态注册字体案例
|   |---effectKit                         // 使用colorPicker实现背景跟随主题颜色转换
|   |---cardswiperanimation               // 自定义Swiper卡片预览效果实现
|   |---customscan                        // 折叠屏扫描二维码方案
|   |---imagedepthcopy                    // PixelMap深拷贝案例
|   |---pageflip                          // 阅读翻页方式案例
|   |---videocache                        // 边缓存边播放案例
|   |---iconmaincolor                     // 根据icon自适应背景颜色
|   |---bottomdrawerslidecase             // 底部抽屉滑动效果案例
|   |---chinesetopinyin                   // 汉字转拼音案例
|   |---customsafekeyboard                // 自定义安全键盘案例
|   |---nativesavepictosandbox            // Native保存图片到应用沙箱
|   |---shortvideo                        // 短视频切换实现案例
|   |---digitalscrollanimation            // 数字滚动动效实现
|   |---expandtitle                       // 标题下拉缩放案例
|   |---pageloading                       // 页面加载效果实现案例
|   |---databaseupgrade                   // 数据库版本升级案例
|   |---hilogmonitormanagement            // 监听HiLog日志实现测试用例验证
|   |---transitionanimation               // 一镜到底“页面转场”动画
|   |---imagegridlayout                   // 图片九宫格封装案例
|   |---highlightguide                    // 应用新功能引导实现案例
|   |---wordrecognition                   // 文字识别案例
|   |---bottompanelslide                  // 底部面板嵌套列表滑动案例
|   |---danmakuplayer                     // 视频弹幕功能
|   |---listexchange                      // 列表项交换案例
|   |---tabcontentoverflow                // tabContent内容可以在tabBar上显示并响应滑动事件案例
|   |---chatwithexpression                // 表情聊天案例
|   |---floatwindow                       // 悬浮窗拖拽和吸附动画
|   |---gridexchange                      // 网格元素交换案例
|   |---miniplayeranimation               // 音乐播放转场一镜到底效果实现
|   |---refreshtimeline                   // 下拉展开图片和时间轴效果实现案例
|   |---webpagesnapshot                   // Web页面长截图
|   |---naviagtioninterceptor             // Navigation路由拦截案例
|   |---blendmode                         // 图片混合案例
|   |---secondfloorloadanimation          // 首页下拉进入二楼效果案例
|   |---styledtext                        // Text实现部分文本高亮和超链接样式
|   |---navigationinterceptor             // Navigation路由拦截案例
|   |---customdialog                      // 全局弹窗封装案例
|   |---textexpand                        // 文字展开收起案例
|   |---imageresizable                    // 边框或背景图片拉伸案例
|   |---watermark                         // 水印案例
|   |---textoverflow                      // textOverflow长文本省略
|   |---fadingedge                        // 边缘渐变实现
|   |---customstepper                     // 自定义Stepper
|   |---searchswiper                      // 搜索框热搜词自动滚动
|   |---perfermance  
|   |   |---highlyloadedcomponentrender   // 合理处理高负载组件的渲染文章示例代码
|   |   |---customreusablepool            // 自定义组件复用池文章示例代码
|   |   |---operaterdbintaskpool          // 在TaskPool线程中操作关系型数据库实现案例
|   |---videolinkagelist                  // 视频卡片和列表区域的联动滚动
|   |---navdestinationdialog              // NavDestination弹窗
|   |---customkeyboardtoh5                // H5页面调用自定义输入法案例
|   |---sendmessage                       // 发短信案例
|---libs
|---product 
|   |---entry                             // 产品定制层-应用入口

十三 鸿蒙仿网易严选WebAPP

https://i-blog.csdnimg.cn/direct/169cfb735d4f4e118d5ca608fb043290.jpeg#pic_center

https://i-blog.csdnimg.cn/direct/648e6ed456b045ab9d5908e0b25f84e1.jpeg#pic_center

十四 微信鸿蒙版本

https://i-blog.csdnimg.cn/direct/4e55050bcae744a286f0eb083f2bef84.jpeg#pic_center

十五 硅谷租房项目

这是一个基于 **鸿蒙 API12 **开发的移动端租房 App,用户可以使用该应用搜索租房列表、查看房屋详情、预约租房等。

学习目标

掌握 ArkUI 组件的使用,合理搭建页面布局

掌握封装租房业务组件&公共组件

掌握移动端屏幕适配最佳实践

掌握前后端交互技术,封装企业级的请求函数

掌握租房项目核心业务流程

├─ .hvigor -------------------------------- 构建生成的缓存等信息
├─ .idea ---------------------------------- 项目的配置信息:编译配置、文件编码信息等
├─ AppScope	------------------------------- 应用/服务的全局公共资源目录
  |  ├─ resource ---------------------------- 应用/服务的全局资源
  |  └─ app.json5 --------------------------- 应用/服务的全局配置信息
├─ entry ---------------------------------- 应用/服务模块,编译构建生成一个 HAP
  |  ├─ .preview ---------------------------- 预览项目编译、配置信息等
  |  ├─ build ------------------------------- 预览项目编译、配置信息等
  |  ├─ src --------------------------------- 项目源码目录
  |  |  ├─ main
  |  |  |  ├─ ets --------------------------- 用于存放 ArkTS 源码
  |  |  |  |  ├─ api ------------------------ 接口函数目录
  |  |  |  |  ├─ components ----------------- 公共组件目录
  |  |  |  |  ├─ constants ------------------ 常量目录
  |  |  |  |  ├─ entryability --------------- 应用/服务的入口
  |  |  |  |  |  └─ EntryAbility.ts
  |  |  |  |  ├─ model ---------------------- 类型目录
  |  |  |  |  ├─ pages ---------------------- 应用/服务包含的页面
  |  |  |  |  ├─ utils ---------------------- 工具函数目录
  |  |  |  |  └─ views ---------------------- 页面中组件目录
  |  |  |  ├─ module.json5 ------------------ Stage 模型模块配置文件,主要包含 HAP 的配置信息、应用在具体设备上的配置信息以及应用的全局配置信息。
  |  |  |  └─ resources --------------------- 用于存放应用/服务所用到的资源文件
  |  |  |     ├─ base
  |  |  |     |  ├─ element
  |  |  |     |  |  ├─ color.json	----------- 颜色
  |  |  |     |  |  ├─ float.json ----------- 浮点型
  |  |  |     |  |  └─ string.json ---------- 字符串
  |  |  |     |  ├─ media	------------------- 图片、视频、音频等
  |  |  |     |  └─ profile
  |  |  |     |     └─ main_pages.json ------ 页面 page 的路径配置信息,所有需要进行路由跳转的 page 页面都要在这里进行配置。
  |  |  |     ├─ en_US ---------------------- 英文语言
  |  |  |     ├─ rawfile -------------------- 任意格式资源
  |  |  |     └─ zh_CN ---------------------- 中文语言
  |  |  └─ ohosTest ------------------------- 单元测试目录
  |  ├─ .gitignore -------------------------- 模块的 Git 忽略文件
  |  ├─ build-profile.json5 ----------------- 模块配置信息,包括签名、产品配置等
  |  ├─ hvigorfile.ts ----------------------- 模块构建配置任务脚本
  |  ├─ obfuscation-rules ------------------- 代码混淆配置文件
  |  └─ oh-package.json5  ------------------- 模块第三方包声明文件的入口及包名
├─ hvigor	--------------------------------- 构建配置文件信息,是一款全新基于 TS 实现的前端构建任务编排工具
  |  ├─ hvigor-config.json5
  |  └─ hvigor-wrapper.js
├─ oh_modules ----------------------------- 用于存放三方库依赖信息
├─ .gitignore ----------------------------- Git 提交时的忽略文件
├─ build-profile.json5 -------------------- 应用级配置信息,包括签名、产品配置等
├─ hvigorfile.ts -------------------------- 构建配置任务脚本
├─ hvigorw
├─ hvigorw.bat
├─ local.properties ----------------------- 存放私有属性路径,比如 Nodejs 路径、Huawei SDK 路径
├─ oh-package.json5 ----------------------- 配置第三方包声明文件的入口及包名
└─ oh-package-lock.json5

https://i-blog.csdnimg.cn/direct/777d01d480224bd599b0f683ec3777a2.png#pic_center

十六 Harmony官方示例合集 Codelabs

https://i-blog.csdnimg.cn/blog_migrate/06063fe6afc053aad2aca929d865b154.png#pic_center

https://i-blog.csdnimg.cn/blog_migrate/283011c4375e6c6ad4c3f3ba28810192.jpeg#pic_center