在桌面端开发中，electron允许开发者使用html5、css和javascript技术栈构建跨平台应用，将网页技术的能力延伸到桌面场景。下面介绍具体的集成操作步骤。
环境准备
首先需要安装node.js环境，然后全局安装electron脚手架工具，执行以下命令：
# 安装electron脚手架 npm install -g electron # 创建项目目录并初始化 mkdir electron-html5-demo cd electron-html5-demo npm init -y # 安装electron依赖 npm install electron --save-dev
项目基础结构搭建
创建标准的electron项目目录，将html5相关资源放到指定文件夹中，基础结构如下：
- main.js：主进程文件，负责创建应用窗口
- preload.js：预加载脚本，用于桥接主进程和渲染进程
- html5-assets/：存放html5项目的静态资源，包括html、css、js、图片等
- package.json：项目配置文件
主进程配置加载html5页面
修改main.js文件，配置窗口加载本地html5入口文件，核心代码如下：
const { app, BrowserWindow } = require('electron')
const path = require('path')
function createWindow() {
// 创建浏览器窗口
const mainWindow = new BrowserWindow({
width: 1200,
height: 800,
webPreferences: {
preload: path.join(__dirname, 'preload.js'),
// 允许加载本地文件
webSecurity: false
}
})
// 加载html5项目的入口文件
// 这里加载html5-assets目录下的index.html
mainWindow.loadFile(path.join(__dirname, 'html5-assets/index.html'))
// 打开开发者工具方便调试
mainWindow.webContents.openDevTools()
}
app.whenReady().then(() => {
createWindow()
app.on('activate', function () {
if (BrowserWindow.getAllWindows().length === 0) {
createWindow()
}
})
})
app.on('window-all-closed', function () {
if (process.platform !== 'darwin') {
app.quit()
}
})
html5页面适配与功能扩展
原有的html5页面可以直接放到html5-assets目录中使用，若有需要可以针对桌面端做适配调整。比如修改页面视口设置，适配桌面端窗口尺寸：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>html5桌面端应用</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<h1>欢迎使用html5桌面端应用</h1>
<p>这是通过electron集成的html5页面</p>
<button id="testBtn">点击测试</button>
</div>
<script src="app.js"></script>
</body>
</html>
如果需要调用electron的原生能力，可以在preload.js中暴露接口给渲染进程：
const { contextBridge } = require('electron')
// 向渲染进程暴露electron相关接口
contextBridge.exposeInMainWorld('electronAPI', {
// 示例：获取应用版本号
getAppVersion: () => require('electron').app.getVersion()
})
在html5的js文件中就可以调用这些接口：
// app.js内容
document.getElementById('testBtn').addEventListener('click', () => {
// 调用electron暴露的接口
const version = window.electronAPI.getAppVersion()
alert('当前应用版本号：' + version)
})
常见问题解决
本地资源加载失败
如果出现html5页面中引用的css、js、图片等资源加载失败，需要检查路径是否正确，同时确认主进程中webPreferences的webSecurity设置为false，允许加载本地资源。
跨域请求问题
html5页面中如果有跨域请求，可以在主进程中设置webPreferences的webSecurity为false，或者在主进程中配置session的权限，允许对应的跨域请求。
窗口尺寸适配问题
可以在html5的css中设置容器宽度为100%，高度自适应窗口尺寸，同时监听窗口resize事件调整页面布局，保证页面在不同尺寸的桌面窗口中正常显示。