5.4 加载和显示不同类型的资源
Electron 支持加载和显示多种类型的资源,包括图片、视频和其他静态文件。
5.4.1 加载图片的示例代码
index.html:
<!DOCTYPE html>
<html>
<head>
<title>Load Image</title>
</head>
<body>
<h1>Load Image Example</h1>
<img src="path/to/image.jpg" alt="Example Image">
</body>
</html>
5.4.2 加载视频的示例代码
index.html:
<!DOCTYPE html>
<html>
<head>
<title>Load Video</title>
</head>
<body>
<h1>Load Video Example</h1>
<video width="600" controls>
<source src="path/to/video.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</body>
</html>
5.5 处理加载错误
在加载内容时,可能会遇到各种错误,例如网络问题或文件不存在。我们可以通过监听 webContents
事件来处理这些错误。
5.5.1 处理加载错误的示例代码
主进程代码:
const { app, BrowserWindow } = require('electron');
const path = require('path');
let mainWindow;
const createMainWindow = () => {
mainWindow = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
preload: path.join(__dirname, 'preload.js'),
contextIsolation: true,
nodeIntegration: false
}
});
// 监听加载失败事件
mainWindow.webContents.on('did-fail-load', (event, errorCode, errorDescription, validatedURL) => {
console.error(`Failed to load ${validatedURL}: ${errorDescription} (${errorCode})`);
// 显示错误页面
mainWindow.loadFile('error.html');
});
// 加载本地的 index.html 文件
mainWindow.loadFile('index.html');
// 打开开发者工具(仅在开发阶段使用)
mainWindow.webContents.openDevTools();
mainWindow.on('closed', () => {
mainWindow = null;
});
};
app.on('ready', createMainWindow);
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit();
}
});
app.on('activate', () => {
if (mainWindow === null) {
createMainWindow();
}
});
error.html:
<!DOCTYPE html>
<html>
<head>
<title>Error</title>
</head>
<body>
<h1>Failed to load content</h1>
<p>There was an error loading the requested content. Please try again later.</p>
</body>
</html>
5.6 使用 WebView 标签
WebView
标签允许在 Electron 应用中嵌入其他 Web 内容,类似于一个嵌入的浏览器。它运行在独立的进程中,并且具有更高的安全性和稳定性。
5.6.1 使用 WebView 标签的示例代码
index.html:
<!DOCTYPE html>
<html>
<head>
<title>WebView Example</title>
</head>
<body>
<h1>WebView Example</h1>
<webview id="foo" src="https://www.example.com" style="width:800px; height:600px"></webview>
</body>
</html>
主进程代码:
const { app, BrowserWindow } = require('electron');
const path = require('path');
let mainWindow;
const createMainWindow = () => {
mainWindow = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
preload: path.join(__dirname, 'preload.js'),
contextIsolation: true,
nodeIntegration: false,
webviewTag: true // 启用 WebView 标签
}
});
mainWindow.loadFile('index.html');
mainWindow.on('closed', () => {
mainWindow = null;
});
};
app.on('ready', createMainWindow);
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit();
}
});
app.on('activate', () => {
if (mainWindow === null) {
createMainWindow();
}
});
通过本章内容,你已经了解了如何在 Electron 应用中加载和显示各种内容,包括本地 HTML 文件、远程 URL、动态内容以及各种类型的资源,并处理加载错误和使用 WebView
标签。接下来的章节将继续深入探讨更多高级功能和最佳实践,帮助你进一步掌握 Electron 开发。