一、环境准备

鸿蒙官方提供的构建完成的 Electron 框架包开发鸿蒙版本，VIR代码仓地址

1、鸿蒙工具

• 鸿蒙官方开发工具DevEco Studio

  开发环境： Windows
  开发工具：DevEco Studio 下载地址
  

• 鸿蒙官方提供的构建完成的 Electron 框架包
  仓库地址：Electron-25.x版本

  通过切换分支可以查看支持的版本
  
  下载所需 Electron 版本包后，本地解压。目录结构如下：
  libelectron/
  ├── lib.unstripped/
  └── ohos_hap/
  ├── AppScope/ --------------应用的配置内容
  ├── electron/
  │ ├── build/
  │ │ ├── default/
  │ │ │ └── outputs/
  │ │ │ └── default/
  │ │ │ ├── electron-default-signed.hap --------------产物：hap包
  │ │ │ ├── electron-default-unsigned.hap
  ├── web_engine/
  │ ├── src/
  │ │ ├── main/
  │ │ │ └── resources/
  │ │ │ └── resfile/
  │ │ │ └── resources/
  │ │ │ └── app/ --------------Electron 代码放置的位置

• IDE中完成应用的签名
  可以在官方文档查阅签名方式。当前使用的是个人签名，签名的步骤如下：

  
  
  首次可能会提示登录，可以登录后，按照此步骤完成应用签名。

2、智能时间管理工具

• 选择了 github 开源的优质本地图片处理桌面工具项目：VIR代码仓地址，拉取 master 分支代码。

• 笔者所写时此项目使用的 Electron 版本为 12.2.3，因为鸿蒙版最低版本是 25，故此选择了 25.x 版本的框架。使用 AI Cli 工具或者 AI IDE 将项目使用的 Electron 升级为25.0.0（AI 对话处可输入：请帮我把工作区项目使用的electron升级为25.0.0并成功启动运行。遇到报错可以与 AI 发起多轮修复对话，确保最终可以正常启动），以确保鸿蒙版本任意 25.x 版本都能支持。适配鸿蒙设备的代码仓地址

• 放置后目录结构如下：
  

• app 相当于一个完整的 Electron 项目，因此可以在 app 目录下执行：
  安装依赖：npm install
  启动运行：npm run electron:local

• DevEco Studio 点击调试按钮，进行构建调试
  

二、源代码本地运行问题及解决方法

1、 DevEco Studio 构建的时候会出现报错，提示超出 65,535 文件个数限制

原因：node_modules下存在的依赖也要被打包构建，导致文件个数很大。
方法：依赖分析结果显示，material-design-icons 目录下包含多达 97,816 个文件，而实际项目中仅使用了 iconfont 目录。因此，只需保留 iconfont 目录并删除其他所有目录，就能满足项目需求。

三、二次开发功能点

1、 新增【中/英】语言切换，默认为中文；

2、 新增【深/浅】主题模式切换功能；

3、 样式风格优化为商务风；

四、应用显示

五、致谢

感谢开源代码 Coder 的贡献 ！✿✿ヽ(°▽°)ノ✿