【Electron】第一个用 Electron 开发的桌面应用程序

Chase620 等级 368 0 0

2020 年注定是不平凡的一年,全国人民饱受疫情的困扰。好在目前已经抗疫已经取得关键性的成功。自己也好很久没有更新自己的博客。中年危机下,博主也在寻找自己的方向。坚信方向比努力更重要。

这不,最近突然想开发一款至力于服务 PHP 开发者的工具。这款工具呢也是目前我经常会用到的一些功能。比如,JSON 美化、MD5 加密、正则、URL 重写、HOSTS 管理、经典案例剖析等。还会提供一个配置多端同步。比如,我们在公司电脑设置的 HOSTS,希望在家的电脑也能同步使用。并且这一系列的功能都能加密存储在云端服务器。避免信息的泄漏。

这样一款开发者工具,博主通过观察了一些开源免费的类似软件(功能不全),发现使用 Electron 这个 nodejs 库来开发的频率很高。所以,本系列教程将以 Electron 进行讲解。

Electron 系列教程如果没有特别说明,全部以 Windows 环境进行讲解。

第一步:安装 nodejs

这个具体就不说了。反正去 nodejs 官网(https://nodejs.org/)下载一个最新版本的安装即可。安装相当简单,实现觉得不知道怎么安装请自行网络搜索,这方面的资料繁多。

安装完成之后,请在命令提示符下验证是否安装成功:

C:\Users\MLoong>node -v
v12.16.1

C:\Users\MLoong>npm -v
6.13.4 

以上就证明您的环境已经正确安装了。

第二步:安装 electron

前面我们有提到 electron 是 nodejs 的一个类库。所以,安装 electron 类库的方式就是使用 npm 命令来安装。npm 对于一些不玩前端的朋友来说可能比较陌生。这是 nodejs 提供的一个类库管理工具。如果您是一个 PHPer 的话,这个 npm 等同于 PHP 的 Composer。

C:\Users\MLoong>npm install --save-dev electron
...... 

通过以上命令就能自动安装 electron 类库了。

第三步:选择一个开发工具

编程肯定离不开编程工具。博主推荐目前免费又功能强大的 VSCode IDE。下载地址:https://code.visualstudio.com/

第四步:一个 demo 示例

1)初始化项目

我们创建一个文件夹,然后进行文件夹执行如下命令:

> npm init 

为了避免意料之外的事情发生。请务必保证项目的整个目录路径只有英文出现。

通过上面的命令执行之后,会得到如下信息:

{
  "name": "electest",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
} 

我们对它进行小修改,以支持 electron。

1.1) scripts 更改为如下:
"scripts": {
    "start": "electron ."
  } 
1.2) 增加如下:
"devDependencies": {
    "electron": "^8.2.0"
  } 

这个的意思是说您的项目依赖的 electron 版本大于 8.2.0 。最好设置为您当前安装的 electron 版本。

怎样获取您当前安装的 electron 版本呢?

> npm view electron version 

更改之后的结果如下:

{
  "name": "smallapp",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "electron ."
  },
  "author": "fingerQin",
  "license": "ISC",
  "devDependencies": {
    "electron": "^8.2.0"
  }
} 

关于这个 package.json 的每项属性的说明请自行网络查询。这方面的资料实在不要太多!!!

2)添加 index.js

在 package.json 文件之中指定了入口 index.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.whenReady().then(createWindow) 

把上面的代码直接复制到其中即可。不要问为什么?博主只想让您快速进入这个美妙的世界。

3)添加 index.html

由于我们在 index.js 脚本中通过 win.loadFile 加载了 index.html 文件。所以,我们也要创建这个文件。而这个文件就是我们应用程序启动时首先要显示的界面。
同样在根目录下创建 index.html。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Hello World!</title>
    <!-- https://electronjs.org/docs/tutorial/security#csp-meta-tag -->
    <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
  </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>.
  </body>
</html> 

注:其实桌面应用程序开发完全是基于 MVC 这种方式进行的。所以,您可以把 index.js 看作是 PHP 项目中的 Controller,index.html 看作是 View。至于 Model 就是与数据交互的东西,这个示例之中并未涉及。后续我们再进行细致讲解。

启动桌面应用示例

一切准备妥当。那我们就 run 起来吧。
如果您使用的 VSCode IDE 的话。那么此时您只需要按组合键:Ctrl + `。此时会在 VSCode 底部显示一个提示提示符界面。
然后,再执行如下命令:

> npm install
> npm start 

npm install 是对您项目中依赖的 nodejs 类库进行安装。如果您没有任何更改,第二次的时候就不用再执行这个命令行了。直接 npm start 即可。

此时会弹出一个程序窗口如下:

【Electron】第一个用 Electron 开发的桌面应用程序

222.png

Electron 后续教程安排:
1)让应用显示在右下角的系统托盘。
2)制作 exe 安装包。
3)网络请求数据同步。

本文转自 https://www.jianshu.com/p/7c1685f5ee25,如有侵权,请联系删除。

收藏
评论区

相关推荐

极客手中的利器:Electron
作为一个前端开发人员,你可能已经听说过Electron(https://www.electronjs.org/)了, 你知道VS Code是基于这个技术开发的。 不但VS Code,目前一些大热的软件:飞书、Slack、skype的桌面版都是基于这个技术开发的。 即使如此,这也并不足以引起你的重视, 毕竟桌面软件式微,移动端和Web开发才是大方向
记录一次electron踩坑
Vue2.x版本 https://github.com/dmhsq/electronvuedmhsq(https://github.com/dmhsq/electronvuedmhsq) 或者 https://github.com/dmhsq/electronvue/tree/main/template(https://github.com
一文搞懂什么是HTTP与HTTPS
(https://blog.csdn.net/petterp/article/details/102779257)Http与Https的区别。 在最近的开发中,深感网络相关基础知识薄弱,于是趁周末好好总结一
20 张图彻底弄懂 HTTPS 的原理
前言 近年来各大公司对信息安全传输越来越重视,也逐步把网站升级到 HTTPS 了,那么大家知道 HTTPS 的原理是怎样的吗,到底是它是如何确保信息安全传输的?网上挺多介绍 HTTPS,但我发现总是或多或少有些点有些遗漏,没有讲全,今天试图由浅入深地把 HTTPS 讲明白,相信大家看完一定能掌握 HTTPS 的原理,本文大纲如下: HTTP 为什么不安全
【Electron】electron-vue 借助 element-ui UI 库助力桌面应用开发
前面文章我们讲过 electron 让可以用 HTML、JS、CSS 开发桌面应用程序。而 electronvue 是一个结合了 electron 与 vue 的套件。这样我们就能方便地使用 vue 快速开发桌面应用。但是,vue 只是在 js 这层面做了大量的便捷的操作。对 UI 并未过多涉及。此时如果您在开发过程中自己实现一套统一主题的 UI 视觉效果
GO开发 - etcd用法
etcd是什么? A highlyavailable key value store for shared configuration and service discovery.是一个键值存储仓库,用于配置共享和服务发现 概念:高可用的分布式ke
【Electron】第一个用 Electron 开发的桌面应用程序
2020 年注定是不平凡的一年,全国人民饱受疫情的困扰。好在目前已经抗疫已经取得关键性的成功。自己也好很久没有更新自己的博客。中年危机下,博主也在寻找自己的方向。坚信方向比努力更重要。这不,最近突然想开发一款至力于服务 PHP 开发者的工具。这款工具呢也是目前我经常会用到的一些功能。比如,JSON 美化、MD5 加密、正则、URL 重写、HOSTS 管理、经
11个基于vue的UI框架_U.R.M.L
Element UI 来自中国,由与 Mint UI 相同的开发者所创建。Element UI 是用于 Web 和桌面应用程序的桌面 UI 工具包,如果你需要开发 Electron 应用,这个库会是你的理想之选。 iView 是一个 UI 工具包,其中包含简洁又设计优雅的小部件和各种组件。iView 团队维护非常及时,最近一次的更新在19年3
Java 实现聊天轰炸器,QQ,微信通用
Java 实现聊天轰炸器 我们需要用到一个类: Robot 类 原理就是,用 Robot 中的方法模拟按下 ctrl+v,然后按回车发送 注意:按下之后一定要松开 运行程序之前,先把要发送的内容剪切到粘贴板 大家重点在学习,不要有恶意行为 (要是你女朋友让你说一万遍“我爱你”,用它搞定( ̄ ̄))javaimport java.awt.;import jav
(win环境)使用Electron打造一个桌面应用翻译小工具
初始化项目npm init 修改package.json "name": "trans", "version": "1.0.0", "main": "main.js", "license": "MIT", "scripts": "start": "electron .", "build":"electronpackager . ove
https://cloud.tencent.com/developer/article/write/1830331
一、目标今天的目标是这个sign和appcode 二、步骤 Jadx没法上了app加了某梆的企业版,Jadx表示无能为力了。 FRIDADEXDumpDexDump出来,木有找到有效的信息。 Wallbreaker葫芦娃的Wallbreaker可以做些带壳分析,不过这个样本,用Frida的Spawn模式可以载入,Attach模式会失败。而直接用Objecti
electron:桌面应用程序的革命
“ 你也许不了解electron,但你应该了解或使用过atom、vscode、xmin zend,没错他们所使用的开发技术就是electon,通过前端技术开发桌面应用程序,刚开始接触electron时,考虑最多的是性能问题,不过作为一个vscode、xmin zen重度使用者的我来说,基本上对其性能的担心减少了很多,并且发现了基于vue框架构造electro
从零使用electron搭建桌面端可视化编辑器
之前有朋友希望我基于H5Dooring开发一款桌面端应用, 最近刚好有时间, 就花了小半天时间从零使用electron开发了桌面端的离线软件Dooringelectron. 因为之前用electron比较少, 今天刚好学了一下, 也基本把前后端打通了, 文末我会放dooringelectron的github地址供大家参考学习. 如果大家有更好的方案, 可以随
JAVA回调机制(CallBack)之小红是怎样买到房子的??
JAVA回调机制CallBack 序言最近学习java,接触到了回调机制(CallBack)。初识时感觉比较混乱,而且在网上搜索到的相关的讲解,要么一言带过,要么说的比较单纯的像是给CallBack做了一个定义。当然了,我在理解了回调之后,再去看网上的各种讲解,确实没什么问题。但是,对于初学的我来说,缺了一个循序渐进的过程。此处,将我对回调机制的个人理解,按
项目中的富文本编辑器该如何选择?
项目中经常需要用到富文本编辑器的时候,而常见的富文本编辑器都有哪些?该如何选择?先看看市面上都有哪些可用的富文本编辑器: (插件式的,支持 Vue,React,Angular 框架) (Typescript 开发的 Web 富文本编辑器, 轻量、简洁、易用、开源免费,支持 JS 直接引入使用,或者 Vue2/3,React) (开源,插件多,功能齐全,支持