Electron新手入门

admin管理员组

文章数量:1794759

Electron新手入门

文章目录

• 一、引言
• • 1、Electron是什么？
  • 2、为什么学Electron
  • 3、Electron的缺点
  • 4、学Electron的时候需要学的技术
• 二、正文
• • 1、安装Node.js环境。
  • 2、Windows系统的先安装“创建cmd右键快捷访问方式”，能够右击快速打开路径的Cmd命令
  • 3、运行官方的demo。
  • 4、参考官方的文档，自己创建一个Electron项目。

一、引言 1、Electron是什么？

官网www.electronjs/，已经很简明说了Electron是什么了。 Electron是使用前端语言（JavaScript、HTML、CSS）开发跨平台（Windows、Mac、Linux系统）桌面软件框架，依赖Chromium内核和Node.js框架。

2、为什么学Electron

（1）能够跨平台开发，打包的时候在不同平台打包即可，其项目代码通用。 与传统的桌面软件开发对比，我们知道开发Windows软件需要使用 C语言/C++/C#等语言开发，开发Mac软件则用Objective-C语言开发，开发Linux软件用C语言开发，在不同的系统平台开发应用用的开发语言不同，开发工具不同，想要开发跨平台应用，用系统原生语言开发的成本太大了，而用Electron则会很简单。

（2）Electron使用前端语言开发，开发难度相对原生桌面开发（C语言/C++/C#/Objective-C/）相对较低，会前端语言就能开发，但是开发过程中，还是要学习node.js框架和Electron本身框架的东西，这些都不是很难，而且由于前端技术本身已经很成熟了，有很多别人造的轮子能够用的。

（3）开源性，相对成熟。Electron是用MIT协议的开源项目，其项目已经加入OpenJS基金会，这个基金会和Apache基金会一样，专门为js的开源项目服务的，其中有很多比较出名的js开源项目都已经加入OpenJS基金会了，如Node.js、jQuery、Webpack等。其中使用Electron开发的有比较出名的Atom、VsCode、Skype、Github Desktop、WordPress、Slack等软件，然后Github还有一大推用Electron开发的开源项目，所以现在看Electron已经是相对成熟了。

（下面是盗用网上的图片说明下几个流行开源协议的区别）

（4）和NW.js比较。NW.js和Electron一样，也是用前端语言开发桌面应用，都是依赖Chromium内核和Node.js，都是夸平台，就是Electron不支持Windows Xp,而NW.js支持。国内的微信web开发工具（用过微信web开发工具，打开的时候会感觉比较卡）、钉钉就是基于NW.js开发的。按大多网友的说法，Electron相对NW.js较稳定，NW.js比较多bug，多数人推荐使用Electron开发，由于使用Electron开发成熟的应用软件比较多，而Electron官网则有很好的中文文档支持（良心啊！），而NW.js没有（和大多数外国的开源项目，都木有中文文档…），所以最后选择了Electron。

（5）Github星星数多，趋势强。Electron项目在Github上面星星数已经接近85K了，这个星星数说明已经受到很多人的喜爱，很多人关注这个项目，也意味着有很多人帮着维护这个项目，项目会越来越成熟。

3、Electron的缺点

（1）由于依赖Chromium内核和Node.js框架，Electron开发出的应用软件体积很大（最少的在几十M以上，一般都是1百多M以上），而且比系统原生语言开发的应用性能低很多。 （2）与硬件交互的开发API不够完善，对于与硬件交互的应用最好还是系统原生的语言开发，Electron现在大部分只适合应用层级别的软件开发，如果要实现与硬件交互的应用，估计会比较困难，可能有很多坑。

4、学Electron的时候需要学的技术

（1）HTML、CSS、JavaScript基础 （2）ES6（ECMAScript 6）基础，可以先学比较重要的。因为Node.js需要，所以要学。介绍及一些教程： es6.ruanyifeng/ www.runoob/w3cnote/es6-tutorial.html （3）Node.js、NPM，Electron框架Api。 Node.js、NPM：www.runoob/nodejs/nodejs-tutorial.html Electron：www.electronjs/docs

二、正文 1、安装Node.js环境。

到官网nodejs/en/download/下载安装包

安装时，选中Add to PATH，因为这个安装完成会自动帮你加到系统变量就不用手动加了，然后后面默认就好。

安装完成后，用电脑的的cmd命令：npm -v 会显示npm的版本号，如果出现“npm不是内部或外部命令“，则说明环境变量没有设置对

2、Windows系统的先安装“创建cmd右键快捷访问方式”，能够右击快速打开路径的Cmd命令

下载连接download.csdn/download/u013116210/12685336, 如图下是安装后，右键菜单会加了”管理员身份快捷访问cmd“的项

3、运行官方的demo。

官网文档www.electronjs/docs/tutorial/first-app#trying-this-example

在拉到最后，会看到以下截图，下面截图的步骤就是

（1）第一步用Git克隆demo仓库。如果之前没有用安装过Git，需要到官网git-scm/downloads下载安装。

新建文件夹，在该目录右键运行cmd命令： git clone github/electron/electron-quick-start 克隆成功，会在文件夹下生成了electron-quick-start的目录

如果Git克隆不了或者太慢，可以手动在这个网址下载demo ：github/electron/electron-quick-start

（2）第一步进入electron-quick-start目录，安装依赖 在cmd使用命令： cd electron-quick-start npm install 使用install命令就会安装项目的依赖包

---

注意：如果在安装依赖包中，下载很慢的，请用Ctrl + c键取消安装，再用cnpm代替npm命令，因为npm原始下载源在国外，实在太慢了，所以以后遇到需要下载的都可以用cnpm命令代替npm： cnpm install 如果还没有安装过cnpm的命令的话，请参考以下链接： blog.csdn/u013116210/article/details/107788738

---

下面图，我的没有报错之类的，项目文件夹会生成node_modules的文件夹。如果是报错，Electron版本下载不了，请参考blog.csdn/u013116210/article/details/107788738

（3）运行electron-quick-start 在cmd使用命令： npm start 便会运行electron-quick-start

4、参考官方的文档，自己创建一个Electron项目。

继续参考官网文档：www.electronjs/docs/tutorial/first-app#installing-electron从开头看起 （1）首先创建项目的文件夹，然后用npm init命令创建项目配置，如下面会出现一些会让我们填写，这里全部按回车键跳过，用默认的则可，到最后填"yes"，然后在项目目录就会创建了一个package.json的配置文件。

（2）打开package.json，按照官方的文档，在scripts节点加上"start": "electron ."记得上一语句加上一个逗号,然后main值把index.js改为main.js。下面是我的配置

{ "name": "myelectrondemo", "version": "1.0.0", "description": "", "main": "main.js", "scripts": { "test": "echo \\"Error: no test specified\\" && exit 1", "start": "electron ." }, "author": "", "license": "ISC" }

说明：

• name：项目名称
• version：项目版本
• description：项目描述
• main：程序的入口处
• scripts：项目运行脚本，比如start指定了运行npm start时，所要执行的命令
• author：作者
• license：项目使用的协议

（3）项目根目录创建main.js（package.json配置的入口文件）的文件，下面是参考官方文档的代码：

const { app, BrowserWindow } = require('electron') function createWindow(){ let win = new BrowserWindow({ width:800, height:600, webPreferences:{ nodeIntegration:true } }) // 并且为你的应用加载index.html。 win.loadFile("index.html"); //打开开发者工具 win.webContents.openDevTools(); } // Electron会在初始化完成并且准备好创建浏览器窗口时调用这个方法 // 部分 API 在 ready 事件触发后才能使用。 app.whenReady().then(createWindow); app.on("window-all-closed",() => { // 在 macOS 上，除非用户用 Cmd + Q 确定地退出， // 否则绝大部分应用及其菜单栏会保持激活。 if (process.platform !== "darwin") { app.quit(); } }) app.on('activate', () => { // 在macOS上，当单击dock图标并且没有其他窗口打开时， // 通常在应用程序中重新创建一个窗口。 if (BrowserWindow.getAllWindows().length === 0) { createWindow() } }) // 您可以把应用程序其他的流程写在在此文件中 // 代码 也可以拆分成几个文件，然后用 require 导入。

（4）项目根目录创建index.html的文件,下面是文件代码。

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> 这个Electron应用 </body> </html>

（5）按照文档，安装Electron依赖到项目中。 使用命令： npm install --save-dev electron

---

注意：如果在安装依赖包中，下载很慢的，请用Ctrl + c键取消安装，再用cnpm代替npm命令，因为npm原始下载源在国外，实在太慢了，所以以后遇到需要下载的都可以用cnpm命令代替npm： cnpm install --save-dev electron 如果还没有安装过cnpm的命令的话，请参考以下链接： blog.csdn/u013116210/article/details/107788738

---

安装electron成功后，项目目录便会多个了node_modules文件夹和package-lock.json的文件。

（6）运行项目。 使用命令运行项目： npm start 下图就是运行的截图，说明demo已经成功了，下面图有个很熟悉的界面，没错，这是Chrome浏览器开发者工具的界面，因为Electron是用Chromium内核，Electron应用会自带这个“开发者工具”这个界面是main.js中的代码win.webContents.openDevTools();控制的。

（7）总结下使用npm start命令大概的运行步骤。

使用`npm start`命令 > package.json文件中scripts节点的start节点 > 运行命令electron . > 执行package.json文件main节点main.js > 执行代码app.whenReady().then(createWindow) > new BrowserWindow的时候创建了窗口 > 代码win.loadFile("index.html") 加载index.html网页

上面demo连接：download.csdn/download/u013116210/12686203

下面说下Electron打包软件的方法： blog.csdn/u013116210/article/details/107809014

参考： 1、www.electronjs/ 2、www.codebye/nodejs-nw-js-vs-electron.html 3、www.zhihu/question/38854224

本文标签： 新手入门electron