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
Hello World!
Hello World!
We are using node ,
Chrome ,
and Electron .
// 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
运行
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解压到第三步的目录下,根据错误提示的版本在对于的包下面新建对于的版本,并把文件移动到目录下,便可正常打包,如图: