首页 > 代码库 > Electron Angular 开发小记

Electron Angular 开发小记

2024-08-29 05:41:04   219人阅读

一介绍

electron分为主进程和渲染进程，主进程负责和原生交互，控制窗口等。

渲染进程就是普通网页。主进程和渲染进程可以通过ipcMain（主进程使用）及ipcRenderer（渲染进程用）通信

quick－start中main.js为主进程入口文件

index.html为渲染进程入口文件

另外很重要的一点使用electron没有跨域限制！！！

二 打包

1.快速运行quick－start（开发时启动）

git clone https://github.com/electron/electron-quick-startcd electron-quick-startnpm install && npm start

2.打包为用户可用文件（mac为.app win.exe）使用 electron-packager 

npm install electron-packager --save-devnpm 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版本的包）

三.模块介绍

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中调用以下两个apiapp.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++出错导致的。

 

 

四.调试　　

1.渲染进程调试

打开谷歌开发者工具，剩下的和谷歌调试一样一样的。

mainWindow.webContents.openDevTools();　

2.主进程node调试 

用electron-inspector

1.npm install electron-rebuild --save-dev2.npm install electron-inspector --save-dev3.启动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 就可以愉快的调试了

　　技术分享

 未完待续。。。

Electron Angular 开发小记


联系
我们