- 教程
- https://zhuanlan.zhihu.com/p/161864662
-
步骤
-
安装nodej.s
- 如何查看自己是否安装了node.js
-
安装asar
- 如何查看自己是否安装了asar
- npm install -g asar
-
安装Electron
-
下载windows安装包
- Release electron v9.1.0 · electron/electron · GitHub
- 这里需要注意的是，一定要下载windows平台安装包，否则后面会报错
-
配置Electron
-
在Electron目录中新建app目录, 放置如下两个文件:
- 两个文件分别的代码如下
- 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目录中新建app目录, 放置如下两个文件:
-
下载windows安装包
-
进行打包
- 使用如下命令打包
-
进入electron/resources目录，将这个文件夹下原有的default_app.asar来删除
- 到根目录下进行打包，这里一定要看清楚，一定是该目录点，其他目录会报错的
-
asar pack app default_app.asar
- 这个代码的运行速度非常快，瞬间就可以完成
- 运行代码之后会在根目录下生成一个default_app.asar
- 我们将这个文件重新放到resources下面，那么整个打包过程就算完成了
-
运行
- 运行electon.exe文件即可 ，如果你有需求的话，可以将其改下名即可
- 可以看到我们百度一下，你就知道的网页已经出来了
-
安装nodej.s
-
出现的问题
-
打包完成之后，双击excel文件没反应
-
有可能是打包的这个软件不适合于当前系统环境
- 可以看一下自己下载的这个文件是不是自己对应平台的，会不会下载错成linux或者make平台下的了
-
确保自己main.js 和package.json两个文件里面的内容不为空
- 有时候就犯这么低级的错误
-
有可能是打包的这个软件不适合于当前系统环境
-
不生成exe文件
- 打包一定是在根目录下对APP文件夹进行打包的，不要去resources下面打包，这个问题自己卡了好长一段时间，后来才在大佬的指导下解决的
-
'electron' 不是内部或外部命令，也不是可运行的程序 或批处理文件。
- 安装electron即可
- npm install electron -g
-
打包完成之后，双击excel文件没反应
-
需要注意的问题
- 必须在英文路径下，否则会报错
-
Windows平台下使用electron进行网页打包
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
- 文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
推荐阅读更多精彩内容
- Electron介绍 简单来说，Electron就是可以让你用Javascript、HTML、CSS来编写运行于W...
- 今天青石的票圈出镜率最高的，莫过于张艺谋的新片终于定档了。 一张满溢着水墨风的海报一次次的出现在票圈里，也就是老谋...
