初探Electron

时间：2022-01-22 05:06:08

Electron是什么？

官网是这么描述的：Build cross platform desktop apps with JavaScript, HTML, and CSS

翻译一下：使用JavaScript,HTML以及CSS搭建跨平台桌面应用

诞生环境

一位博主这样开玩笑说：

可能主要是因为，猿类里的亚种——前端开发——又有了新的出路了吧，还没找工作的前端开发，又有了新的岗位可以去选择，已经在岗的前端也有了新一年的 KPI/OKR，刚起步的创业公司可以只拉一个前端就能开发跨平台的多个桌面客户端... ...（开个玩笑）。

JavaScript近几年的全领域发展，从compile once,run everywhere转变为code once,run everywhere，由于JavaScript本身的是一门解释性的脚本语言，这让它逐渐的成为全宇宙使用最广泛的语言，没有之一。

初探Electron

JavaScript只是JavaScript，在浏览器中，它操作DOM和BOM，在服务器端它操作FileSystem，HTTP，所以在任何环境，他都可以执行，即使是在几M的内存环境，这点对物联网来说很重要。

调用需求：

传统的PC软件开发成本太高，和网络的兴起，让传统的开发逐渐被在线系统吊打，高成本必然逐渐的走下坡路，这是符合经济上发展的趋势，但是由于性能的问题，不管是VR还是直播，需要采集视频，音频，网卡信息，而这些模块大多数还是C、C++来获取

传统局限：

在浏览器里，Web页面通常运行在一个沙盒环境里，它不能访问本地的资源。

比如在Web页面里，调用本地GUI是不允许的，因为在Web页面里管理本地GUI资源是非常危险的而且非常容易导致资源泄露。如果你想在Web页面进行GUI操作，该Web页面的渲染进程必须通过和主进程通信来请求主进程处理这些操作。

Electron的组成

  1. 软件组成：Electron: 1.2.6 Node: 6.1.0 Chromium: 51.0.2704.106 V8: 5.1.281.65

  2. 工具支持：（官方提供）

    功能上支持：

    1. Automatic updates
    2. Native menus & notifications
    3. App crash reporting
    4. Debugging & profiling
    5. Windows installers

    写代码&部署：

    Electron Packager — Package your apps

    Electron Builder — Deploy your apps

    Spectron — Test your apps Devtron —

    Debug your apps Electron

    Prebuilt — Install Electron

    Menubar — Create menubar apps

  3. 学习材料：官网提供一个比较全面的DEMO，包括常规的系统级别操作，通信，截图，调用PDF等例子

  4. 产品：官网上列举了很多我们比较熟悉的有Atom，VSC，slack

Have a try！

一个最简单的electron项目包含三个文件：

  • package.json （Node.js项目的配置文件）
  • index.html （桌面应用的界面页面）
  • main.js （应用的启动入口文件）

其中，核心的文件是 index.html 和 main.js 我们可以下载官方的quick start的例子

# Clone the Quick Start repository

$ git clone https://github.com/electron/electron-quick-start

# Go into the repository

$ cd electron-quick-start

# Install the dependencies and run

$ npm install && npm start

Electron基础文档

使用 AngularJS 和 Electron 构建桌面应用

结合React创建Electron桌面应用

相关文章