Electron是由Github开发，用HTML，CSS和JavaScript来构建跨平台桌面应用程序的一个开源库。 Electron通过将Chromium和Node.js合并到同一个运行时环境中，并将其打包为Mac，Windows和Linux系统下的应用来实现这一目的。
使用eletron前需要储备哪些知识
1、首先需要熟练掌握前端的基础知识html,css，js
2、有一定的node基础，知道npm怎么用
下面我们从electron的安装开始，了解下electron。
1. electron 安装
安装前先安装 node.js 与 yarn / npm
mkdir electron-demo
cd electron-demo
yarn init -y
yarn add --dev electron
npx electron -v
2. 创建项目目录
main.js
index.html
在 package.json中添加script
"start": "electron ."
修改main
"main": "main.js"
3. 编写electron的demo
<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello World!</title>
</head>
<body>
<h1>Hello World!</h1>
We are using node <script>document.write(process.versions.node)</script>,
Chrome <script>document.write(process.versions.chrome)</script>,
and Electron <script>document.write(process.versions.electron)</script>.
<br>
<button id="hiBtn">hi</button>
<script>
document.getElementById('hiBtn')
.onclick = function(){
alert('hi')
}
</script>
</body>
</html>
// main.js
const { app, BrowserWindow } = require('electron')
function createWindow () {
// 创建浏览器窗口
let win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true
}
})
// 加载index.html文件
win.loadFile('index.html')
}
app.on('ready', createWindow)
使用 yarn start 运行
image.png
image.png
4. 使用electron-bulder打包项目
首先来看看什么是electron-builder：
简单的说，electron-builder就是将已有的electron应用打包成msi格式和exe可执行文件的工具。打包是一个成熟的应用程序一个重要的环节，希望这篇文章可以给大家一些参考，最后会讲到打包时遇到的一些坑，与大家分享。
// 安装electron-bulder依赖
yarn add electron-builder --dev
安装好之后会在package.json中的devDependencies生成代码:
"devDependencies": {
"electron-builder": "^21.2.0"
}
在package.json中做如下配置
"build": {
"appId": "com.hzlapp.app",
"mac": {
"category": "your.app.category.type"
}
},
"scripts": {
"pack": "electron-builder --dir",
"dist": "electron-builder",
"postinstall": "electron-builder install-app-deps",
"start": "electron ."
}
在命令行中输入````yarn dist```
打包后在dist目录生成如下文件：
解压zip包或执行setup安装文件，应用启动后且没有报错，则说明本次打包成功。
特点：
1、electron-builder 可以打包成msi、exe、dmg文件，macOS系统，只能打包dmg文件，window系统才能打包exe，msi文件；
2、几乎支持了所有平台的所有格式；
3、支持Auto Update；
4、支持CLI和JS API两种使用方式；
electron-builder打包流程遇到的坑
在第一次输入yarn dist
electron-builder有一些依赖包如 【winCodeSign】、【nsis】；在没墙的情况下，直接执行命令就会自动处理相关依赖，但天朝基本不行，所以会出现包安装超时等的一些情况，就算开了vpn也下载很慢，解决方法如下：
1.第一步：打开链接: https://github.com/electron-userland/electron-builder-binaries/releases 下载 winCodeSign 和 Source code
2.第二步：选择 winCodeSign-2.5.0.7z 和 Source code(zip)下载并解压，source code里面已经包含nsis
3.第三步：在%LOCALAPPDATA%（C:\Users\Administrator\AppData\Local）目录下新建electron-builder\cache\
4.第四步：将 winCodeSign-2.5.0.7z 中的文件 与 Source code(zip)中的nsis解压到第三步的目录下，根据错误提示的版本在对于的包下面新建对于的版本，并把文件移动到目录下，便可正常打包，如图：
网友评论