从hello world开始入手，我的环境是macOs Mojave 请确保已安装nodejs
electron 简介
electron 是一款可以使用js,html,css来构建跨平台app的开源库，Electron通过将Chromium和Node.js合并到同一个运行时环境中，并将其打包为Mac，Windows和Linux系统下的应用。
electron 项目与web项目的区别
electron核心我们可以分成2个部分，主进程和渲染进程。主进程控制着应用的生命周期。可以打开对话框，创建渲染进程，还可以处理其它与操作系统的交互操作，包括启动和退出应用。简单理解就是连接着操作系统和渲染进程，可以把她看做页面和计算机沟通的桥梁。渲染进程 就是我们所熟悉前端环境了。只是载体改变了，从浏览器变成了window（窗口）。传统的web环境我们是不能对用户的系统就行操作的。而electron相当于node环境，我们可以在项目里使用所有的node api 。
- 相比web项目，桌面项目多了一个进程
简单理解：给web项目套上一个node环境的壳。😆
打造你的第一个Electron应用
咱们常用的编辑器 VSCode，也是基于 Electron 构建的哦~
- 一个最基本的 Electron 应用一般来说会有如下的目录结构：
your-app/
├── package.json
├── main.js
└── index.html
- 执行命令初始化文件夹
npm init
- 初始化之后的package.json
{
"name": "electron_demo",
"version": "0.0.1",
"description": "electron_demo",
"main": "main.js",
"scripts": {
"start": "electron ."
},
"author": "zj",
"license": "ISC"
}
4.安装Electron 推荐使用node安装
sudo cnpm install --save-dev electron //网速不好的情况下npm安装时间较长，建议使用淘宝镜像，执行npm install -g cnpm --registry=https://registry.npm.taobao.org ,安装cnpm工具
- main.js内容
const { app, BrowserWindow } = require("electron"); //electron.app负责electron应用程序的声明周期，electron.BrowserWindow 类负责创建窗口
//保持对window对象的全局引用，如果不这么做的话，当JavaScript对象被垃圾回收的时候，window对象将会自动的关闭
let win;
// Electron 会在初始化后并准备
// 创建浏览器窗口时，调用这个函数。
// 部分 API 在 ready 事件触发后才能使用。例如（closed）
app.on("ready", () => {
//创建浏览器窗口
win = new BrowserWindow({ width: 800, height: 600 });
//加载app的index.html
win.loadFile("index.html");
//打开开发者工具
win.webContents.openDevTools();
//当window被关闭是触发
win.on("closed", () => {
//取消引用 window 对象，如果你的应用支持多窗口的话，
// 通常会把多个 window 对象存放在一个数组里面，
// 与此同时，你应该删除相应的元素。
win = null;
});
});
// 当全部窗口关闭时退出。
app.on("window-all-closed", () => {
// 在 macOS 上，除非用户用 Cmd + Q 确定地退出，
// 否则绝大部分应用及其菜单栏会保持激活。
if (process.platform !== "darwin") {
app.quit();
}
});
app.on('activate', () => {
// 在macOS上，当单击dock图标并且没有其他窗口打开时，
// 通常在应用程序中重新创建一个窗口。
if (win === null) {
createWindow()
}
})
// 在这个文件中，你可以续写应用剩下主进程代码。
// 也可以拆分成几个文件，然后用 require 导入。
- index.html内容
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello World!</title>
</head>
<body>
<h1>Hello World!</h1>
<!-- All of the Node.js APIs are available in this renderer process. -->
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>.
<script>
console.log(process)
// You can also require other files to run in this process
// require('./renderer.js')
</script>
</body>
</html>
- 至此就可以启动啦~~
npm start
-
启动之后会在菜单栏生成一个electron app
electron app图标+打开app之后的内容
项目打包
- 安装electron-package
cnpm install --save-dev electron-package
- 添加script命令，用于打包electron app
"scripts": {
"start": "electron .",
"build": "electron-packager . electron_demo --platform=darwin --arch=x64 --ignore=node_modules/electron-*" //electron-packager 项目目录 app名称 --platform=平台 --arch=架构 --ignore=要忽略的目录或文件
},
- 执行命令打包
cnpm run build
- 生成文件夹
electron_demo-darwin-x64/
├── electron_demo //打包出来的项目，使用这个就可以了
├── LICENSE
├── LICENSE.chromium.html
└── version
项目压缩
- 安装asar
sudo cnpm install --save-dev asar
- 添加script命令
"scripts": {
"start": "electron .",
"build": "electron-packager . electron_demo --platform=darwin --arch=x64 --ignore=node_modules/electron-*",
"package": "asar pack electron_demo.app/Contents/Resources/app electron_demo.app/Contents/Resources/app.asar" //新增
// asar 命令格式 asar pack <dir> <output>
},
- 执行压缩命令
sudo cnpm run package
-
生成.asar文件
asar文件 - 来个题外话，解压文件
1.asar e app.asar <解压后的目录>
2.asar extract app.asar <解压后的目录>
icon更改
- png图片（1024*1024）
- 新建一个暂定的目录放各种大小的图片（目录后缀必须为.iconset）
electron_demo/
├── pic.png
├── icons.iconset
└── ...
- 执行命令在icons.iconset中生成不同大小的图片（sips -z 裁剪图片）
sips -z 16 16 pic.png --out icons.iconset/icon_16x16.png
sips -z 32 32 pic.png --out icons.iconset/icon_16x16@2x.png
sips -z 32 32 pic.png --out icons.iconset/icon_32x32.png
sips -z 64 64 pic.png --out icons.iconset/icon_32x32@2x.png
sips -z 128 128 pic.png --out icons.iconset/icon_128x128.png
sips -z 256 256 pic.png --out icons.iconset/icon_128x128@2x.png
sips -z 256 256 pic.png --out icons.iconset/icon_256x256.png
sips -z 512 512 pic.png --out icons.iconset/icon_256x256@2x.png
sips -z 512 512 pic.png --out icons.iconset/icon_512x512.png
sips -z 1024 1024 pic.png --out icons.iconset/icon_512x512@2x.png
4.package.json中增加打包icon及系统icon
"scripts": {
"start": "electron .",
"build": "electron-packager . electron_demo --icon=Icon.icns --platform=darwin --arch=x64 --ignore=node_modules/electron-*",
"package": "asar pack electron_demo.app/Contents/Resources/app electron_demo.app/Contents/Resources/app.asar"
},
"mac":{
"icon":"Icon.icns"
}
5.执行打包命令就可以看到最新图标了
cnpm run build
参考文档
后期优化内容
- 构建安装包可支持下载；
- 自动更新；
- 安装包太大；
