electron终极奥义

发表于 4年以前 | 总阅读数：670 次

简介

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>

执行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', '我是主进程返回的值')
})

渲染进程

以上代码使用的是异步传输消息，electron也提供了同步传输的API。

发送同步消息将会阻塞整个渲染进程，你应该避免使用这种方式 - 除非你知道你在做什么。

切忌用 ipc 传递大量的数据，会有很大的性能问题，严重会让你整个应用卡住。

remote模块

使用 remote 模块, 你可以调用 main 进程对象的方法, 而不必显式发送进程间消息。

const { dialog } = require('electron').remote dialog.showMessageBox({type: 'info', message: '在渲染进程中直接使用主进程的模块'})

webContents

webContents负责渲染和控制网页, 是 BrowserWindow 对象的一个属性, 我们使用send方法向渲染器进程发送异步消息。

主进程

const {app, BrowserWindow} = require('electron')

let win

app.on('ready', () => {

    win = new BrowserWindow({width: 800, height: 600})

    // 加载页面
    win.loadURL('./index.html')

    // 导航完成时触发，即选项卡的旋转器将停止旋转，并指派onload事件后。
    win.webContents.on('did-finish-load', () => {

        // 发送数据给渲染程序
        win.webContents.send('something', '主进程发送到渲染进程的数据')
    })
})

渲染进程

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        <script>
            require('electron').ipcRenderer.on('something', (event, message) => {
                console.log(message) // 主进程发送到渲染进程的数据
            })
</script>
    </body>
</html>

渲染进程数据共享

更多情况下，我们使用HTML5 API实现，如localStorage、sessionStorage等，也可以使用electron的IPC机制实现

主进程

global.sharedObject = {
    someProperty: 'default value'
}

渲染进程

第一个页面

require('electron').remote.getGlobal('sharedObject').someProperty = 'new value' 第二个页面

console.log(require('electron').remote.getGlobal('sharedObject').someProperty) // new value

总结

以上四个方法均可实现主进程和渲染进程的通信，可以发现使用remote模块是最简单的，渲染进程代码中可以直接使用electron模块

链接：https://juejin.im/post/5ba06b67f265da0ae343e89c

本文由哈喽比特于4年以前收录，如有侵权请联系我们。
文章来源：https://mp.weixin.qq.com/s/PzvL2JfPCguBya0NFomnAw

刘强东夫妇：“移民美国”传言被驳斥

京东创始人刘强东和其妻子章泽天最近成为了互联网舆论关注的焦点。有关他们“移民美国”和在美国购买豪宅的传言在互联网上广泛传播。然而，京东官方通过微博发言人发布的消息澄清了这些传言，称这些言论纯属虚假信息和蓄意捏造。

发布于：1年以前 | 808次阅读 | 详细内容 »

博主曝三大运营商，将集体采购百万台华为Mate60系列

日前，据博主“@超能数码君老周”爆料，国内三大运营商中国移动、中国电信和中国联通预计将集体采购百万台规模的华为Mate60系列手机。

发布于：1年以前 | 770次阅读 | 详细内容 »

ASML CEO警告：出口管制不是可行做法，不要“逼迫中国大陆创新”

据报道，荷兰半导体设备公司ASML正看到美国对华遏制政策的负面影响。阿斯麦（ASML）CEO彼得·温宁克在一档电视节目中分享了他对中国大陆问题以及该公司面临的出口管制和保护主义的看法。彼得曾在多个场合表达了他对出口管制以及中荷经济关系的担忧。

发布于：1年以前 | 756次阅读 | 详细内容 »

抖音中长视频App青桃更名抖音精选，字节再发力对抗B站

今年早些时候，抖音悄然上线了一款名为“青桃”的 App，Slogan 为“看见你的热爱”，根据应用介绍可知，“青桃”是一个属于年轻人的兴趣知识视频平台，由抖音官方出品的中长视频关联版本，整体风格有些类似B站。

发布于：1年以前 | 648次阅读 | 详细内容 »

威马CDO：中国每百户家庭仅17户有车

日前，威马汽车首席数据官梅松林转发了一份“世界各国地区拥车率排行榜”，同时，他发文表示：中国汽车普及率低于非洲国家尼日利亚，每百户家庭仅17户有车。意大利世界排名第一，每十户中九户有车。

发布于：1年以前 | 589次阅读 | 详细内容 »

研究发现维生素 C 等抗氧化剂会刺激癌症生长和转移

近日，一项新的研究发现，维生素 C 和 E 等抗氧化剂会激活一种机制，刺激癌症肿瘤中新血管的生长，帮助它们生长和扩散。

发布于：1年以前 | 449次阅读 | 详细内容 »

苹果据称正引入3D打印技术，用以生产智能手表的钢质底盘

据媒体援引消息人士报道，苹果公司正在测试使用3D打印技术来生产其智能手表的钢质底盘。消息传出后，3D系统一度大涨超10%，不过截至周三收盘，该股涨幅回落至2%以内。

发布于：1年以前 | 446次阅读 | 详细内容 »

千万级抖音网红秀才账号被封禁

9月2日，坐拥千万粉丝的网红主播“秀才”账号被封禁，在社交媒体平台上引发热议。平台相关负责人表示，“秀才”账号违反平台相关规定，已封禁。据知情人士透露，秀才近期被举报存在违法行为，这可能是他被封禁的部分原因。据悉，“秀才”年龄39岁，是安徽省亳州市蒙城县人，抖音网红，粉丝数量超1200万。他曾被称为“中老年...

发布于：1年以前 | 445次阅读 | 详细内容 »