Electron入门

2018-07-30 本文已影响0人 Lethe35

简介

https://electronjs.org/
一个平台，可以开发跨平台桌面应用
核心思想：希望通过一套代码在不同平台打包成不同平台的桌面应用程序

组成：
浏览器内核（chrominu） + Node
(运行Html+css+js) (运行功能)

从官方示例electron-quick-start入门

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

1. package.json

以npm start启动应用
入口文件 main.js

2.main.js

通过electron的API创建一个窗口载入我们写好的HTML文件。主要负责创建BrowserWindow窗口、启动其他配置文件和在窗口关闭之后清理进程释放资源的工作。在Main process中执行

const {app, BrowserWindow} = require('electron');

Electron 在一开始会通过Node去执行当前main.js文件，electron模块是electron平台内置的模块，提供了所有API；app这个模块是用来控制整个应用程序；BrowserWindow-浏览器窗口类型，可以用来创建一个浏览器窗口
这行代码相当于：

const electron = require('electron;); 
const app = electron.app; 
const BrowserWindow = electron.BrowserWindow;

  mainWindow = new BrowserWindow({width: 800, height: 600})

创建一个新的浏览器窗口。宽度为800，高度为600

  mainWindow.loadFile('index.html');

从应用中加载index.html文件
还能写成

// 装载应用的index.html页面,__dirname为当前文件路径
  mainWindow.loadURL(url.format({
    pathname: path.join(__dirname, "index.html"),
    protocol: 'file:',
    slashes: true
}));

mainWindow.webContents.openDevTools()

打开开发者工具

  // 当窗口关闭时调用的方法
  mainWindow.on('closed', function () {
    // 解除窗口对象的引用，通常而言如果应用支持多个窗口的话，你会在一个数组里
    // 存放窗口对象，在窗口关闭的时候应当删除相应的元素。
    mainWindow = null
  })

// 当Electron完成初始化并且已经创建了浏览器窗口，则该方法将会被调用。
// 有些API只能在该事件发生后才能被使用。
app.on('ready', createWindow);

// 当所有的窗口被关闭后退出应用
app.on('window-all-closed', function() {
  // 对于OS X系统，应用和相应的菜单栏会一直激活直到用户通过Cmd + Q显式退出
  if (process.platform !== 'darwin') {
    app.quit();
  }
});

app.on('activate', function() {
  // 对于OS X系统，当dock图标被点击后会重新创建一个app窗口，并且不会有其他
  // 窗口打开
  if (win === null) {
    createWindow();
  }
});

3.index.html

<script>
      // You can also require other files to run in this process
      // 在Renderer process中执行
      require('./renderer.js')
</script>

4.应用打包

方法一：electron-packager

1.安装electron-packager

 npm install --save-dev electron-packager

1. 打包

electron-packager . electron-demo --win --out ./publish --arch=x64 --electron-version=2.0.0

命令执行完毕之后会在应用的根目录下生成publish文件夹，

electron-demo-win32-x64是打包好的文件，在里面找的可运行的exe文件

3.electron-packager命令参数说明

electron-packager <location of project> <name of project> <platform> <architecture> <electron version> <optional options>

electron-packager <应用目录> <应用名称> <打包平台> --out <输出目录> <架构> <electron版本><可选选项>

location of project：项目所在路径
name of project：打包的项目名字
platform：确定了你要构建哪个平台的应用（Windows、Mac 还是 Linux）
architecture：决定了使用 x86 还是 x64 还是两个架构都用
electron version：electron 的版本
optional options：可选选项

4.为使用便利，可在package.json中配置打包命令

然后在命令行直接执行

npm run packager

方法二：electron-builder

简单的说，electron-builder就是有比electron-packager有更丰富的的功能，支持更多的平台，同时也支持了自动更新。除了这几点之外，由electron-builder打出的包更为轻量，并且可以打包出不暴露源码的setup安装程序。

1.安装electron-builder

npm install electron-builder --save-dev

(官方强烈推荐使用yarn安装：yarn add electron-builder --save-dev)

2.在package.json中的scripts中添加如下配置

 "dist": "electron-builder --win --x64"

3.在命令行中执行npm run dist