electron页面加载方式

Electron加载页面的方式

• base::Electron
• child::Electron运行原理

直接加载本地文件

// 在主进程中
const win = new BrowserWindow({
  width: 800,
  height: 600
});
 
// 直接加载本地HTML文件
win.loadFile('index.html');

特点

• 简单直接，适合纯静态应用
• 路径解析基于应用根目录
• 受同源策略限制，需要额外配置跨域

通过启动后端服务加载

// 在主进程中启动服务器
const server = http.createServer((req, res) => {
  // 处理请求...
});
server.listen(3000);
 
// 加载本地服务器提供的页面
win.loadURL('http://localhost:3000');

常见方法

• 内置Express服务器：在Electron内部启动Express服务
• electron-server：专门为Electron设计的轻量级服务器模块
• 使用webpack-dev-server：开发阶段热更新

特点

• 更灵活，支持动态内容和API请求
• 便于开发阶段的热更新
• 解决了某些跨域和资源访问问题

本地HTML文件路径问题

• 当通过loadFile加载本地HTML时，HTML中的相对路径是相对于HTML文件所在位置
• 解决方法：
  • 使用绝对路径：__dirname + '/assets/image.png'
  • 使用协议路径：file://path/to/resource
  • 使用自定义协议：app.setAsDefaultProtocolClient('myapp')

最佳实践

• 简单应用：直接使用loadFile加载本地文件
• 复杂应用：使用内部服务器提供更灵活的加载机制