Electron 菜鸟教程:小试 Electron开发
背景以前只能远见,如今终于能操刀小试了。于是用 Electron 写了个百度不限速下载器 BND2,当然还用到了 React、golang。具体技术架构可参见百度不限速下载器 BND2 技术架构简介。 概览面对一个不熟悉的事物,当然是要先看文档喽。 https://electronjs.org/ 在阅读完目录后,还是云里雾里的。算了,直接开始动手吧 # 克隆示例项目的仓库 $ git clone https://github.com/electron/electron-quick-start # 进入这个仓库 $ cd electron-quick-start # 安装依赖并运行 $ npm install && npm start# 克隆示例项目的仓库$ git clone https://github.com/electron/electron-quick-start # 进入这个仓库$ cd electron-quick-start # 安装依赖并运行$ npm install && npm start So easy,一个简单的 Demo 已经可以运行了 要点环境变量我们需要一个变量来标示出当前的环境,以便使用一套代码为调试、菜单、更新等做出开发环境和生产环境的区别,让我们方便调试、提高效率、注重安全。 方法:修改 package.json 的 start 为 const isDev = () => { return process.env.NODE_ENV === 'development' }const isDev = () => { return process.env.NODE_ENV === 'development' } 调试** 调试 Electron 主进程 **
** 调试 Electron 渲染器进程 ** const mainWindow = new BrowserWindow(...) mainWindow.webContents.openDevTools()const mainWindow = new BrowserWindow(...)mainWindow.webContents.openDevTools() ** 调试 Electron 中 webview 页面 ** const webview = document.querySelector('webview') webview.addEventListener('dom-ready', () => { webview.openDevTools() })const webview = document.querySelector('webview')webview.addEventListener('dom-ready', () => { webview.openDevTools() }) 菜单看了下菜单文档,貌似很方便的样子,但我没有深入研究(项目不需要)。
通信我觉得这应该是最最最重要的了 ** 主进程和渲染进程通信 ** // 渲染进程发送消息给主进程 ipcRenderer.send('asynchronous-message', data) // 主进程监听渲染进程发送的消息 ipcMain.on('asynchronous-message', (event, arg) => { // 主进程发送消息给渲染进程 event.sender.send('asynchronous-reply', { data, }) }) // 渲染进程监听主进程发送的消息 ipcRenderer.on('asynchronous-reply', (event, arg) => { })// 渲染进程发送消息给主进程ipcRenderer.send('asynchronous-message', data)// 主进程监听渲染进程发送的消息ipcMain.on('asynchronous-message', (event, arg) => { // 主进程发送消息给渲染进程 event.sender.send('asynchronous-reply', { data, }) })// 渲染进程监听主进程发送的消息ipcRenderer.on('asynchronous-reply', (event, arg) => { }) ** 主进程和 webview 通信 **
** 渲染进程和 webview 通信 ** // webview 发送消息给渲染进程 window.ipcRenderer.sendToHost('clearCookie') // 渲染进程监听 webview 发送的消息 webview.addEventListener('ipc-message', (event) => { // event.channel === 'clearCookie' ... }) // 渲染进程发送消息给 webview webview.send('start') // webview 监听渲染进程发送的消息 ipcRenderer.on('start', (ev) => { ... })// webview 发送消息给渲染进程window.ipcRenderer.sendToHost('clearCookie')// 渲染进程监听 webview 发送的消息webview.addEventListener('ipc-message', (event) => { // event.channel === 'clearCookie' ... })// 渲染进程发送消息给 webviewwebview.send('start')// webview 监听渲染进程发送的消息ipcRenderer.on('start', (ev) => { ... }) 更新没有采用 Electron 推荐的更新机制,自己 YY 了一个。
打包最后选择了 electron-builder,真的很方便。
(编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |