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

2024-09-03 18:36
文章标签 源码 解析 初体验 launcher openharmony 4.1

本文主要是介绍【 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。

相关文章

全面解析HTML5中Checkbox标签

全面解析HTML5中Checkbox标签

《全面解析HTML5中Checkbox标签》Checkbox是HTML5中非常重要的表单元素之一，通过合理使用其属性和样式自定义方法，可以为用户提供丰富多样的交互体验，这篇文章给大家介绍HTML5中C... 在html5中，Checkbox（复选框）是一种常用的表单元素，允许用户在一组选项中选择多个项目。本
阅读更多...
Python包管理工具核心指令uvx举例详细解析

Python包管理工具核心指令uvx举例详细解析

《Python包管理工具核心指令uvx举例详细解析》：本文主要介绍Python包管理工具核心指令uvx的相关资料,uvx是uv工具链中用于临时运行Python命令行工具的高效执行器,依托Rust实... 目录一、uvx 的定位与核心功能二、uvx 的典型应用场景三、uvx 与传统工具对比四、uvx 的技术实
阅读更多...
SpringBoot排查和解决JSON解析错误(400 Bad Request)的方法

SpringBoot排查和解决JSON解析错误(400 Bad Request)的方法

《SpringBoot排查和解决JSON解析错误(400BadRequest)的方法》在开发SpringBootRESTfulAPI时,客户端与服务端的数据交互通常使用JSON格式,然而,JSON... 目录问题背景1. 问题描述2. 错误分析解决方案1. 手动重新输入jsON2. 使用工具清理JSON3.
阅读更多...
Redis过期删除机制与内存淘汰策略的解析指南

Redis过期删除机制与内存淘汰策略的解析指南

《Redis过期删除机制与内存淘汰策略的解析指南》在使用Redis构建缓存系统时,很多开发者只设置了EXPIRE但却忽略了背后Redis的过期删除机制与内存淘汰策略,下面小编就来和大家详细介绍一下... 目录1、简述2、Redis http://www.chinasem.cn的过期删除策略（Key Expir
阅读更多...
Go学习记录之runtime包深入解析

Go学习记录之runtime包深入解析

《Go学习记录之runtime包深入解析》Go语言runtime包管理运行时环境,涵盖goroutine调度、内存分配、垃圾回收、类型信息等核心功能,：本文主要介绍Go学习记录之runtime包的... 目录前言：一、runtime包内容学习1、作用：① Goroutine和并发控制：② 垃圾回收：③ 栈和
阅读更多...
Spring组件实例化扩展点之InstantiationAwareBeanPostProcessor使用场景解析

Spring组件实例化扩展点之InstantiationAwareBeanPostProcessor使用场景解析

《Spring组件实例化扩展点之InstantiationAwareBeanPostProcessor使用场景解析》InstantiationAwareBeanPostProcessor是Spring... 目录一、什么是InstantiationAwareBeanPostProcessor？二、核心方法解
阅读更多...
深入解析 Java Future 类及代码示例

深入解析 Java Future 类及代码示例

《深入解析JavaFuture类及代码示例》JavaFuture是java.util.concurrent包中用于表示异步计算结果的核心接口,下面给大家介绍JavaFuture类及实例代码,感兴... 目录一、Future 类概述二、核心工作机制代码示例执行流程2. 状态机模型3. 核心方法解析行为总结：三
阅读更多...
springboot项目中使用JOSN解析库的方法

springboot项目中使用JOSN解析库的方法

《springboot项目中使用JOSN解析库的方法》JSON,全程是JavaScriptObjectNotation,是一种轻量级的数据交换格式,本文给大家介绍springboot项目中使用JOSN... 目录一、jsON解析简介二、Spring Boot项目中使用JSON解析1、pom.XML文件引入依
阅读更多...
Python中文件读取操作漏洞深度解析与防护指南

Python中文件读取操作漏洞深度解析与防护指南

《Python中文件读取操作漏洞深度解析与防护指南》在Web应用开发中,文件操作是最基础也最危险的功能之一,这篇文章将全面剖析Python环境中常见的文件读取漏洞类型,成因及防护方案,感兴趣的小伙伴可... 目录引言一、静态资源处理中的路径穿越漏洞1.1 典型漏洞场景1.2 os.path.join()的陷
阅读更多...
C#代码实现解析WTGPS和BD数据

C#代码实现解析WTGPS和BD数据

《C#代码实现解析WTGPS和BD数据》在现代的导航与定位应用中,准确解析GPS和北斗（BD）等卫星定位数据至关重要,本文将使用C#语言实现解析WTGPS和BD数据,需要的可以了解下... 目录一、代码结构概览1. 核心解析方法2. 位置信息解析3. 经纬度转换方法4. 日期和时间戳解析5. 辅助方法二、L
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2