Electron for鸿蒙PC项目实战之天气预报应用

天气应用

这是一个基于Electron开发的天气预报应用，提供实时天气信息、逐小时和7天天气预报功能。

功能特性

城市搜索和位置查询
实时天气信息展示（温度、天气状况、湿度、风速、气压、能见度）
24小时逐时预报
7天天气预报
温度单位切换（摄氏度/华氏度）
主题切换（明亮/暗黑/跟随系统）
自动刷新设置
网络状态监测
默认位置设置

使用方法

安装依赖：
bash 复制代码
```
npm install
```
启动应用：
bash 复制代码
```
npm start
```

快捷键

Ctrl+F - 聚焦搜索框
Ctrl+, - 打开设置面板

项目结构

main.js - 主进程代码，负责窗口创建和菜单管理
preload.js - 预加载脚本，提供IPC通信桥接
renderer.js - 渲染进程代码，处理天气数据获取和UI更新
index.html - 应用界面
style.css - 应用样式

开发说明

本项目使用Electron 25.0.0和axios 1.6.0
由于是演示项目，天气数据使用模拟数据
支持Windows、macOS和Linux平台，鸿蒙PC平台

鸿蒙PC适配改造指南

1. 环境准备

系统要求：Windows 10/11、8GB RAM以上、20GB可用空间
工具安装 ：

DevEco Studio 5.0+（安装鸿蒙SDK API 20+）
Node.js 18.x+

2. 获取Electron鸿蒙编译产物

登录Electron 鸿蒙官方仓库
下载Electron 34+版本的Release包（.zip格式）
解压到项目目录，确认electron/libs/arm64-v8a/下包含核心.so库

3. 部署应用代码

将Electron应用代码按以下目录结构放置：

plaintext 复制代码

web_engine/src/main/resources/resfile/resources/app/
├── main.js
├── package.json
└── src/
    ├── index.html
    ├── preload.js
    ├── renderer.js
    └── style.css

4. 配置与运行

打开项目：在DevEco Studio中打开ohos_hap目录
配置签名 ：

进入File → Project Structure → Signing Configs
自动生成调试签名或导入已有签名
连接设备 ：

启用鸿蒙设备开发者模式和USB调试
通过USB Type-C连接电脑
编译运行：点击Run按钮或按Shift+F10

5. 验证检查项

✅ 应用窗口正常显示
✅ 窗口大小可调整，响应式布局生效
✅ 控制台无"SysCap不匹配"或"找不到.so文件"错误
✅ 动画效果正常播放

跨平台兼容性

平台	适配策略	特殊处理
Windows	标准Electron运行	无特殊配置
macOS	标准Electron运行	保留dock图标激活逻辑
Linux	标准Electron运行	确保系统依赖库完整
鸿蒙PC	通过Electron鸿蒙适配层	禁用硬件加速，使用特定目录结构

鸿蒙开发调试技巧

1. 日志查看

在DevEco Studio的Log面板中过滤"Electron"关键词，查看应用运行日志和错误信息。

2. 常见问题解决

"SysCap不匹配"错误：检查module.json5中的reqSysCapabilities，只保留必要系统能力
"找不到.so文件"错误：确认arm64-v8a目录下四个核心库文件完整
窗口不显示：在main.js中添加app.disableHardwareAcceleration()
动画卡顿：简化CSS动画效果，减少重绘频率