Electron 安装与使用

Electron是使用 JavaScript, HTML 和 CSS 构建跨平台的桌面应用

本文基于Windows进行开发的过程，记录下来，以便日后使用，Electron官网：https://electronjs.org/docs

1，安装node.js

　　进入官网下载、安装。https://nodejs.org/en/

2，安装cnpm

　　安装命令（打开系统的cmd.exe来执行命令）： npm install -g cnpm --registry=https://registry.npm.taobao.org 

3，安装Electron

　　安装命令： cnpm install -g electron 

4，安装Electron-forge

　　Electron工具整合项目：https://github.com/electron-userland/electron-forge

　　安装命令： cnpm install -g electron-forge 

5，新建项目

　　F盘新建Electron项目文件夹 F:\Electron。

　　在Electron文件夹下，按住Shift键并右键单击空白处，选择在此处打开命令窗口来启动cmd.exe。

　　执行 electron-forge init 项目名称 命令来生成名为myapp的项目文件夹，同时安装项目所需要的模块、依赖项等。

　　命令： electron-forge init myapp 

6，启动项目 

　　cd到myapp目录下，执行命令 electron-forge start 来启动app（也可以简单的用npm start来运行）。

7，项目文件

　　项目的目录结构：node_modules 文件夹下是各种模块、类库，src下是app的源代码文件，package.json是描述包的文件。

　　src/index.js：这是app主进程的入口，在这里创建了mainWindow浏览器窗口，

　　使用mainWindow.loadURL(\file://${__dirname}/index.html`)来加载index.html主页，

　　我们也可以在此链接我们需要链接的网址，来实现web桌面应用，例：mainWindow.loadURL(`https://www.cnblogs.com/`)，

　　使用mainWindow.webContents.openDevTools()`来打开开发者工具用于调试（这个操作通常在发布app时删除）。

　　然后是app的事件处理：

　　ready: 当Electron完成初始化后触发，这里初始化后就会去创建浏览器窗口并加载主页面。
　　window-all-closed: 当所有浏览器窗口被关闭后触发，一般此时就退出应用了。
　　activate: 当app激活时触发，一般针对macOS要需要处理。

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

8，package.json配置

　　"productName": "myapp" 打包后的文件名称

　　"version": "1.0.0" 版本号

　　若想更换打包程序的图标，可以在config->electronPackagerConfig->icon中进行设置，

　　（例如：我们把app.ico放在src目录下就可以这样配置"icon":"src/favicon.ico"）

 

9，编译打包

　　输入以下命令进行编译打包： npm run make 

 

　　修改package.json，在electronPackagerConfig部分添加"asar": true。
　　"electronPackagerConfig": {
　　　　"asar": true
　　}
　　重新打包后源码文件会被打包进app.asar文件中（该文件仍然在src目录下）。

 

　　可以直接运行打包后的myapp.exe启动程序