Electron 初识-搭建一个简易桌面程序

Electron 第一个项目搭建

​

快速入门

简介

Electron 可以让你使用纯 JavaScript 调用丰富的原生 APIs 来创造桌面应用。你可以把它看作是专注于桌面应用而不是 web 服务器的，io.js 的一个变体。

这不意味着 Electron 是绑定了 GUI 库的 JavaScript。相反，Electron 使用 web 页面作为它的 GUI，所以你能把它看作成一个被 JavaScript 控制的，精简版的 Chromium 浏览器。

应用的入口

在 Electron 中，入口是一个 JavaScript 脚本。不同于直接提供一个URL，你需要手动创建一个浏览器窗口，然后通过 API 加载 HTML 文件。你还可以监听窗口事件，决定何时让应用退出。

主进程

在 Electron 里，运行 package.json 里 main 脚本的进程被称为主进程。在主进程运行的脚本可以以创建 web 页面的形式展示 GUI。

渲染进程

由于 Electron 使用 Chromium 来展示页面，所以 Chromium 的多进程结构也被充分利用。每个 Electron 的页面都在运行着自己的进程，这样的进程我们称之为渲染进程。

优势

• 效率高，桌面效果佳
• 可以访问操作系统层面的东西。
• 摆脱了不同浏览器之间的差异和版本的限制（浏览器的沙盒机制）。

劣势

• 窗口创建背景的问题，在html没有被加载完成前，窗口只用用背景色去填充，不能使用个性化的背景图案，这会造成首次加载的体验不好。
• 打包出来的APP太大，就是最简单的应用打包出来都有40多MB。

简单项目搭建

访问源码： https://gitee.com/ting-hui/electron-demo/tree/01-start-project/

• 安装node.js，npm

• 本地创建一个新文件夹

  [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3iZkXhF6-1593418154425)(C:\Users\Administrator.BF-20190703YGTU\AppData\Roaming\Typora\typora-user-images\image-20200618142502928.png)]

• 命令管理进入文件夹

  [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FIR7ofUT-1593418154435)(C:\Users\Administrator.BF-20190703YGTU\AppData\Roaming\Typora\typora-user-images\image-20200618142657143.png)]

• 初始化项目

  DOS窗口使用npm init初始化一个项目

  [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-imBBiLNr-1593418154438)(C:\Users\Administrator.BF-20190703YGTU\AppData\Roaming\Typora\typora-user-images\image-20200618143728248.png)]

  [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pyTCOKfl-1593418154443)(C:\Users\Administrator.BF-20190703YGTU\AppData\Roaming\Typora\typora-user-images\image-20200618143822410.png)]

  初始化完成后会在文件夹中生成一个package.json的文件

  [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0bpaojRr-1593418154453)(C:\Users\Administrator.BF-20190703YGTU\AppData\Roaming\Typora\typora-user-images\image-20200618143945496.png)]

  修改package.json文件

  [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qD4uKgNh-1593418154455)(C:\Users\Administrator.BF-20190703YGTU\AppData\Roaming\Typora\typora-user-images\image-20200619092654623.png)]

  package name:          项目名字叫啥
  version:               版本号
  description:           对项目的描述
  entry point:           项目的入口文件（一般你要用那个js文件作为node服务，就填写那个文件）
  test command:          项目启动的时候要用什么命令来执行脚本文件（默认为node app.js）
  git repository:        如果你要将项目上传到git中的话，那么就需要填写git的仓库地址
  keywirds：              项目关键字
  author:                作者的名字
  license:               发行项目需要的证书
  

• 安装Electron

  全局安装npm install -g electron ，单独给每个要开发的应用安装时，需要进入到开发的应用文件夹中，运行npm install --save-dev electron命令，此处以给单个app安装为例，执行成功后会生成一个node_modules文件夹：

  [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-sK5erOuV-1593418154456)(C:\Users\Administrator.BF-20190703YGTU\AppData\Roaming\Typora\typora-user-images\image-20200618145448490.png)]

• Electron应用开发程序示例

  先