Electron开发跨平台桌面程序入门教程
Electron是什么呢?
Electron 可以让你使用纯 JavaScript 调用丰富的原生(操作系统) APIs 来创造桌面应用。 你可以把它看作一个 Node. js 的变体,它专注于桌面应用而不是 Web 服务器端。
这不意味着 Electron 是某个图形用户界面(GUI)库的 JavaScript 版本。 相反,Electron 使用 web 页面作为它的 GUI,所以你能把它看作成一个被 JavaScript 控制的,精简版的 Chromium 浏览器。
一、环境准备
本地环境:Node.js + npm
# 下面这行的命令会打印出Node.js的版本信息
node -v
# 下面这行的命令会打印出npm的版本信息
npm -vCopy
二、目录结构
从开发的角度来看, Electron application 本质上是一个 Node. js 应用程序。 与 Node.js 模块相同,应用的入口是 package.json
文件。 一个最基本的 Electron 应用一般来说会有如下的目录结构:
your-app/
├── package.json
├── main.js
└── index.html
为你的新Electron应用创建一个新的空文件夹,并新建上述三个文件。
三、package.json
其中package.json的文件内容如下:
{
"name": "my-app",
"version": "0.1.0",
"description": "",
"main": "main.js",
"scripts": {
"start": "electron ."
},
"author": "",
"license": "ISC"
}
Tips:使用
npm init
命令可以便捷创建package.json
。
四、安装Electron
在终端进入到工程文件夹下进行操作,会在当前目录下安装Electron。
# 局部安装 需要的话追加上 --registry='http://registry.npm.taobao.org' 使用淘宝npm源安装
npm install electron --save-dev
# Windows使用下面语句 64位32位机器都是--win32
npm install electron --save-dev --platform=win32
# 验证安装
node_modules/.bin/electron -v
Tips:--save-dev参数会在
package.json
文件中导入该依赖到devDependencies属性下,--save参数会导入该依赖到dependencies属性下。
安装过程可能会很慢,正常的话,安装下载进度如下直至完成。
> electron@5.0.6 postinstall /home/qii/electron/eee/node_modules/electron
> node install.js
Downloading tmp-26643-1-SHASUMS256.txt-5.0.6
[============================================>] 100.0% of 4.74 kB (4.74 kB/s)
npm notice created a lockfile as package-lock.json. You should commit this file.
+ electron@5.0.6
updated 1 package and audited 201 packages in 499.235s
found 0 vulnerabilities
Tips:npm安装超时的话一般是网络问题。解决方法
五、main.js
package.json中指定的入口点文件,即程序主文件。
const {app, BrowserWindow} = require('electron')
let mainWindow
// 创建主窗口,设置了宽高等信息
function createWindow () {
mainWindow = new BrowserWindow({
width: 1000,
height: 600,
webPreferences: {
// node集成,即是否注入node能力
nodeIntegration: true
}
})
// 加载主页面内容 index.html
mainWindow.loadFile('index.html')
mainWindow.on('closed', function () {
mainWindow = null
})
}
app.on('ready', createWindow)
六、index.html
main.js中加载的主窗口文件,即主布局文件
<!DOCTYPE html>
<html>
<head>
<!-- 此title会覆盖package.json中设置的name,作为应用顶部名称 -->
<title>my-app</title>
</head>
<body>
Hello World!
</body>
</html>
七、启动应用
在创建并初始化完成 main.js
、 index.html
和package.json
之后,您就可以在当前工程的根目录执行下述命令来启动刚刚编写好的Electron程序了。
# 进入到包含 package.json 文件的目录
npm satrt
# 或者直接使用脚本启动,别忽略了后面的点
node_modules/.bin/electron .
八、打包应用
以上所述都是在本地开发环境下使用,但如果要给被人使用,就必须得将Electron打包成一个程序包。幸运的是我们可以通过electron-builder将程序打包成Win、Linux、Mac平台都兼容的版本,交给别人之后直接安装即可。
1、安装electron-builder
npm install --save-dev electron-builder
# 验证安装
node_modules/.bin/electron-builder -h
2、开始打包
注意生成各自平台的程序包最好在对应平台上执行,否则可能打包失败
# Linux打包成AppImage文件(在Linux环境上执行)
node_modules/.bin/electron-builder -l AppImage
# Windows打包成exe安装文件(在Windows环境下执行)
node_modules/.bin/electron-builder -w nsis
# 如果在非Windows上打包win程序,也可以借助docker 如下
# docker run --rm -it -v ${PWD}:/project electronuserland/builder:wine sh -c "node_modules/.bin/electron-builder -w nsis"
# Mac打包成dmg文件(在Mac环境下执行)
node_modules/.bin/electron-builder -m dmg
3、最终文件
打包好的程序在当前目录dist
文件夹下,如图所示:
- Linux生成
my-app 0.1.0.AppImage
文件,双击执行或者./my-app 0.1.0.AppImage
执行即可。 - Windows生成
my-app 0.1.0.exe
文件,双击安装即可。 - Mac生成
my-app 0.1.0.dmg
,双击拖拽安装即可。
4、利用配置文件打包
上面的方法相当于临时打包,每次运行命令的时候都要指定打包命令,虽然很直接,但是有点不太方便,下面用另一种方法来打包,将打包配置写到package.json中 ,方便使用。
打开package.json文件,发现前面的 devDependencies 属性下已经多出了 electron 和 electron-builder 依赖,我们将与打包相关的配置信息全部写在build属性下,再添加脚本命令"dist": "electron-builder"
。
{
"name": "my-app",
"version": "0.1.0",
"description": "",
"main": "main.js",
"scripts": {
"start": "electron .",
"dist": "electron-builder"
},
"author": "",
"license": "CC0-1.0",
"devDependencies": {
"electron": "^6.0.12",
"electron-builder": "^21.2.0"
},
"build": {
"win": {
"icon": "icon.png",
"target": [
"nsis"
]
},
"nsis": {
"allowToChangeInstallationDirectory": true,
"oneClick": false,
"menuCategory": true,
"allowElevation": false
},
"linux": {
"icon": "icon.png",
"category": "Utility",
"target": [
"AppImage"
]
},
"mac": {
"icon": "icon.png",
"type": "development",
"category": "public.app-category.developer-tools",
"target": [
"dmg"
]
}
}
}
运行命令:
npm run dist
九、进阶之路
Electron给我的认识是使用HTML文件渲染页面组件、使用CSS渲染页面组件的样式,使用JavaScript编写程序的逻辑,且支持Node以及DOM的API。
我在学习Electron的时候,写了一个本地音乐播放器的小项目,在这个项目中涉及了主进程与渲染进程如何通信,如何使用CSS样式,如何使用electron-store本地存储。
项目的地址:https://github.com/yueshutong/SimpleMusicPlayer 欢迎Star!
关于Electron的进阶学习,我推荐下面几个学习网站:
posted on 2019-10-25 16:49 qq575654643 阅读(607) 评论(0) 编辑 收藏 举报