全文参考:
https://blog.csdn.net/g6666123/article/details/78885813
https://electron.org.cn/build.html
需要安装:
1、 nodejs、npm、查看版本号验证安装成功
2、 electron、并验证安装成功
3、 electron-builder,
全局安装命令:
npm install –g electron
npm install –g electron-builder
安装路径为:C:\Users\Administrator\AppData\Roaming\npm\node_modules
4、 编译命令:
electron-builder --win
测试结果:在workspace\dist\win-unpacked\dappworks.exe,双击打开
程序安装:在workspace\dist\dappworks Setup 0.1.0.exe,双击安装程序
默认安装在C:\Users\Administrator\AppData\Roaming\dappworks
其中dappworks 均为package.json中name的值
新建electron工作区workspace
目录结构如图:
- 创建文件package.json(调用main入口)
{
"name": "dappworks",
"version": "0.1.0",
"main": "main.js",
"scripts": {
"start": "electron .",
"package": "electron-packager . --overwrite --platform=win32 --arch=x64 --out=out"
}
}
- 创建文件main.js(调用url)
const {app, BrowserWindow} = require('electron')
//声明我们的greeting窗体变量
let greetingWin;
//当app完成初始化时,执行窗体的创建。
app.on('ready', createGreetingWindow)
function createGreetingWindow(){
//构建一个高600,宽800的窗体,可以认为,一个窗体是一个浏览器的tab选项卡。
greetingWin = new BrowserWindow({width: 800, height: 600})
//窗体中显示的内容是index.html文件中的内容,将按照google浏览器的渲染方式,渲染显示。
//__dirname,表示main.js所在的目录路径
//greetingWin.loadURL(__dirname + "/index.html")//http://localhost:8080/#/home
greetingWin.loadURL("http://localhost:8080/#/home")//
//监听窗体关闭事件,当窗体已经关闭时,将win赋值为null,垃圾回收。
greetingWin.on('closed', () => {
win = null
})
}
- 创建文件index.html(实际没有用到)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello Electron!</title>
</head>
<body>
<h1>Hello Electron!</h1>
</body>
</html>