全网疯传的 electron 入门教程，网友：绝了
Hi，各位读者们，我是你们的鸭哥！
由于最近公众号的改版，为了保证你们第一时间能看到鸭哥的文章，大家记得将公众号 加星标置顶 哦！
作者：Kelly_zj
链接：https://sourl.cn/iGSG3Y
# 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 构建的哦~
1.一个最基本的 Electron 应用一般来说会有如下的目录结构：
your-app/├── package.json├── main.js└── index.html
2.执行命令初始化文件夹
npm init
3.初始化之后的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工具
5.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 导入。
6 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>
7.至此就可以启动啦~~
npm start
8.启动之后会在菜单栏生成一个electron app
electron app图标+打开app之后的内容
# 项目打包
1.安装electron-package
cnpm install --save-dev electron-package
2.添加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=要忽略的目录或文件 },
3.执行命令打包
cnpm run build
4.生成文件夹
electron_demo-darwin-x64/├── electron_demo //打包出来的项目，使用这个就可以了├── LICENSE├── LICENSE.chromium.html└── version
# 项目压缩
1.安装asar
sudo cnpm install --save-dev asar
2.添加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> },
3.执行压缩命令
sudo cnpm run package
4.生成.asar文件
asar文件
5.来个题外话，解压文件
1.asar e app.asar <解压后的目录>
2.asar extract app.asar <解压后的目录>
# icon更改
1.png图片（1024*1024）
2.新建一个暂定的目录放各种大小的图片（目录后缀必须为.iconset）
electron_demo/├── pic.png├── icons.iconset└── ...
3.执行命令在icons.iconset中生成不同大小的图片（sips -z 裁剪图片）
sips -z 16 16 pic.png --out icons.iconset/icon_16x16.pngsips -z 32 32 pic.png --out icons.iconset/icon_16x16@2x.pngsips -z 32 32 pic.png --out icons.iconset/icon_32x32.pngsips -z 64 64 pic.png --out icons.iconset/icon_32x32@2x.pngsips -z 128 128 pic.png --out icons.iconset/icon_128x128.pngsips -z 256 256 pic.png --out icons.iconset/icon_128x128@2x.pngsips -z 256 256 pic.png --out icons.iconset/icon_256x256.pngsips -z 512 512 pic.png --out icons.iconset/icon_256x256@2x.pngsips -z 512 512 pic.png --out icons.iconset/icon_512x512.pngsips -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
# 后期优化内容
1.构建安装包可支持下载；
2.自动更新；
3.安装包太大；