Electron入门篇

关于electron

Electron 是一个使用 JavaScript, HTML 和 CSS 等 Web 技术创建原生程序的框架。它完全兼容 Mac、Windows 和 Linux,真正实现了跨平台的桌面端应用解决方案。

技术架构

Electron的核心技术架构是由 Chromium + Node.js + Native APIs 组成的。

接下来,我们简单介绍一下它的三大核心武器:

  • 首先是 Chromium,我们可以把它理解为是一个拥有最新版浏览器特性的一个 Chrome 浏览器,它带给我们的好处就是在开发过程中无需考虑浏览器的兼容性,我们可以使用一些 ES6、ES7 最新的语法,可以放心的使用 Flex 布局,以及浏览器的最新特性,都可以尝试,不需要考虑兼容性的问题。
  • Node.js 则是提供了一个文件读写、本地命令调用、以及第三方扩展的能力,并且基于 Node.js 整个强大的生态,将近几十万的 Node.js 模块都可以在整个客户端内使用。
  • Native APIs 提供了一个统一的原生界面的能力,还包括一些系统通知、快捷键,还可以通过它来获取一些系统的硬件信息。还提供了桌面客户端的基础能力,像更新机制、崩溃报告这样的能力。

Chromium和chrome浏览器的区别

Chromium是google开源的浏览器项目,由开源社区维护,它支持Windows、Mac、Linux等多种操作系统,国内的大多数双核浏览器都是基于它进行开发的。

Chrome浏览器也是基于Chromium进行的二次开发。在Chromium的基础上,chrome提供了额外的高阶功能:

  • 对特殊音频格式的支持,如AAC, H.264和MP3编码
  • 内置Flash插件
  • 自动更新: Chrome的Windows和Mac用户可获得额外的后台应用,可自动让Chrome保持最新版本
  • 扩展限制:对于Chrome,Google会停用未在Chrome网上应用商店中托管的扩展程序。
  • 崩溃和错误报告:Chrome用户可以选择将有关崩溃和错误的统计信息发送给Google进行分析。

快速开始

安装electron应用

可以参考官方文档-打造你的第一个electron应用,大家也可以直接copy下面的代码在命令行执行,就可以立马体验一个electron应用的demo了。

git clone https://github.com/electron/electron-quick-start
cd electron-quick-start
npm install
npm start

引入react

渲染层面的技术架构你可以选择自己需要的,不一定是react,也可以vue、angular等,这里我以react为例子,这里直接用react的官方脚手架即可。

npx create-react-app electron-quick-start
cd electron-quick-start
npm start

我们把react的脚手架也安装在了electron的目录里面,因此需要做些调整和改动。首先需要对electron项目和react项目的两个package.json进行合并,将启动electron的命令改为npm run electron;其次是将electron的入口文件main.js里面加载视图的文件路径改为http://localhost:3000/,main.js的部分代码如下:

const isDev = require('electron-is-dev')

function createWindow () {
  // Create the browser window.
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js')
    }
  })
    if(isDev){
    mainWindow.loadURL('http://localhost:3000/') // 这里改为react的启动目录
  } else {
    mainWindow.loadFile(path.join(__dirname, '/../build/index.html')) // 加载打包后的html
  }
}

至此,我们就可以愉快的在electron项目中使用react了。显而易见,这里的缺点是需要同时启动两个命令,你如果想要一个命令启动,安装对应的工具库即可。

当然,如果要在正式项目中使用,可以安装 electron-forge,这是一个成熟的脚手架,集成了打包、发布功能,还可以选择模板(如React、Vue、Angular 等)作为渲染层框架。

进程间通信

要了解什么是进程间通信,首先要了解electron中的两个重要的概念,就是关于主进程和渲染进程。

主进程

  • Electron中运行package.json中的main脚本的进程被称为主进程,即main.js就是运行在主进程
  • 一个electron应用有且只有一个主进程。
  • 只有主进程可以直接进行GUI相关的原生API操作。

渲染进程

  • 运行在Chromium的web页面姑且叫渲染进程,即运行index.html的环境就是渲染进程。
  • 一个electron应用可以有多个渲染进程。
  • 渲染进程在引入Node.js 模块的前提下,可以在页面中和操作系统进行一些底层交互(如fs模块)。

如何通信

知道什么是主进程和渲染进程以后,接下来就介绍一下主进程和渲染进程之间是如何通信的呢?

主进程和渲染进程之间是通过ipcRenderer 和 ipcMain 模块通信的。具体API文档可以参考官方示例,这里举一个渲染进程向主进程通信的例子。

举例:页面中有一个textarea输入框,用户输入内容以后点击“保存到本目录”,即可保存输入框内容到本目录的msg.txt文件夹中。

打包

打包是开发桌面端应用最后一步,也是必不可少的一步,目前市面上比较常用的electron打包工具有两种,electron-packagerelectron-builder,我们项目中采用是比较简单的第一种打包工具。

electron-packager

这个打包工具的特点如下:

  • 可以直接生成.app.exe 等可执行的文件,用户无需安装,打开即可使用
  • 配置简单,通常一句命令行就可搞定

下面是一个例子,package.json的部分代码:

"scripts": {
  "start": "electron .",
  "packageOS": "electron-packager . DMS企业版 --platform=mas --arch=x64 --icon=dms --out=./dist --asar --app-version=1.0.0",
  "packageWin64": "electron-packager . 'DMS企业版 --platform=win32 --arch=x64 --icon=dms --out=./dist --asar --app-version=1.0.0",
  "packageWin32": "electron-packager . DMS企业版 --platform=win32 --arch=ia32 --icon=dms --out=./dist --asar --app-version=1.0.0"
},

具体的参数含义大家可以参考开发文档,需要注意的是不同平台打包所需要的图片格式也是不一样的,mac的直接是png格式的图片就可以,而windows的是icns格式图片。

electron-builder

electron-builder不仅可以打包为可执行文件,还可以打包为可安装程序,功能与electron-packager相比也要丰富一些,所以打包的配置也是更为繁琐。从github数据来看 electron-builder 比 electron-packager 多2000+颗星,由此可见electron-builder应用会更广泛一些。

热更新

CDN资源更新

在某些场景下(如:一般在web页面开发的时候我们的静态资源都是CDN化的,为了和web共用一套代码,我们可以在APP端直接引用这些静态资源,另外就是增量更新的场景),我们的UI视图层代码是托管在CDN上的,为了实现这时候如果用户一直不重启或者刷新APP,那么这些静态资源也是不会主动更新的;这个时候我们常见的做法是通过轮询调用接口或者服务端推送,来获取是否更新的通知,如果发现有更新,则弹窗提醒用户,让用户重载整个页面,达到刷新的目的。

应用包更新

除了上面CDN的情况,还有一种情况是所有的资源都被打包在了APP,这个时候如果系统有更新要怎么办呢? 此时要分两种情况,一是能够直接使用update.electronjs.org的情况,另外一种是使用自己的更新服务器。

1)使用 updata.electronjs.org 更新 能够直接使用该工具库的前提是:

  • 应用运行在 macOS 或者 Windows
  • 应用有公开的 GitHub 仓库
  • 编译的版本发布在 GitHub Releases
  • 编译的版本已代码签名

在具备了该前提的情况下直接安装update-electron-app使用即可

npm install update-electron-app

从你的应用的 main process 文件调用这个更新:

require('update-electron-app')()

默认情况下,这个模块会在应用启动的时候检查更新,然后每隔十分钟再检查一次。 当发现了一个更新,它会自动在后台下载。 当下载完成后,会显示一个对话框以允许用户重启应用。

2)部署更新服务器 如果你开发的是一个私有的 Electron 应用程序,或者你没有在 GitHub Releases 中公开发布,你可能需要运行自己的更新服务器。 根据你的需要,你可以从下方选择:

  • Hazel – 用于私人或开源应用的更新服务器,可以在 Now 上免费部署。 它从GitHub Releases中拉取更新文件,并且利用 GitHub CDN 的强大性能。
  • Nuts-同样使用GitHub Releases, 但得在磁盘上缓存应用程序更新并支持私有存储库。
  • electron-release-server – 提供一个用于处理发布的仪表板,并且不需要在GitHub上发布发布。
  • Nucleus – 一个由Atlassian维护的 Electron 应用程序的完整更新服务器。 支持多种应用程序和渠道; 使用静态文件存储来降低服务器成本。

更新服务器部署好以后,你就可以直接调用electron的 autoUpdater 模块进行更新通知了

const { app, autoUpdater, dialog } = require('electron')

// 构建更新服务器的URL并且通知autoUpdater
const server = 'https://your-deployment-url.com'
const url = `${server}/update/${process.platform}/${app.getVersion()}`

autoUpdater.setFeedURL({ url })

// 轮询检查更新
setInterval(() => {
  autoUpdater.checkForUpdates()
}, 60000)

检测到更新后通知用户代码:

// 成功通知
autoUpdater.on('update-downloaded', (event, releaseNotes, releaseName) => {
  const dialogOpts = {
    type: '消息',
    buttons: ['立即重启', '稍后再试'],
    title: '更新通知',
    message: process.platform === 'win32' ? releaseNotes : releaseName,
    detail: 'A new version has been downloaded. Restart the application to apply the updates.'
  }

  dialog.showMessageBox(dialogOpts).then((returnValue) => {
    if (returnValue.response === 0) autoUpdater.quitAndInstall()
  })
})

// 失败通知
autoUpdater.on('error', message => {
  console.error('There was a problem updating the application')
  console.error(message)
})

更多内容你也可以参考官方文档更新应用程序部分。

参考文档:

www.electronjs.org/docs github.com/electron cnodejs.org/topic/57812… www.electronjs.org/docs/tutori…

原文链接:juejin.im

上一篇:Vue 总结:组件间的通讯方式(父子传参、兄弟传参、任意两个组件间传参、多个组件嵌套传参)
下一篇:一场电影时间,了解MVVM原理

相关推荐

  • 零基础-5小时开发一个electron应用-[实践]

    一、背景 三、技能升级 ​ 明明可以用颜值取胜,非要靠才华?不对,明明可以用代码搞定,非要搞设计?步入正题,正好最近对electron比较感兴趣,又是要做工具,那就直接怼 1.electron介绍 ​...

    3 年前
  • 配置|electron+vue+ts+sqlite配置

    从编程模型的角度来说,使用声明式语言声明样式和布局,使用功能完备的编程语言编写业务逻辑,算是GUI程序的一种最好的实践了。 最近要写一个个人项目,于是我自然想到使用前端来写界面。

    2 年前
  • 配置electron中puppeteer executablePath的正确姿势

    TL; NR 轻量, remote调用(使用本地chrome) => puppeteer-core 将chromium整合进安装包(需要asar打包时排除chromium), macOS下验证...

    2 年前
  • 详解Webpack实战之构建 Electron 应用

    Electron 可以让你使用开发 Web 的技术去开发跨平台的桌面端应用,由 Github 主导和开源,大家熟悉的 Atom 和 VSCode 编辑器就是使用 Electron 开发的。

    3 年前
  • 解决npm安装Electron缓慢网络超时导致失败

    Electron 框架的前身是 Atom Shell,可以让你写使用 JavaScript,HTML 和CSS 构建跨平台的桌面应用程序。它是基于io.js 和 Chromium 开源项目,小编碰到n...

    3 年前
  • 解决electron打包慢,卡

    前言 这两天搞了一个electron项目,代码2小时,打包1天。因此写个文章给打包困难的朋友。 1.安装electron-builder npm install electron-builder...

    5 个月前
  • 解决Electron ASAR不可使用二进制文件的问题

    “不要那么销魂,好不好?” “小明说:我搞不定啊,搞不定啊!” 我遇到难题了,为此困惑了多日,解决不了,关于Electron在ASAR包中可以使用二进制文件的问题,这个问题解决起来非常的痛苦,但还是...

    3 年前
  • 自制electron小工具

    利用空余时间自己学习electron,再加上决定对vue多加深入学习,使用了electron-vue脚手架弄些小东西练习。 技术栈 electron,vue,vuex,vue-route,elemen...

    2 年前
  • 用得到的electron开发总结

    Electron是由Github开发,用HTML,CSS和JavaScript来构建跨平台桌面应用程序的一个开源库。 Electron通过将Chromium和Node.js合并到同一个运行时环境中,并...

    10 个月前
  • 用electron仿qq首页

    QQ首页的弹窗和天气效果都挺好,最近琢磨了一下用electron来仿造出这样的效果,主要是弹窗控件这块,也考虑了一下窗口的复用,下面展示一下做好后的效果,注:样式只是随便调了一下,毕竟没有那么多时间去...

    2 年前

官方社区

扫码加入 JavaScript 社区