-
步骤
-
安装nodej.s
- 如何查看自己是否安装了node.js
-
安装asar
-
如何查看自己是否安装了asar
-
npm install -g asar
-
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-EIftqvHD-1634137192052)(data:image/svg+xml;utf8, )]
-
-
安装Electron
-
下载windows安装包
-
Release electron v9.1.0 · electron/electron · GitHub
-
这里需要注意的是,一定要下载windows平台安装包,否则后面会报错
-
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-m8lQ5Yhk-1634137192063)(data:image/svg+xml;utf8, )]
-
-
配置Electron
-
在Electron目录中新建app目录, 放置如下两个文件:
-
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-o1Z5gaTF-1634137192069)(data:image/svg+xml;utf8, )]
-
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-iaf8pJtc-1634137192074)(data:image/svg+xml;utf8, )]
-
-
两个文件分别的代码如下
-
main.js
-
如果你的网址有变化的话,就修改一下 const mainWindowURL 变量的值
-
// app 模块是为了控制整个应用的生命周期设计的。
// BrowserWindow 类让你有创建一个浏览器窗口的权力。
const {app, BrowserWindow, Menu, ipcMain} = require(‘electron’);
const nativeImage = require(‘electron’).nativeImage;
var overlay = nativeImage.createFromPath(‘icon.png’);const mainWindowURL = ‘https://www.processon.com’;
let mainWindow;
//api:https://wizardforcel.gitbooks.io/electron-doc/content/api/browser-window.html
function createWindow () {
console.log(“createWindow…”);
mainWindow = new BrowserWindow({
// fullscreen: true,
maximizable: true, //支持最大化
show: false, //为了让初始化窗口显示无闪烁,先关闭显示,等待加载完成后再显示。
// icon: “https://medical.3vyd.com/alk/prod/pc/icon/icon.ico”
})// Emitted when the window is closed.
mainWindow.on(‘closed’, function () {
console.log(“closed…”);
mainWindow = null;
})
// mainWindow.once(‘ready-to-show’, () => { //开启这个以后点击了图片虽然没有白屏,但是会感觉不到点了没点
mainWindow.maximize(); //打开时最大化打开,不是全屏,保留状态栏
// })// mainWindow.setOverlayIcon(overlay, “ProcessOn”)
mainWindow.setTitle(“ProcessOn”);
mainWindow.setAutoHideMenuBar(true);//自动隐藏菜单
mainWindow.loadURL(mainWindowURL);
// app.commandLine.appendSwitch("–disable-http-cache") 禁用缓存
// mainWindow.webContents.openDevTools({mode:‘bottom’});
mainWindow.show();
}app.on(‘ready’, function() {
console.log(“ready…”);
createWindow();
});// Quit when all windows are closed.
app.on(‘window-all-closed’, function () {
// On OS X it is common for applications and their menu bar
// to stay active until the user quits explicitly with Cmd + Q
if (process.platform !== ‘darwin’) {
app.quit();
}
}) -
package.json
-
{ “name”: “electron”, “productName”: “Electron”, “main”: “main.js” }
-
-
-
进行打包
-
使用如下命令打包
-
进入electron/resources目录,将这个文件夹下原有的default_app.asar来删除
-
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WOYYHohk-1634137192077)(data:image/svg+xml;utf8, )]
-
-
到根目录下进行打包,这里一定要看清楚,一定是该目录点,其他目录会报错的
-
asar pack app default_app.asar
-
这个代码的运行速度非常快,瞬间就可以完成
-
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LuTWkFRb-1634137192080)(data:image/svg+xml;utf8, )]
-
运行代码之后会在根目录下生成一个default_app.asar
-
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fDE9qg19-1634137192084)(data:image/svg+xml;utf8, )]
-
我们将这个文件重新放到resources下面,那么整个打包过程就算完成了
-
-
-
运行
-
运行electon.exe文件即可 ,如果你有需求的话,可以将其改下名即可
-
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-c6Ny2qIO-1634137192088)(data:image/svg+xml;utf8, )]
-
可以看到我们百度一下,你就知道的网页已经出来了
-
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZHCpvIcC-1634137192091)(data:image/svg+xml;utf8, )]
-
-
-
出现的问题
- 打包完成之后,双击excel文件没反应
- 有可能是打包的这个软件不适合于当前系统环境
- 可以看一下自己下载的这个文件是不是自己对应平台的,会不会下载错成linux或者make平台下的了
- 确保自己main.js 和package.json两个文件里面的内容不为空
- 有时候就犯这么低级的错误
- 有可能是打包的这个软件不适合于当前系统环境
- 不生成exe文件
- 打包一定是在根目录下对APP文件夹进行打包的,不要去resources下面打包,这个问题自己卡了好长一段时间,后来才在大佬的指导下解决的
- ‘electron’ 不是内部或外部命令,也不是可运行的程序 或批处理文件。
- 安装electron即可
- npm install electron -g
- 打包完成之后,双击excel文件没反应
-
需要注意的问题
- 必须在英文路径下,否则会报错
Windows平台下使用electron进行网页打包
最新推荐文章于 2024-05-12 12:08:17 发布