什么是Electron
简单的讲就是，使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架，
这篇博客将介绍Electron的最基本的使用—–打包自己的博客变成桌面App
创建一个文件夹
初始化，也就是记录版本与使用的依赖包
npm init将项目导入 Forge（注意兼容性）
npm install --save-dev @electron-forge/cli
npx electron-forge import这一步可能会出现node版本过高的错误，建议降低node版本（网上有很多教程），使其可以兼容Electron，
注意node版本降低后，要重新全局安装npm哦！！
安装成功后package.json会出现以下内容：
"scripts": {
"start": "electron-forge start",
"package": "electron-forge package",
"make": "electron-forge make"
},建立一个js文件
名字要与package.json这个相同
"main": "index.js",将以下内容写入index.js中
const { app, BrowserWindow } = require('electron')
const path = require('path')
function createWindow () {
const win = new BrowserWindow({
<!-- 更改窗口尺寸-->
width: 1000,
height: 800,
webPreferences: {
preload: path.join(__dirname, 'preload.js')
}
})
win.loadURL('自己博客的地址')
}
app.whenReady().then(() => {
createWindow()
app.on('activate', () => {
if (BrowserWindow.getAllWindows().length === 0) {
createWindow()
}
})
})
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit()
}
})将win.loadURL的地址写上自己博客的即可
执行
npm start可以看效果
更改图标
修改forge.config.js的内容
const path = require('path')
module.exports = {
packagerConfig: {
// 自定义图标
icon: path.join(__dirname, './favicon.ico')
},
rebuildConfig: {},
makers: [
{
name: '@electron-forge/maker-squirrel',
config: {},
},
{
name: '@electron-forge/maker-zip',
platforms: ['darwin'],
},
{
name: '@electron-forge/maker-deb',
config: {},
},
{
name: '@electron-forge/maker-rpm',
config: {},
},
],
};
生成桌面应用
执行
npm run make出现out文件夹，打开里面的.exe文件即可
注意ico的尺寸必须是256*256的，不然设置不上去，然后ico图标由于缓存可能会有延迟