【 OpenHarmony 4.1 Launcher 源码解析 】-- 初体验

2024-09-03 18:36

本文主要是介绍【 OpenHarmony 4.1 Launcher 源码解析 】-- 初体验,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

前言

最近因为业务需要,需要做一款 UI 定制的鸿蒙 Launcher,于是就开始了「找到代码」、「研究代码」、「魔改代码」的套路流程,仅以此文章作为知识备份和技术探讨所用,也希望能给其他小伙伴提供一些源码的解析思路,方法大家各自魔改!


一、官方简介

Gitee codes:应用子系统/Launcher

Launcher 作为系统人机交互的首要入口,提供应用图标的显示、点击启动、卸载应用,并提供桌面布局设置以及最近任务管理等功能。

Launcher 采用扩展的 TS 语言(ArkTS)开发

1.1 主要结构

在这里插入图片描述

1.2 分层说明

Module层级说明
product业务形态层区分不同产品、不同屏幕的各形态桌面,含有桌面窗口、个性化业务,组件的配置,以及个性化资源包。
feature公共特性层抽象的公共特性组件集合,可以被各桌面形态引用。
common公共能力层基础能力集,每个桌面形态都必须依赖的模块。

1.3 目录结构

/applications/standard/launcher/
├── common                    # 公共能力层目录
├── docs                      # 开发指南
├── feature                   # 公共特性层目录
│   └── appcenter             # 应用中心
│   └── bigfolder             # 智能文件夹
│   ├── form                  # 桌面卡片管理功能
│   ├── gesturenavigation     # 手势导航
│   ├── pagedesktop           # 工作区
│   ├── recents               # 最近任务
│   ├── settings              # 桌面设置
│   ├── smartdock             # dock工具栏
├── product                   # 业务形态层目录
├── signature                 # 签名证书

1.4 开发调试

IDE 下载:建议大家直接下载 OpenHarmony 4.1 Release DevEco-Studio 吧,API 支持 8 ~ 11

在这里插入图片描述

1.5 SDK

Launcher 应用的编译需使用相对应版本的 ohos-sdk-full \ mac-sdk-full 来进行开发调试。

IDE 上是 Public SDK,故 full sdk 需要重新下载,下载地址:

新版本界面:http://ci.openharmony.cn/workbench/cicd/dailybuild/dailylist

老版本界面:http://ci.openharmony.cn/dailys/dailybuilds

具体下载及如何替换这边就不啰嗦了,大家直接看 Gitee 介绍自行替换。

1.6 签名配置

关于签名配置,也不啰嗦了,下载的代码自带的文件都已经配置好,无需自己手动签名。

1.7 替换 Launcher

使用以下命令来更新编译出来的 Launcher 部件 hap 包:

ren phone_launcher-default-signed.hap Launcher.hap
ren launcher_settings-phone_launcher-default-signed.hap Launcher_Settings.haphdc target mount
hdc shell rm -rf /data/misc_de/0/mdds/0/default/bundle_manager_service
hdc shell rm -rf /data/accounts
hdc shell mount -o remount,rw /
hdc file send .\Launcher.hap /system/app/com.ohos.launcher/Launcher.hap
hdc file send .\Launcher_Settings.hap /system/app/com.ohos.launcher/Launcher_Settings.happausehdc shell mount -o remount,rw /
hdc shell rm /data/ -rf
hdc shell sync /system/bin/udevadm trigger
hdc shell reboot

二、编译运行

2.1 分支选择

拉完官方示例代码后,可以看到很多分支,我选了 OpenHarmony-4.1-Release 作为魔改的基础分支,当然你也可以根据需要选择别的分支(我是着实看不懂,搞这么多分支干什么,而且基本上彼此分支的 UI 效果大差不差,几乎所有 Openharmony 自带的系统应用 Demo UI 及功能逻辑都很 low,所以凡事靠自己,自己魔改吧!)

在这里插入图片描述

2.2 打开工程 / 编译 hap

切到对应分支后,即可打开工程,等待同步完成,如下图即可。

在这里插入图片描述

接下来可以编译 hap 包:

在这里插入图片描述

接着找到需要的 hap 包,重命名,替换后重启:

在这里插入图片描述

默认 Launcher 效果:(我手里有一台平板,所以就以平板为示例,效果要比手机少一点)

在这里插入图片描述


三、Launcher 首页

3.1 MainAbility

export default class MainAbility extends ServiceExtension {onCreate(want: Want): void {Log.showInfo(TAG,'onCreate start');this.context.area = 0;this.initLauncher();}async initLauncher(): Promise<void> {/*** 1. init Launcher context*    初始化上下文*/globalThis.desktopContext = this.context;/*** 2. init global const*    初始化全局变量*/this.initGlobalConst();/*** 3. init Gesture navigation*    初始化手势导航*/this.startGestureNavigation();/*** 4. init rdb*    初始化 rdb*/let dbStore = RdbStoreManager.getInstance();await dbStore.initRdbConfig();await dbStore.createTable();let registerWinEvent = (win: window.Window) => {win.on('windowEvent', (stageEventType) => {// 桌面获焦或失焦时,通知桌面的卡片变为可见状态if (stageEventType === window.WindowEventType.WINDOW_ACTIVE) {localEventManager.sendLocalEventSticky(EventConstants.EVENT_REQUEST_FORM_ITEM_VISIBLE, null);Log.showInfo(TAG, `lifeCycleEvent change: ${stageEventType}`);}})};/*** 5. 注册窗口事件*/windowManager.registerWindowEvent();/*** 6. 注册导航栏事件*/navigationBarCommonEventManager.registerNavigationBarEvent();/*** 7. create Launcher entry view*    创建桌面窗口*    WindowManager.ts --> DESKTOP_WINDOW_NAME = 'EntryView';*    加载 pages/EntryView*/windowManager.createWindow(globalThis.desktopContext, windowManager.DESKTOP_WINDOW_NAME,windowManager.DESKTOP_RANK, 'pages/' + windowManager.DESKTOP_WINDOW_NAME, true, registerWinEvent);/*** 8. load recent,加载 Recent 窗口*/windowManager.createRecentWindow();this.registerInputConsumer();}...
}

MainAbility 创建了桌面窗口:pages/EntryView

3.2 EntryView

📄 EntryView.ets@Entry
@Component
struct EntryView {build() {Stack() {Flex({ direction: FlexDirection.Column, ... }) {Column() {// 1. 桌面布局,类似于 Android Launcher 的 CellLayoutPageDesktopLayout();}.height(this.workSpaceHeight).onAreaChange((oldValue: Area, newValue: Area) => {Log.showDebug(TAG, `onAreaChange navigationBarStatus: ${this.navigationBarStatus}`);if (JSON.stringify(oldValue) == JSON.stringify(newValue)) return;if (this.navigationBarStatus == "1") {setTimeout(() => {SettingsModel.getInstance().setValue(this.navigationBarStatus);}, 50)}})Column() {// 2. Dock 区域,类似于 Android 的 HotseatSmartDock();}.height(this.dockHeight)}FolderOpenComponent();}.backgroundImage(StyleConstants.DEFAULT_BACKGROUND_IMAGE).backgroundImageSize(ImageSize.Cover).backgroundImagePosition(Alignment.Center).width('100%').height('100%')}}

3.3 PageDesktopLayout()

所以,我们再来看看 PageDesktopLayout() 的源码:

@Component
export struct PageDesktopLayout {build() {// 自定义的 GridSwiper 组件GridSwiper({gridConfig: this.gridConfig,mPageDesktopViewModel: mPageDesktopViewModel,dialogController: this.deviceType == CommonConstants.PAD_DEVICE_TYPE ? null : this.dialogController}).id(`${TAG}`).width(StyleConstants.PERCENTAGE_100).height(StyleConstants.PERCENTAGE_100)}}

3.4 GridSwiper

继续跟踪源码:

@Component
export default struct GridSwiper {build() {Column() {if (this.buildLog()) {}if (this.desktopLoadFinished) {// 1. 轮播布局Swiper(this.swiperController) {ForEach(this.pageList, (item: number, index: number) => {// 判断设备类型if (AppStorage.get('deviceType') == CommonConstants.DEFAULT_DEVICE_TYPE) {Column() {SwiperPage({appListInfo: $appListInfo,swiperPage: index.valueOf(),gridConfig: this.gridConfig,mPageDesktopViewModel: this.mPageDesktopViewModel}).id(`SwiperPage_${item}${index}`)}.gesture(LongPressGesture({ repeat: false }).onAction((event: GestureEvent) => {this.dialogController?.open();})).bindContextMenu(this.MenuBuilder, ResponseType.RightClick)} else {SwiperPage({appListInfo: $appListInfo,swiperPage: index.valueOf(),gridConfig: this.gridConfig,mPageDesktopViewModel: this.mPageDesktopViewModel}).id(`SwiperPage_${item}${index}`).bindContextMenu(this.MenuBuilder, ResponseType.LongPress).bindContextMenu(this.MenuBuilder, ResponseType.RightClick)}}, (item: number, index: number) => {return `${item}${index}`;})}.id(`${TAG}_Swiper`)...}}.id(`${TAG}`).alignItems(HorizontalAlign.Center).justifyContent(FlexAlign.Center).height(StyleConstants.PERCENTAGE_100).width(StyleConstants.PERCENTAGE_100)}}

我们忽略掉一些多余的代码,只看核心部分,发现都会调用 SwiperPage 组件,我们继续跟:

3.5 SwiperPage

@Component
export default struct SwiperPage {build() {// 1. 网格布局Grid() {ForEach(this.mAppListInfo, (item: LauncherDragItemInfo, index: number) => {// 2. 自组件GridItem() {if (this.buildLog(item)) {}// 3. 如果类型是 APPif (item.typeId === CommonConstants.TYPE_APP) {// 4. 具体每一个应用AppItem({item: item,mPageDesktopViewModel: this.mPageDesktopViewModel,mNameLines: this.mNameLines}).id(`${TAG}_AppItem_${index}`)} else if (item.typeId === CommonConstants.TYPE_FOLDER) {FolderItem({folderItem: item,mPageDesktopViewModel: this.mPageDesktopViewModel,mNameLines: this.mNameLines}).id(`${TAG}_FolderItem_${index}`)} else if (item.typeId === CommonConstants.TYPE_CARD) {FormItem({formItem: item}).id(`${TAG}_FormItem_${index}`)}}.id(`${TAG}_GridItem_${index}`)...}, (item: LauncherDragItemInfo, index: number) => {if (item.typeId === CommonConstants.TYPE_FOLDER) {return JSON.stringify(item);} else if (item.typeId === CommonConstants.TYPE_CARD) {return JSON.stringify(item) + this.formRefresh;} else if (item.typeId === CommonConstants.TYPE_APP) {return JSON.stringify(item);} else {return '';}})}.id(`${TAG}_Grid_${this.swiperPage}`)...}}

3.6 AppItem

@Component
export default struct AppItem {build() {Column() {// 又是一个 AppBubbleAppBubble({iconSize: this.mIconSize,nameSize: this.mAppNameSize,nameHeight: this.mAppNameHeight,nameFontColor: this.mPageDesktopViewModel?.getPageDesktopStyleConfig().mNameFontColor as string,appName: this.item.appName,bundleName: this.item.bundleName,abilityName: this.item.abilityName,moduleName: this.item.moduleName,appIconId: this.item.appIconId,appLabelId: this.item.appLabelId,badgeNumber: this.item.badgeNumber,isSelect: this.selectDesktopAppItem == this.item.keyName,getMenuInfoList: this.getMenuInfoList,mPaddingTop: this.mMarginVertical,nameLines: this.mNameLines,mIconNameMargin: this.mIconNameMargin,dragStart: this.dragStart})}.visibility(...).onMouse((event: MouseEvent) => {...}).onClick((event) => {...}).onTouch((event: TouchEvent) => {...}).width(this.mAppItemWidth).height(this.mAppItemWidth)}}

3.7 AppBubble

@Component
export struct AppBubble {build() {Column() {Column() {Column() {// 应用图标AppIcon({iconSize: this.iconSize,iconId: this.appIconId,bundleName: this.bundleName,moduleName: this.moduleName,icon: ResourceManager.getInstance().getCachedAppIcon(this.appIconId, this.bundleName, this.moduleName),badgeNumber: this.badgeNumber,useCache: this.useCache})}.onDragStart((event: DragEvent, extraParams: string) => {return this.dragStart(event);}).bindContextMenu(this.MenuBuilder, ResponseType.LongPress).onDragEnd((event: DragEvent, extraParams: string) => {...})// 应用名称AppName({nameHeight: this.nameHeight,nameSize: this.nameSize,nameFontColor: this.nameFontColor,bundleName: this.bundleName,moduleName: this.moduleName,appName: this.appName,labelId: this.appLabelId,useCache: this.useCache,nameLines: this.nameLines,marginTop: this.mIconNameMargin})}.bindContextMenu(this.MenuBuilder, ResponseType.RightClick)...}.parallelGesture(...)}}

看到这,是不是整个桌面的图标区域结构豁然开朗?看个图:

在这里插入图片描述

这篇关于【 OpenHarmony 4.1 Launcher 源码解析 】-- 初体验的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!


原文地址:
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.chinasem.cn/article/1133718

相关文章

SpringCloud动态配置注解@RefreshScope与@Component的深度解析

《SpringCloud动态配置注解@RefreshScope与@Component的深度解析》在现代微服务架构中,动态配置管理是一个关键需求,本文将为大家介绍SpringCloud中相关的注解@Re... 目录引言1. @RefreshScope 的作用与原理1.1 什么是 @RefreshScope1.

Java并发编程必备之Synchronized关键字深入解析

《Java并发编程必备之Synchronized关键字深入解析》本文我们深入探索了Java中的Synchronized关键字,包括其互斥性和可重入性的特性,文章详细介绍了Synchronized的三种... 目录一、前言二、Synchronized关键字2.1 Synchronized的特性1. 互斥2.

Python实现无痛修改第三方库源码的方法详解

《Python实现无痛修改第三方库源码的方法详解》很多时候,我们下载的第三方库是不会有需求不满足的情况,但也有极少的情况,第三方库没有兼顾到需求,本文将介绍几个修改源码的操作,大家可以根据需求进行选择... 目录需求不符合模拟示例 1. 修改源文件2. 继承修改3. 猴子补丁4. 追踪局部变量需求不符合很

Java的IO模型、Netty原理解析

《Java的IO模型、Netty原理解析》Java的I/O是以流的方式进行数据输入输出的,Java的类库涉及很多领域的IO内容:标准的输入输出,文件的操作、网络上的数据传输流、字符串流、对象流等,这篇... 目录1.什么是IO2.同步与异步、阻塞与非阻塞3.三种IO模型BIO(blocking I/O)NI

Python 中的异步与同步深度解析(实践记录)

《Python中的异步与同步深度解析(实践记录)》在Python编程世界里,异步和同步的概念是理解程序执行流程和性能优化的关键,这篇文章将带你深入了解它们的差异,以及阻塞和非阻塞的特性,同时通过实际... 目录python中的异步与同步:深度解析与实践异步与同步的定义异步同步阻塞与非阻塞的概念阻塞非阻塞同步

Redis中高并发读写性能的深度解析与优化

《Redis中高并发读写性能的深度解析与优化》Redis作为一款高性能的内存数据库,广泛应用于缓存、消息队列、实时统计等场景,本文将深入探讨Redis的读写并发能力,感兴趣的小伙伴可以了解下... 目录引言一、Redis 并发能力概述1.1 Redis 的读写性能1.2 影响 Redis 并发能力的因素二、

Spring MVC使用视图解析的问题解读

《SpringMVC使用视图解析的问题解读》:本文主要介绍SpringMVC使用视图解析的问题解读,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录Spring MVC使用视图解析1. 会使用视图解析的情况2. 不会使用视图解析的情况总结Spring MVC使用视图

利用Python和C++解析gltf文件的示例详解

《利用Python和C++解析gltf文件的示例详解》gltf,全称是GLTransmissionFormat,是一种开放的3D文件格式,Python和C++是两个非常强大的工具,下面我们就来看看如何... 目录什么是gltf文件选择语言的原因安装必要的库解析gltf文件的步骤1. 读取gltf文件2. 提

Java中的runnable 和 callable 区别解析

《Java中的runnable和callable区别解析》Runnable接口用于定义不需要返回结果的任务,而Callable接口可以返回结果并抛出异常,通常与Future结合使用,Runnab... 目录1. Runnable接口1.1 Runnable的定义1.2 Runnable的特点1.3 使用Ru

Spring 中 BeanFactoryPostProcessor 的作用和示例源码分析

《Spring中BeanFactoryPostProcessor的作用和示例源码分析》Spring的BeanFactoryPostProcessor是容器初始化的扩展接口,允许在Bean实例化前... 目录一、概览1. 核心定位2. 核心功能详解3. 关键特性二、Spring 内置的 BeanFactory