Electron 是什么?
使用Javascript、Html和Css构建桌面应用程序的框架。在Window上运行的跨平台应用MacOS和Linu—不需要本地开发经验。
Electron 快速入门(需要使用到Node.js环境)
使用脚手架进行应用创建
electron 应用程序遵循与其他Node.js项目相同的结构,
#npm 命令
#文件夹创建
mkdir my-electron-app
#初始化项目
npm init
#yarn
#文件夹创建
mkdir my-electron-app
#初始化项目
yarn init
intit初始化命令回在项目初始化时在配置项当中设置一些值,其中需要遵循的基本原则:
entry point
应该为 "main.js"author
和description
作者和描述可为任意值,对于打包应用则为必填项。
初始化后的package.json文件应该是这样的。
{
"name": "electron-app",
"version": "1.0.0",
"description": "firsrt electron-app",
"main": "main.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "juran",
"license": "ISC"
}
然后,将electron安装到应用的开发依赖之中。
#npm
npm install --save-dev electron
#yarn
yarn add -dev electron
安装完成之后,在项目根目录package.json
之中scripts
字段下添加一条electron的stat
指令。
{
"scripts": {
"start": "electron ."
}
}
完整package.json
文件
{
"name": "electron-app",
"version": "1.0.0",
"description": "firsrt electron-app",
"main": "main.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "electron"
},
"author": "juran",
"license": "ISC",
"devDependencies": {
"electron": "^21.0.1"
}
}
命令添加完成之后,使用start
命令启动electron 项目。
npm start
启动速度是非常的快
但是此时由于electron没能找到我们的应用程序,所以electron在成功启动并弹出后后抛出异常。
Error launching app
运行主进程
任何Electron应用程序入口都是main.js
文件,这个文件控制了 主进程,该main.js 运行在一个完整的node.js环境之中,其主要负责应用生命周期
、原生界面显示
、执行特殊操作并管理渲染器
。
执行期间:Electron将依据package.json
配置下main
指令找到此文件。
对项目进行init初始化时,并不会对该文件进行创建,所以需要将main.js
手动创建到main.js文件之中。
注意:再次运行
start
后,应用程序不会抛出任何错误信息,然后,它也不会做任何事情,因为还没有对main.js文件中,添加任何代码。
创建页面
在创建应用程序前,需要创建加载进该窗口的内容。可以是Html文件,也可以是远程的URl
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">
<title>Hello World!</title>
</head>
<body>
<h1>Hello World!</h1>
We are using Node.js <span id="node-version"></span>,
Chromium <span id="chrome-version"></span>,
and Electron <span id="electron-version"></span>.
</body>
</html>
该页面之中所预留的信息,都是为了后面使用JavaScript进行动态插入。
窗口中进行应用的打开
现在有一个界面了,需要将它加载到应用程序当中
,那么需要做到这一点,需要使用到Electron两个模块:
- app 该模块控制整个应用程序的
事件生命周期
。 - BrowserWindow 创建和管理应用程序 窗口。
因为主程序运行着node.js,在Main.js文件头部引入它们作为CommonJS 模块:
const {app,BrowserWindos} = require('electron');
添加createWindow()方法将index.html加载进一个新的BrowserWindow实例:
const createWindow = () => {
const win = new BrowserWindow({
width: 800,
height: 600
})
win.loadFile('index.html')
}
紧接着,调用createWindow函数打开窗口。
在Electron中,只有在app模块的ready事件被激活后才能创建浏览器窗口。app.WhenReady()
Api监听事件。在whenReady成功后调用careteWindow()
.
app.whenReady().then(() => {
createWindow()
})
注意:次数,您的电子应用程序应成功 打开显示您页面的窗口。
管理窗口的生命周期
现在打开的可以说就是一个浏览器窗口,为了让这个浏览器窗口看起来更像是平台原生。应用程序在每个Os下有不同的行为,那么app实现这些约定的责任Electron交给开发者。
总而言之,你可以使用进程
全局的platform
属性来专门为某些操作系统的运行代码。
关闭所有窗口时退出应用(window&Linux)
在window和Linux上,关闭所有窗口通常为退出应用程序。
实现这一点,需要监听app
模块的window-all-close
事件,如果用户不是在macOs(darwin)上运行程序,则调用app.quit
app.on("window-all-close",() =>{
if(process.platform !== 'darwin')app.quit()
})
如果没有窗口则打开一个窗口(MacOS)
在Linux和Windows应用程序没有窗口则代表退出,MacOS在没有窗口打开的情况下也是继续运行的,并且没有窗口可用的情况下激活应用时会打开新窗口。
为实现这一特性,监听app
模块中的activate
事件。如果没有任何浏览器窗口是打开的,则调用createWindow()方法。
因为窗口无法在ready
中之前进行创建,所需需要在窗口初始化完成之后监听activate
事件,通过whenReady()
回调中附上您的事件监听器来完成这个操作。
app.whenReady().then(() => {
createWindow()
//MacOS特性,如果没有窗口打开则创建一个窗口。
app.on('activate',()=>{
if(BrowserWindow.getAllWindows.length === 0)createWindow();
})
})
通过预加载脚本从渲染器访问Node.js
最后做的是将Electron的版本号和它的依赖项展示到web界面之中。
在主进程通过Node的全局process
对象访问这个信息是微不足道的,但是,在Electron中不能直接操纵Dom,因为它无法访问渲染器文档
上下文。他们存在于完全不同的进程!
如果要深入了解Electron进程,需要参阅进程模型 文档。
这是将 预加载 脚本连接到渲染器排上用场的地方。预加载脚本在渲染器进程加载之前加载,并有权访问两个 渲染器全局 (例如 window
和 document
) 和 Node.js 环境。
创建preload.js
新脚本
window.addEventListener('DOMContentLoaded', () => {
//创建一个替换函数
const replaceText = (selector,text) =>{
const element = document.getElementById(selector);
if(element) element.innerText = text;
}
//循环获取进程版本号。
for(const dependency of ['chrome','node','electron']){
replaceText(`${dependency}-version`, process.versions[dependency]);
}
})
改段代码,主要通过process.versions
对象,运行一个replaceText函数根据id替换文本,然后将该脚本附加到渲染器,在现有的BrowserWindow构造器中将路径的预加载脚本传入webPreference.preload
选中之。
// include the Node.js 'path' module at the top of your file
const path = require('path')
// modify your existing createWindow() function
const createWindow = () => {
const win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
preload: path.join(__dirname, 'preload.js')
}
})
win.loadFile('index.html')
}
// ...
这里使用Node.js中的两个概念:
__dirname
字符串指向当前正在执行脚本的路径。path.join
API将多个路径进行链接。
将功能添加到您的网页内容
对于网页的内容交互,将脚本添加到渲染器进程之中 ,由于渲染器运行在正常的web之中,所以可以在index.html
文件关闭</body>
标签之前添加一个</script>
标签。
<script src="./renderer.js"></script>
这样基本上就是一个完整的且功能齐全的Electron程序。
总结
我们所要做的步骤实际上并不是很多!
- 初始化一个Node.js项目,添加Electron依赖
- 创建一个
main.js
脚本运行我们的主进程,它控制我们的应用程序并且在Node.js环境中运行,在此脚本中,我们的使用Electron中的app
和BrowserWindow
模块来进程引用程序窗口创建,在单独进程之中显示网页内容。 - 为了访问渲染器中的Node.js的某些功能,在
BrowserWindow
的构造函数上附加一个预加载脚本。
打包并发布应用程序(Electron Forge。)
将 Electron Forge 添加到您应用的开发依赖中,并使用其"import"命令设置 Forge 的脚手架:
npm install --save-dev @electron-forge/cli npx electron-forge import
·使用 Forge 的
make
命令来创建可分发的应用程序:npm run make
Electron-forge 会创建 out
文件夹,您的软件包将在那里找到:
// Example for macOS
out/
├── out/make/zip/darwin/x64/my-electron-app-darwin-x64-1.0.0.zip
├── ...
└── out/my-electron-app-darwin-x64/my-electron-app.app/Contents/MacOS/my-electron-app