一起养成写作习惯!这是我参与「掘金日新计划 · 4 月更文挑战」的第4天,点击查看活动详情。
electron简介
electron是使用 JavaScript,HTML 和 CSS 构建跨平台的桌面应用程序, 可以让你使用纯 JavaScript 调用丰富的原生 APIs 来创造桌面应用,入门门槛非常低,周边的生态繁荣而且历史悠久。
优点
- 相较于基于C++库开发桌面软件来说,使用electron开发更容易上手且开发效率更高。并且electron中内置了Chromium浏览器,该浏览器对标准支持都非常好,甚至支持一些尚未通过的标准,所以在开发时很少甚至不会遇到兼容性的问题。开发者的自由度得到了最大化的保护。
- 另外,web前端受限访问的文件系统、系统托盘、系统通知、注册表等,在electron技术体系下均有API供开发者使用。
缺点
- 打包后的应用体积巨大:因为内置了Chromium浏览器,所以打的包会大很多,但是现在网络环境越来越好,这个问题给用户带来的影响会被慢慢削弱。
- 版本发布过快:为了跟上Chromium的版本发布节奏,所以非常频繁的发布新版本。
- 安全性问题。
- 资源消耗过大。
搭建开发环境
大部分时候都是使用Node.js来创建electron项目的,所以先安装Node.js
下载地址: http://nodejs.cn/download/
一路next就ok
node -v
查看版本号进行验证是否安装成功
安装electron:
// 在当前目录安装最新
npm i -D electron
// 全局安装最新
cnpm install electron -g
// 指定版本号安装
npm i -D electron@11.0.4
接下来,我们创建第一个electron应用,先创建一个目录,在此目录下打开命令行,执行如下命令创建一个Node.js项目: npm init
在scripts中将test修改为"start": "nodemon --watch index.js --exec electron ."
这样每次修改index.js
主进程文件都会重新启动项目了,index.js
可以自行修改成 main.js
等等
并且可以指定electron版本号进行定向开发
// package.json
{
"name": "electron_demo",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "nodemon --watch index.js --exec electron ."
},
"devDependencies": {
"electron": "^13.3.0"
},
"author": "",
"license": "ISC"
}
electron是分为主进程和渲染进程,index.js属于主进程。 官方代码如下:
const { app, BrowserWindow } = require('electron')
function createWindow () {
// 创建浏览器窗口
const win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true
}
})
// 并且为你的应用加载index.html
win.loadFile('index.html')
// 打开开发者工具
win.webContents.openDevTools()
}
// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// 部分 API 在 ready 事件触发后才能使用。
app.whenReady().then(createWindow)
// Quit when all windows are closed.
app.on('window-all-closed', () => {
// 在 macOS 上,除非用户用 Cmd + Q 确定地退出,
// 否则绝大部分应用及其菜单栏会保持激活。
if (process.platform !== 'darwin') {
app.quit()
}
})
app.on('activate', () => {
// 在macOS上,当单击dock图标并且没有其他窗口打开时,
// 通常在应用程序中重新创建一个窗口。
if (BrowserWindow.getAllWindows().length === 0) {
createWindow()
}
})
// In this file you can include the rest of your app's specific main process
// code. 也可以拆分成几个文件,然后用 require 导入。
可以根据官方给的例子按照文档进行选择性配置,最终index.js代码如下:
var electron = require('electron');
var app = electron.app;
var BrowserWindow = electron.BrowserWindow;
var win = null;
app.on('ready', () => {
win = new BrowserWindow({
webPreferences: {
nodeIntegration: true
}
})
win.loadFile('index.html');
win.on('closed', () => {
win = null;
})
})
app.on('window-all-closed', () => {
app.quit();
})
所以还需要构建一个渲染进程,在目录下新建index.html并输入以下代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
Hello World
</body>
</html>
最后运行:
cnpm install
npm run start
效果如下:
到此为止,第一个桌面窗口Hello World就诞生啦!
感谢
谢谢你读完本篇文章,希望对你能有所帮助,如有问题欢迎各位指正。
我是Nicnic,如果觉得写得可以的话,请点个赞吧❤。
写作不易,「点赞」+「在看」+「转发」 谢谢支持❤
往期好文
《前端CSS高频面试题---1.CSS选择器、优先级、以及继承属性》