Electron入手

前言

这是开发三端的一个框架,Win + Linux + MAC

入手

秉持一贯风格,上代码
首先package.json添加一些东西,参照google的方法添加注释

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
"main": "main.js",
"build": {
"//": "",
"appId": "Flands",
"copyright": "Open Totally",
"compression": "normal",
"//": "不知道干嘛的,nsis是微软的一个打包程序,自行搜索",
"nsis": {
"oneClick": true,
"perMachine": true,
"runAfterFinish": true
},
"//": "关键点,这是要打包进去的文件,就资源+html+main.js",
"//": "因为我用的vue,编译后是这些东西,添加就好",
"files": [
"dist/static",
"dist/*.html",
"*.js"
]
},
"scripts": {
"dev": "node build/dev-server.js",
"build": "node build/build.js",
"//": "分别是调试运行,打包exe运行,打包成单个exe文件",
"//": "打包在dist/win-unpacked里,有个exe文件就是",
"start": "electron .",
"pack": "electron-builder --dir",
"dist": "electron-builder"
},
"devDependencies": {
"//": "添加的框架,注意是dev里,builder是打包的工具,packager是builder的依赖",
"electron": "^1.7.9",
"electron-builder": "^19.48.2",
"electron-packager": "^10.1.0",
}

根目录创建main.js,这是配置文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
const electron = require('electron')
// Module to control application life.
const app = electron.app
// Module to create native browser window.
const BrowserWindow = electron.BrowserWindow
// const newWindowBtn = document.getElementById('frameless-window')

const path = require('path')
const url = require('url')

// Keep a global reference of the window object, if you don't, the window will
// be closed automatically when the JavaScript object is garbage collected.
let mainWindow

function createWindow() {
// Create the browser window.
mainWindow = new BrowserWindow({
width: 800,
height: 600
})

// and load the index.html of the app.
mainWindow.loadURL(url.format({
pathname: path.join(__dirname, './dist', 'index.html'),
protocol: 'file:',
slashes: true
}))

// 自动打开调试台
mainWindow.webContents.openDevTools({
detach: true
});

// Open the DevTools.
// mainWindow.webContents.openDevTools()

// Emitted when the window is closed.
mainWindow.on('closed', function () {
// Dereference the window object, usually you would store windows
// in an array if your app supports multi windows, this is the time
// when you should delete the corresponding element.
mainWindow = null
})
}

// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.on('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()
}
})

app.on('activate', function () {
// On OS X it's common to re-create a window in the app when the
// dock icon is clicked and there are no other windows open.
if (mainWindow === null) {
createWindow()
}
})
// In this file you can include the rest of your app's specific main process
// code. You can also put them in separate files and require them here.

运行

参考package里添加的脚本,三选一 npm run [start] [pack] [dist]

热模块替换

  • webpack自带的热模块更新功能
  • main.js里写入 mainWindow.loadURL('http://localhost:8090/' + '#')即可
  • 地址填自己的端口号

使用Electron框架的功能

在需要的vue页面中添加

1
2
3
if (window.require) {
var ipc = window.require('electron').ipcRenderer
}

方法里添加

1
2
3
if (window.require) {
ipc.send('close');
}

原因:直接require会导致提示找不到fs模块,需要使用window.require,但是在Chrome环境中提示window.require not function所以需要做一次判断
在Electron的main.js里添加

1
2
const ipc = require('electron').ipcMain
ipc.on('close', e => mainWindow.close());

注意事项

  • 使用vue-router的话必须用Hash模式,不能使用history