|
阅读：3734回复：0
electron深入浅出
electron简介
electron是由Github开发，是一个用Html、css、JavaScript来构建 桌面应用程序的开源库，可以打包为Mac、Windows、Linux系统下的应用。 electron是一个运行时环境，包含Node和Chromium，可以理解成把web应用运行在node环境中 结构 electron主要分为主进程和渲染进程，关系如下图 electron运行package.json中的main字段标明脚本的进程称为主进程 在主进程创建web页面来展示用户页面，一个electron有且只有一个主进程 electron使用Chromium来展示web页面，每个页面运行在自己的渲染进程中 快速开始 接下来，让代码来发声，雷打不动的hello world 创建文件夹，并执行npm init -y，生成package.json文件，下载electron模块并添加开发依赖 mkdir electron_hello && cd electron_hello && npm init -y && npm i electron -D 下载速度过慢或失败，请尝试使用cnpm，安装方式如下 # 下载cnpm npm install -g cnpm --registry=https://registry.npm.taobao.org # 下载electron cnpm i electron -D 创建index.js，并写入以下内容 const {app, BrowserWindow} = require('electron') // 创建全局变量并在下面引用，避免被GC let win function createWindow () { // 创建浏览器窗口并设置宽高 win = new BrowserWindow({ width: 800, height: 600 }) // 加载页面 win.loadFile('./index.html') // 打开开发者工具 win.webContents.openDevTools() // 添加window关闭触发事件 win.on('closed', () => { win = null // 取消引用 }) } // 初始化后 调用函数 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() } }) 创建index.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Hello World!</title> </head> <body> <h1 id="h1">Hello World!</h1> We are using node <script> document.write(process.versions.node) </script> Chrome <script> document.write(process.versions.chrome) </script>, and Electron <script> document.write(process.versions.electron) </script> </body> </html> 最后，修改packge.json中的main字段,并添加start命令 { ... main:'index.js', scripts:{ "start": "electron ." } } 执行npm run start后，就会弹出我们的应用来。 调试 我们知道electron有两个进程，主进程和渲染进程，开发过程中我们需要怎么去调试它们呢？老太太吃柿子，咱们捡软的来 渲染进程 BrowserWindow 用来创建和控制浏览器窗口，我们调用它的实例上的API即可 win = new BrowserWindow({width: 800, height: 600}) win.webContents.openDevTools() // 打开调试 调试起来是和Chrome是一样的，要不要这么酸爽  主进程 使用VSCode进行调试 使用VSCode打开项目，点击调试按钮  点击调试后的下拉框  选择添加配置，选择node 此时会把默认的调试配置打开，大概长这样  什么？你的不是，不是的话，就直接把下面的复制并替换你的配置 差不多这么办，那就把configurations里面第二项复制到你的configurations配置里面，第一个配置是用来调试node的 { "version": "0.2.0", "configurations": [ { "type": "node", "request": "launch", "name": "启动程序", "program": "${workspaceFolder}/main.js" }, { "name": "Debug Main Process", "type": "node", "request": "launch", "cwd": "${workspaceFolder}", "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron", "windows": { "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron.cmd" }, "args" : ["."] } ] } 可以看到${workspaceFolder}，这是关于VSCode的变量，用来表示当前打开的文件夹的路径 更多变量请猛戳这里 修改完配置后，我们调试面板，选择我们刚才配置的 在代码中标记需要调试的地方，然后点击绿色的小三角，就可以愉快的调试了 进程通信 在Electron中, GUI 相关的模块 (如 dialog、menu 等) 仅在主进程中可用, 在渲染进程中不可用。 为了在渲染进程中使用它们, ipc 模块是向主进程发送进程间消息所必需的，以下介绍几种进程间通讯的方法。 哥俩好 ipcMain和ipcRenderer是两个好基友，通过这两个模块可以实现进程的通信。 ipcMain 在主进程中使用，用来处理渲染进程（网页）发送的同步和异步的信息 ipcRenderer 在渲染进程中使用，用来发送同步或异步的信息给主进程，也可以用来接收主进程的回复信息。 以上两个模块的通信，可以理解成发布订阅模式,接下来，我们看下它们具体的使用方法 主进程 ——————— const {ipcMain} = require('electron') // 监听渲染程序发来的事件 ipcMain.on('something', (event, data) => { event.sender.send('something1', '我是主进程返回的值') }) |
|
