electron 安装import_Electron: 从零开始写一个记事本app

Electron介绍

简单来说，Electron就是可以让你用Javascript、HTML、CSS来编写运行于Windows、macOS、Linux系统之上的桌面应用的库。本文的目的是通过使用Electron开发一个完整但简单的小应用：记事本，来体验一下这个神器的开发过程。本文犹如Hello World一样的存在，是个入门级笔记，但如果你之前从未接触过Electron，而又对它有兴趣，某想信这会是一篇值得一看的入门教程。

PS：这篇文章是基于Windows的开发过程，未对macOS、Linux作测试。

开发环境安装

安装Node.js

点击 这里 进入官网下载、安装。

安装cnpm

由于众所周知的原因，你需要一个cnpm代替npm，这里 是官网。安装命令(打开系统的cmd.exe来执行命令)：

npm install -g cnpm --registry=https://registry.npm.taobao.org

安装Electron

cnpm install -g electron

安装Electron-forge

这是一个类似于傻瓜开发包的Electron工具整合项目。具体介绍点击 这里。

cnpm install -g electron-forge

新建项目

假设项目要放到H:\Electron目录下，项目名为notepad(字母全部小写，多个单词之间可以用“-”连接)。

打开cmd.exe，一路cd到H:\Electron。(也可以在Electron文件夹下，按住Shift键并右键单击空白处，选择在此处打开命令窗口来启动cmd.exe。)

执行下面的命令来生成名为notepad的项目文件夹，同时安装项目所需要的模块、依赖项等。

electron-forge init notepad

cd到notepad目录下，执行下面的命令来启动app(也可以简单的用npm start来运行)。

electron-forge start

cmd.exe

这样就可以看到基本的app界面了。

app界面

模板文件

这里某使用Visual Studio Code来开发app。

将notepad文件夹整个拖到VS Code中打开(或者点菜单文件-打开文件夹选择notepad文件夹打开项目)，可以看一下项目的目录结构：node_modules文件夹下是各种模块、类库，src下是app的源代码文件，package.json是描述包的文件。

Catalog

看一下package.json，注意这里默认已经将主进程入口文件配置为index.js(而不是main.js)。

main

为避免后面混乱，某还是将这里的src/index.js改成src/main.js，同时也要将文件index.js改名为main.js。

main.js

看一下main.js，这是app主进程的入口，在这里创建了mainWindow浏览器窗口，使用mainWindow.loadURL("file://${__dirname}/index.html")来加载index.html主页；使用mainWindow.webContents.openDevTools()来打开开发者工具用于调试(这个操作通常在发布app时删除)。然后是app的事件处理：

ready: 当Electron完成初始化后触发，这里初始化后就会去创建浏览器窗口并加载主页面。

window-all-closed: 当所有浏览器窗口被关闭后触发，一般此时就退出应用了。

activate: 当app激活时触发，一般针对macOS要需要处理。

看一眼index.html，这是主页面，除了显示Well hey there!!!的信息外，没什么具体内容。

于是，现在整个app只有二个源码文件：main.js和index.html。main.js是主进程入口，index.html是一个web页面，它需要使用一个浏览器窗口(BrowserWindow)来加载和显示，作为应用的UI，它处在一个独立的渲染进程中。app启动时执行main.js中的代码创建窗口，加载页面等。主进程与渲染进程之间不能直接互相访问，需要通过ipcMain和ipcRenderer进行IPC通信(Inter-process communication)，或者使用remote模块在渲染进程中使用主进程中的资源(反过来，在主进程中使用webContents.executeJavascript方法可以访问渲染进程)。

Notepad App功能设计

这里将实现一个类似于Windows的记事本的App。这个App具备以下功能：

主菜单：包括File, Edit, View, Help四个主菜单。重点是File菜单下的三个子菜单：New(新建文件)、Open(打开文件)、Save(保存文件)，这三个菜单需要自定义点击事件，其它的菜单基本使用内建的方法处理，所以没什么难度。

文本框：用于文本编辑。这也是这个App上的唯一一个组件，它的宽和高自动平铺满整个窗口大小。当修改了文本框中的文字后，会在App标题栏上最右侧添加一个*号以表示文档尚未保存。

加载和保存文本：可以打开本地文本文件，支持.txt, .js, .html, .md等文本文件；可以将文本内容保存为本地文本文件。在打开或新建文件前，如果当前文档尚未保存，会提示用户先保存文档。

退出程序：退出窗口或程序时，会检测当前文档是否需要保存，如果尚未保存，提示用户保存。

右键菜单：支持右键菜单，可以通过菜单右键执行一些基本的操作，如：复制、粘贴等。

下面是这个记事本App的演示效果，源码下载点击 这里。

Demo

Notepad App功能细节

由于主进程与渲染进程不能直接互相访问，所以部分细节有必要先考虑清楚。

主菜单：因为菜单只存在于主进程中，所以在执行某些涉及页面(渲染进程)的菜单命令时，比如Open(打开文件)命令，就需要与渲染进程进行通信，这可以使用ipc