- 安装electron, electron-prebuilt
$ npm install cnpm -g --registry=http://registry.npm.taobao.org
$ cnpm install electron -g
$ cnpm install electron-prebuilt -g
- 安装electron-packager, electron-builder, asar
$ cnpm install electron-packager -g
$ cnpm install electron-builder -g
$ cnpm install asar -g
- 初始化项目
$ cnpm init
执行完后, 当前目录下生成package.json文件
{
"name": "own-runner",
"version": "1.0.0",
"description": "神器",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "PeopleName",
"license": "ISC"
}
- 添加index.html, index.js
index.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8"/>
<title>test</title>
</head>
<body>
Hello World!
<button id="button">点击这里</button>
<script>
console.log(window)
var button = document.getElementById('button');
button.onclick = function(){
alert("Hello Electron!")
}
</script>
</body>
</html>
index.js
const {app, BrowserWindow} = require('electron')
const path = require('path')
const url = require('url')
// 保存窗口对象的全局引用, 如果不这样做, 当JavaScript对象被当做垃圾回收时，window窗口会自动关闭
let win
function createWindow () {
// 创建浏览器窗口.
win = new BrowserWindow({width: 800, height: 600,autoHideMenuBar :true})
win.setMenu(null);
// 加载项目的index.html文件.
win.loadURL(url.format({
pathname: path.join(__dirname, 'index.html'),
protocol: 'file:',
// 当窗口关闭时候的事件.
slashes: true
}))
// 打开开发工具.
//win.webContents.openDevTools()
win.on('closed', () => {
// 取消引用窗口对象, 如果你的应用程序支持多窗口，通常你会储存windows在数组中，这是删除相应元素的时候。
console.log("haha");
win = null
})
}
app.on('activate', () => {
console.log('activate')
if (win === null) {
createWindow()
} else {
win.show()
}
})
// 当Electron完成初始化并准备创建浏览器窗口时，将调用此方法
// 一些api只能在此事件发生后使用。
app.on('ready', createWindow)
// 当所有窗口关闭时退出。
app.on('window-all-closed', () => {
// 在macOS上，用得多的是应用程序和它们的菜单栏，用Cmd + Q退出。
if (process.platform !== 'darwin') {
app.quit()
}
})
app.on('activate', () => {
// 在macOS上，当点击dock图标并且没有其他窗口打开时，通常会在应用程序中重新创建一个窗口。
if (win === null) {
createWindow()
}
})
- 修改package.json
"scripts": {
"start": "electron .",
"pack": "electron-builder --dir",
"dist": "electron-builder"
},
"build": {
"appId": "随意",
"win": {
}
},
- 打包或运行
$ npm|cnpm|yarn install
$ npm|cnpm|yarn dist #dist目录下生成exe文件
$ npm|cnpm|yarn start #运行
Ref.
Electron: https://electronjs.org/docs
