Electron Angular 开发小记
一介绍
electron分为主进程和渲染进程，主进程负责和原生交互，控制窗口等。
渲染进程就是普通网页。主进程和渲染进程可以通过ipcMain（主进程使用）及ipcRenderer（渲染进程用）通信
quick－start中main.js为主进程入口文件
index.html为渲染进程入口文件
另外很重要的一点使用electron没有跨域限制！！！
二 打包
1.快速运行quick－start（开发时启动）
git clone https://github.com/electron/electron-quick-start cd electron-quick-start npm install && npm start
2.打包为用户可用文件（mac为.app win.exe）使用 electron-packager
npm install electron-packager --save-dev npm install electron-packager -g 打包命令（在项目跟目录中） electron-packager ./ --platform=darwin --asar --arch=x64 --overwrite --icon=imgs/logo.icns --version=1.2.4 --platform=darwin（打包mac系统） --asar（将代码压缩为二进制文件防止代码泄漏） --overwrite（替换原来存在的包） --icon=imgs/logo.icns（包的图标地址） --ignore node_modules(忽略文件，不打到包内)
--version=1.2.4（打包electron为1.2.4版本的包）
3.打包为可安装文件（electron-builder）
全局安装electron-builder 在package.json中配置如下 执行build命令
{
"name": "macIm",
"version": "1.0.0",
"description": "A minimal Electron application",
"main": "main.js",
"scripts": {
"start": "electron --debug=5858 ./app",
"build": "build"
},
"repository": "https://github.com/electron/electron-quick-start",
"keywords": [
"Electron",
"quick",
"start",
"tutorial",
"demo"
],
"author": "GitHub",
"license": "CC0-1.0",
"build": {
"appId": "com.electron.awen.hello",
"copyright": "awen",
"productName": "macIm",
"asar":false,
"electronVersion":"1.2.4",
"dmg": {
"icon": "build/icon.icns",
"files":"**/*",
"contents": [{
"x": 130,
"y": 220
}, {
"x": 410,
"y": 220,
"type": "link",
"path": "/Applications"
}]
}
},
}
三.模块介绍
1.渲染进程与主进程通信
渲染进程引入ipcRenderer模块 主进程引入ipcMain模块，渲染进程通过自定义事件调用主进程的方法如下
//渲染进程
//其中create-folder是事件名，1111是传给主进程的数据
var ipcRenderer = require('electron').ipcRenderer;
ipcRenderer.send('create-folder', '1111');
//渲染进程发送完事件后需要监听住进程回的事件
ipcRenderer.on('create-folder-result', function(event, data) {
console.log(data)//222
}
//主进程
const { ipcMain} = require('electron');//es6结构赋值写法
//主进程监听事件
ipcMain.on('create-folder', function(event, data) {
...//主进程干的活
console.log(data)//1111
event.sender.send('create-folder-result','222');//主进程干完活后告诉渲染进程
});
2.菜单
首先制定菜单模版
let template = [{
label: '编辑',
submenu: [{
label: '撤销',
accelerator: 'CmdOrCtrl+Z',
role: 'undo'
}, {
label: '剪切',
accelerator: 'CmdOrCtrl+X',
role: 'cut'
}, {
label: '复制',
accelerator: 'CmdOrCtrl+C',
role: 'copy'
}, {
label: '粘贴',
accelerator: 'CmdOrCtrl+V',
role: 'paste'
}]
}, {
label: '显示',
submenu: [{
label: '进入全屏幕',
accelerator: (function() {
if (process.platform === 'darwin') {
return 'Ctrl+Command+F'
} else {
return 'F11'
}
})(),
click: function(item, focusedWindow) {
if (focusedWindow) {
focusedWindow.setFullScreen(!focusedWindow.isFullScreen())
}
}
}, {
label: '开发者工具',
accelerator: (function() {
if (process.platform === 'darwin') {
return 'Alt+Command+I'
} else {
return 'Ctrl+Shift+I'
}
})(),
click: function(item, focusedWindow) {
if (focusedWindow) {
focusedWindow.toggleDevTools()
}
}
}, {
type: 'separator'
}]
}, {
label: '窗口',
role: 'window',
submenu: [{
label: '最小化',
accelerator: 'CmdOrCtrl+M',
role: 'minimize'
}
]
}
]
//然后在ready中调用以下两个api
app.on('ready', function() {
const menu = Menu.buildFromTemplate(template)
Menu.setApplicationMenu(menu)
})
3.和c++混用
由于js调用系统的功能有限，electron也不可能封装所有我们需要的组件，所以我们采用和c++混合开发的方式。将c++代码编译为.node二进制文件提供一些调用系统功能的能力。node自带模块addons可以将c++转为.node，但是版本兼容性不好。我们采用nan包来编译c++代码。遇到以下两个问题。
1.将c++编译为.node文件的电脑node版本需要和electron版本对应。但是有时候node版本和electron的版本相同也会报不匹配。我用了electron两个版本（0.37.8对应node 5.10.0,1.2.4对应node 6.9.0）
2.c++代码出错会将electron进程干死，electron直接白屏。实践证明此类问题都是因为c++出错导致的。
四.坑
在mac上关系窗口后点击软件图片重新打开窗口
如果在app.on('activate'）中重新创建窗口会重新加载html，回退到了最初状态肯定不是我们想要的。
实现思路如下
//在窗口colse事件中阻止默认事件，并让窗口隐藏。
this[windowName].on('close', function(event) {
this.hide(windowName)//隐藏窗口
event.preventDefault()//阻止默认事件
})
//app.on('active')中让窗口显示
app.on('activate', () => {
chatWindow.show('chatWindow')
})
五.调试
1.渲染进程调试
打开谷歌开发者工具，剩下的和谷歌调试一样一样的。
mainWindow.webContents.openDevTools();
2.主进程node调试
用electron-inspector
1.npm install electron-rebuild --save-dev 2.npm install electron-inspector --save-dev 3.启动electron electron --debug=5858 ./app（app路径） 4.根路径启动electron-inspector（注：第一次使用或更改electron 版本会先编译一下） node_modules/.bin/electron-inspector（mac） node_modules\\.bin\\electron-inspector（win） 启动完成后命令行中打印如下 Visit http://127.0.0.1:8080/?port=5858 to start debugging. 5.谷歌浏览器起中访问http://127.0.0.1:8080/?port=5858 就可以愉快的调试了
