Electron学习笔记（一）
2017-04-22 本文已影响271人
大鱼的自我成长
Electron学习笔记（Mac）
参考资料：官方指南中文版快速入门
官网例子Electron-quick-start
quick-start安装与运行
值得注意的是，这是一个不完整的应用，需要通过terminal来启动。
# 从GitHub克隆到本地
$ git clone https://github.com/electron/electron-quick-start
# 切换到quick start目录
$ cd electron-quick-start
# 安装依赖库，并运行程序
$ npm install && npm start
# 关闭程序, 或在程序运行时使用Command+Q来退出程序
$ Control + C
安装依赖库的事件可能会比较久，耐心一点等待。
运行之后界面如图：
Paste_Image.png
Hello World!
We are using Node.js 7.4.0, Chromium 56.0.2924.87, and Electron 1.6.5.
quick-start目录结构
--- electron-quick-start
|--- + node_modules
|--- - package.json
|--- - main.js
|--- - index.html
|--- - renderer.js
|--- - README.md
|--- - LICENSE.md
package.json文件
package.json提供应用的基本信息
-
name字段表示应用或是程序名称为electron-quick-start; -
version显示当前程序的版本号为1.0.0 -
main字段声明的main.js为程序的启动脚本程序，它运行在主进程上。当未声明时，Electron会优先加载index.js;
# package.js文件内容（quick-start）
{
"name": "electron-quick-start",
"version": "1.0.0",
"description": "A minimal Electron application",
"main": "main.js",
"scripts": {
"start": "electron ."
},
"repository": "https://github.com/electron/electron-quick-start",
"keywords": [
"Electron",
"quick",
"start",
"tutorial",
"demo"
],
"author": "GitHub",
"license": "CC0-1.0",
"devDependencies": {
"electron": "~1.6.2"
}
}
main.js文件
main.js文件用于创建窗口和处理系统事件
/********************
** main.js文件内容 **
********************/
// 导入electron模块
const electron = require('electron')
// 应用生命控制app
const app = electron.app
// 创建一个原生浏览器窗口
const BrowserWindow = electron.BrowserWindow
// 引入path和URL模块
const path = require('path')
const url = require('url')
// 保持对窗口对象的全局引用
// 否则，窗口对象会在JS对象垃圾回收时自动关闭
let mainWindow
function createWindow () {
// 创建浏览窗口
mainWindow = new BrowserWindow({width: 800, height: 600})
// 加载app的index.html文件
mainWindow.loadURL(url.format({
pathname: path.join(__dirname, 'index.html'),
protocol: 'file:',
slashes: true
}))
// Open the DevTools.打开开发者工具DevTools
// mainWindow.webContents.openDevTools()
// Emitted when the window is closed. 当窗口被关闭时，触发此事件
mainWindow.on('closed', function () {
// 取消引用 window 对象，如果你的应用支持多窗口的话，
// 通常会把多个 window 对象存放在一个数组里面，
// 与此同时，你应该删除相应的元素。
mainWindow = null
})
}
// Electron初始化完成，并准备好创建浏览窗口之后
// 调用函数createWindow
// 一些API也只有在此事件（ready）触发之后才能使用
app.on('ready', createWindow)
// 当所有窗口被关闭时，即事件window-all-closed被触发后，退出程序
app.on('window-all-closed', function () {
// 对于MacOS用户，往往需要使用command+q完全退出程序
// 否则，绝大部分其菜单栏会保持激活状态。即程序并未完全退出。
// 对于非Darwin平台来讲，如Windows，则直接退出程序
if (process.platform !== 'darwin') {
app.quit()
}
})
// 若程序activate事件被触发时，执行该操作，创建一个新窗口
app.on('activate', function () {
// 在Mac系统中，若其他窗口都已关闭，点击dock面板上的程序图标时
// 会重新创建一个窗口
if (mainWindow === null) {
createWindow()
}
})
// 在这文件，你可以续写应用剩下主进程代码。
// 也可以拆分成几个文件，然后用 require 导入。
index.html文件
实际自己的程序时，假若已有一个网页就搞定的程序，可以直接将此index.html文件替换为自己的文件即可。
<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello World!</title>
</head>
<body>
<h1>Hello World!</h1>
<!-- 再次渲染进程中，你可以使用任何Node.js的API -->
We are using Node.js <script>document.write(process.versions.node)</script>,
Chromium <script>document.write(process.versions.chrome)</script>,
and Electron <script>document.write(process.versions.electron)</script>.
</body>
<script>
// 同样的，你也可以在此进程中引入其他文件
require('./renderer.js')
</script>
</html>
运行程序
预编译运行electron-prebuilt
- 如果使用
npm安装了Electron，则electron模块内包含了所有使用的预编译版本。
可以直接在程序主目录下使用$ electron .命令来运行你的程序； - 若是局部安装，则需要添加
electron模块的相对路径，比如Mac系统内为$ .node_modules/.bin/electron .。
发行版本运行
应用部署
1. 拷贝所有资源文件来分发程序
下载prebuilt binaries, 可以选择下载最新版本，也可以选择其他的。比如electron-v1.3.15-darwin-x64.zip。解压后，得到同名文件夹， 其目录结构如下：
--- electron-v1.3.15-darwin-x64.zip
|--- Electron
|--- LICENSE
|--- LICENSES.chromium.html
|--- version
右键查看Electron--> “查看包内容”，目录结构如下：
--- Electron
|--- + Frameworks
|--- + MacOS
|--- + Resources
|--- Info.plist
|--- PkgInfo
然后，将程序应用，如electron-quick-start，改名为app。 electron-quick-start <u>重命名为--></u> app。并将app放置在Electron资源文件夹Resources内,：
electron/Electron.app/Contents/Resources/app/
├── package.json
├── main.js
└── index.html
├── ...
到此，拷贝资源方式来分发一个完整的APP应用就完成了。
2. 打包为asar文件防止源代码暴露
asarGitHub地址点击asar。安装时，强烈建议<u>全局安装</u>。
打包app.asar文件，其他可以教程可以参考其GitHub教程。
$ npm install -g asar
$ asar -V
######V1.30.0######
$ asar pack electron-quick-start app.asar
打包完成之后，将app.asar复制到Electron资源文件夹下，替代原先的app资源文件。
electron/Electron.app/Contents/Resources/
└── app.asar
打开Electron APP图标运行，正常运行说明打包成功。
重命名是件复杂的事情，建议不要手动来操作。手动改名点这里
第三方打包工具
npm来安装第三方库工具，具体安装方式详见各自README文件。
