Electron项目结构的搭建
1. 直接搭建electron的项目
// 全局安装webpack了的话 生成package.json
npm init
// 1.本地开发环境安装electron库
npm i -D electron
// 在目录下书写 主进程 渲染进程入口文件 main.js为主进程入口 index.html 为 渲染进程入口页面
// 这里就是主进程
// 引入electron中的两个模块
// app 是应用对象 BrowserWindow是窗口对象
//一个electron项目可以打开多个窗口但是应用对象是一个
const {app, BrowserWindow} = require('electron');
let mainWindow
function createWindow () {
// 创建窗口 并配置窗口属性
mainWindow = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true // web页面是否可以使用node模块
}
})
// 加载index.html文件 这是通过直接加载文件的形势也可以用loadURL
// mainWindow.loadFile('index.html')
mainWindow.loadURL(`file://${__dirname}/index.html`)
// 打开开发者工具
win.webContents.openDevTools()
// 当 window 被关闭，这个事件会被触发。
mainWindow.on('closed', function () {
// 取消引用 window 对象，如果你的应用支持多窗口的话，
// 通常会把多个 window 对象存放在一个数组里面，
// 与此同时，你应该删除相应的元素。
mainWindow = null
})
}
// Electron 会在初始化后并准备
// 创建浏览器窗口时，调用这个函数。
// 部分 API 在 ready 事件触发后才能使用。
app.on('ready', createWindow)
// 当全部窗口关闭时退出。
app.on('window-all-closed', function () {
if (process.platform !== 'darwin') app.quit()
})
- 配合vue或react单页面应用搭建项目
// 全局安装脚手架
npm install --global vue-cli
// 生成vue web项目目录
vue init webpack test
// 把webpack配置文件的config /index.js 下的build的assetsPublicPath绝对路径改成相对路径
// 更改完路径 还有可以通过electron运行起来就可以打包了
// 打包需要安装 electron-packager
npm i -D electron-packager
// 在package.json 设置打包路径跟打包环境图标等等 也可以使用electron-builder
// 记着引入package.json main设置入口文件 还有文件打开路径根据环境不同设置加载的页面路径不一样
electron-packager ./dist --out ./www --overwrite --platform=win32 --arch=x64
