Electron开发跨平台桌面程序入门教程

Stella981
• 阅读 638

最近一直在学习 Electron 开发桌面应用程序,在尝试了 java swing 和 FXjava 后,感叹还是 Electron 开发桌面应用上手最快。我会在这一篇文章中实现一个HelloWord的应用程序,记录学习过程中的坑。

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位机器都是--win32npm 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.jsDownloading 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.6updated 1 package and audited 201 packages in 499.235sfound 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.jsindex.htmlpackage.json之后,您就可以在当前工程的根目录执行下述命令来启动刚刚编写好的Electron程序了。

# 进入到包含 package.json 文件的目录npm satrt# 或者直接使用脚本启动,别忽略了后面的点node_modules/.bin/electron .

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,双击拖拽安装即可。

Electron开发跨平台桌面程序入门教程

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/ystcode/SimpleMusicPlayer 欢迎Star!

Electron开发跨平台桌面程序入门教程

关于Electron的进阶学习,我推荐下面几个学习网站:

Electron官方开发文档:开发Electron必须打开的网页。

electron.build官方配置文档:开发完最后参考的配置文档。

electron-store本地文件存储:这个挺简单的,用的时候看下。

icns、ico图标生成指南:打包的时候自定义图标,icns是mac专属的图标格式,ico是window的格式。

Web开发者指南-MDN文档:写JavaScript必备的API文档神器,可惜中文支持太差。

fontawesome字体图标库:丰富你的界面样式,优秀的图标库。

Electron 打包优化:腾讯的前端技术文档,有些文章写的不错。


作者:薛勤,互联网从业者,编程爱好者。

本文首发自公众号:代码艺术(ID: onblog)未经许可,禁止转载

Electron开发跨平台桌面程序入门教程

本文分享自微信公众号 - 代码艺术(onblog)。
如有侵权,请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”,欢迎正在阅读的你也加入,一起分享。

点赞
收藏
评论区
推荐文章
浅梦一笑 浅梦一笑
4个月前
初学 Python 需要安装哪些软件?超级实用,小白必看!
编程这个东西是真的奇妙。对于懂得的人来说,会觉得这个工具是多么的好用、有趣,而对于小白来说,就如同大山一样。其实这个都可以理解,大家都是这样过来的。那么接下来就说一下python相关的东西吧,并说一下我对编程的理解。本人也是小白一名,如有不对的地方,还请各位大神指出01名词解释:如果在编程方面接触的比较少,那么对于软件这一块,有几个名词一定要了解,比如开发环
技术小男生 技术小男生
4个月前
linux环境jdk环境变量配置
1:编辑系统配置文件vi/etc/profile2:按字母键i进入编辑模式,在最底部添加内容:JAVAHOME/opt/jdk1.8.0152CLASSPATH.:$JAVAHOME/lib/dt.jar:$JAVAHOME/lib/tools.jarPATH$JAVAHOME/bin:$PATH3:生效配置
光头强的博客 光头强的博客
4个月前
Java面向对象试题
1、请创建一个Animal动物类,要求有方法eat()方法,方法输出一条语句“吃东西”。创建一个接口A,接口里有一个抽象方法fly()。创建一个Bird类继承Animal类并实现接口A里的方法输出一条有语句“鸟儿飞翔”,重写eat()方法输出一条语句“鸟儿吃虫”。在Test类中向上转型创建b对象,调用eat方法。然后向下转型调用eat()方
刚刚好 刚刚好
4个月前
css问题
1、在IOS中图片不显示(给图片加了圆角或者img没有父级)<div<imgsrc""/</divdiv{width:20px;height:20px;borderradius:20px;overflow:h
blmius blmius
1年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
小森森 小森森
4个月前
校园表白墙微信小程序V1.0 SayLove -基于微信云开发-一键快速搭建,开箱即用
后续会继续更新,敬请期待2.0全新版本欢迎添加左边的微信一起探讨!项目地址:(https://www.aliyun.com/activity/daily/bestoffer?userCodesskuuw5n)\2.Bug修复更新日历2.情侣脸功能大家不要使用了,现在阿里云的接口已经要收费了(土豪请随意),\\和注意
晴空闲云 晴空闲云
4个月前
css中box-sizing解放盒子实际宽高计算
我们知道传统的盒子模型,如果增加内边距padding和边框border,那么会撑大整个盒子,造成盒子的宽度不好计算,在实务中特别不方便。boxsizing可以设置盒模型的方式,可以很好的设置固定宽高的盒模型。盒子宽高计算假如我们设置如下盒子:宽度和高度均为200px,那么这会这个盒子实际的宽高就都是200px。但是当我们设置这个盒子的边框和内间距的时候,那
艾木酱 艾木酱
3个月前
快速入门|使用MemFire Cloud构建React Native应用程序
MemFireCloud是一款提供云数据库,用户可以创建云数据库,并对数据库进行管理,还可以对数据库进行备份操作。它还提供后端即服务,用户可以在1分钟内新建一个应用,使用自动生成的API和SDK,访问云数据库、对象存储、用户认证与授权等功能,可专
helloworld_34035044 helloworld_34035044
7个月前
皕杰报表之UUID
​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid()或uuid(sep)参数说明:sep布尔值,生成的uuid中是否包含分隔符'',缺省为
helloworld_28799839 helloworld_28799839
4个月前
常用知识整理
Javascript判断对象是否为空jsObject.keys(myObject).length0经常使用的三元运算我们经常遇到处理表格列状态字段如status的时候可以用到vue