续加仪
搜索
首页
发现
相册
安排
心情
留言
更多
登录

前端技术的迅猛发展，在任何开发领域都前端技术的一席之地。移动端不用多数，已经有很多移动端的同学开始学习前端技术了，那如何用前端技术开发桌面应用？Electron就是一个不错的选择。

这篇文章就会讲解如何使用Electron开发桌面应用系统。通过这篇文章和视频的学习，你可以完全达到Electron开发程序员的标准，并掌握80%以上的技术，可以说这是一个非常不错的入门教程。

视频适合于前端程序员学习，视频会有浅入深逐步讲解。希望小伙伴们会喜欢！

01：Electron简介和教程介绍

Electron是什么？

你只要记住下面这两句话就可以对Electron有个基本了解：

  • Electron 是由 Github开发的开源框架
  • 它允许开发者使用Web技术构建跨平台的桌面应用

Electron = Chromium + Node.js + Native API

  • Chromium : 为Electron提供了强大的UI能力，可以不考虑兼容性的情况下，利用强大的Web生态来开发界面。

  • Node.js ：让Electron有了底层的操作能力，比如文件的读写，甚至是集成C++等等操作，并可以使用大量开源的npm包来完成开发需求。

  • Native API ： Native API让Electron有了跨平台和桌面端的原生能力，比如说它有统一的原生界面，窗口、托盘这些。

通过三者的巧妙组合，我们开发应用变的十分高效。

什么时候使用Electron

公司没有专门的桌面应用开发者，而需要前端兼顾来进行开发时，用Electron就是一个不错的选择。
一个应用同时开发Web端和桌面端的时候，那使用Electron来进行开发就对了。
开发一些效率工具，比如说我们的VSCode，比如说一些API类的工具，用Electron都是不错的选择。
有哪些著名应用是用Electron开发的

  • VSCode ： 程序员最常用的开发者工具。
  • Atom : 是Github开发的文本编辑器，我想大部分的前端程序员都应该使用过。
  • slack ： 聊天群组 + 大规模工具集成 + 文件整合 + 搜索的一个工具。就是把很多你常用的工具整合到了一起。
  • wordPress ： 基于PHP开发的Blog搭建工具，新版本使用了Electron.

02：Electron开发环境的搭建

要想使用Electron进行开发，需要搭建一些环境。这节课请动手跟着作。

Windows下安装Node.js

如果你是前端，安装Node应该是信手拈来，非常熟悉了，但是为了防止有小伙伴还不会安装这个，我简单的介绍一下.

Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。什么事情驱动、非阻塞式I/O，适合高并发应用使用。

Windows下安装也是非常简单，直接到官网去下载。

官网地址：https://nodejs.org/zh-cn/

然后点击下载，选择长期支持版本，我这时的版本是12.14.1.

长期支持版本：就是已经文档了，并且会一直维护下去的版本，比如有个小Bug啥的，官方会马上进行修复。
最新版本： 有很多功能，但是也会同时存在很多Bug或者说坑，如果你是个人学习，完全可以使用最新发布版，但是如果是公司，你还是尽量使用长期支持版本。
点击下载后，安装过程和安装QQ基本一样，下一步、下一步，我就不作过多的介绍了。实在不会，你百度一下，有很多文章会教你如何安装Node。

安装后，可以使用下面两个命令进行检测，如果可以梳理出现邦本，说明你安装成功了。

npm -v
node -v

如果成功会出现当前的版本，最好使用v10以上版本。

安装Electron

在你喜欢的盘符下，建立一个文件夹，这个文件可以是任何名字。然后用VSCode进行打开。打开终端，直接在终端中输入安装命令：

npm install electron --save-dev

然后就是耐心的等待，这个等待时间还是比较长的，等待全部完成后，可以使用下面两个命令进行检验。

npx electron -v
./node_modules/.bin/electron -v

如果安装成功，这两个命令都可以出现版本，我讲课时的版本是v7.1.11。

如果你还不放心，你可以直接在命令行启动一下Electron，如果能顺利启动，并出现这个图，说明你安装成功了。

//启动命令
./node_modules/.bin/electron
ElectronUI

防坑指南

安装时你很坑会很慢或者根本无法安装成功，这些都是国内网络限制的问题，你可以用科学上网的方法解决（不作讲解，自己百度吧），如果你不想花点小钱，你可以使用淘宝的镜像源来解决。

如果你是一名程序员，我还是建议你解决科学上网的问题，这样你能看到更广阔的天空，作程序是没办法绕开这个的。

这节课的内容就到这里，下节课我们就可以开始编写Electron的代码了。

03：Electron第一个Hello world程序

目前已经搭建好了Electron的开发环境，那这篇文章就写一个Electron最简单的Hello World，这也是每个学习开写的第一个程序。当然也有下伙伴说把Electron安装到项目中太麻烦了，可不可以安装到全局变量，那答案是肯定的。

全局安装Electron

npm install -g electron

这个如果安装失败，你可以多安装两遍，你也可以使用cnpm来进行安装。安装后确实可以使用起来方便一点。

新建index.html文件
新建一个文件夹，比如叫ElectronDemo01.

在项目的根目录中新建一个index.html文件，然后编写如下的代码(可以用快速生成的方式来写这段代码)。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    Hello World!
</body>
</html>
javascript

新建main.js文件
在根目录下新建一个main.js文件，这个就是Electron的主进程文件。

var electron = require('electron')  //引入electron模块

var app = electron.app   // 创建electron引用

var BrowserWindow = electron.BrowserWindow;  //创建窗口引用

var mainWindow = null ;  //声明要打开的主窗口
app.on('ready',()=>{
    mainWindow = new BrowserWindow({width:400,height:400})   //设置打开的窗口大小

    mainWindow.loadFile('index.html')  //加载那个页面

    //监听关闭事件，把主窗口设置为null
    mainWindow.on('closed',()=>{
        mainWindow = null
    })

})
javascript

创建package.json文件
写完后直接使用npm init --yes来初始化package.json文件，文件生成后如下：

{
  "name": "ElectronDemo1",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}
json

这时候main的值为main.js就正确了。这时候你就可以打开终端，在终端里输入electron .就可以打开窗口了。

这节课就先到这里，希望小伙伴们可以练习一下，跟着技术胖写一个Hello World的程序出来吧。

04：Electron 编写读文件程序

上节课写了一个最简单的Hello World程序,我用去KTV的例子,简单讲述了一下程序的逻辑,这篇文章我们就用生硬的或者说专业的语言的界目讲解一下什么是Electron的主进程和渲染进程.在了解他们前,先来了解一下Electron的运行流程.(特别声明,本节的内容枯燥无比并很难理解,但是作为一个Electron的初学者,必须要进行学习,否则会给你以后的学习埋下很多坑)

Electron的运行流程
electron

1.读取package.json的中的入口文件,这里我们是main.js
2.main.js 主进程中创建渲染进程
3.读取应用页面的布局和样式
4.使用IPC在主进程执行任务并获取信息
也许你现在还不能理解这个流程,但是你需要记住这个流程,只有我们记住这个流程后,在以后程序出现问题时,才可以很快的定位问题.

Electron的主进程和渲染进程
我们可以理解package.json中定义的入口文件就是主进程,那一般一个程序只有一个主进程,而我们可以利用一个主进程,打开多个子窗口.

由于 Electron 使用了 Chromium 来展示 web 页面，所以 Chromium 的多进程架构也被使用到。 每个 Electron 中的 web 页面运行在它自己的渲染进程中,也就是我们说的渲染进程.

也就是说主进程控制渲染进程,一个主进程可以控制多个渲染进程.

electron流程图

如果你实在不理解,也没关系,你可以简单的把main.js看成主进程,我们写的html部分看成渲染进程.虽然这样不太严谨,但是方便我们记忆,我们目的是学会使用Electron,而不是成为Electron的专家.

简单示例-读取名称
在我们了解主进程和渲染进程后,我们来作一个读取名称案例.现在项目根目录下建立一个xiaojiejie.txt的文件,然后写入几个小姐姐的名字.

代码如下:

1.张三
2.李四
3.王五
有了这个文件,我们修改一下main.js文件,因为我们要使用node里的fs模块,所以在设置窗口时,增加全量使用node.js.

var electron = require('electron') 

var app = electron.app   

var BrowserWindow = electron.BrowserWindow;

var mainWindow = null ;
app.on('ready',()=>{
    mainWindow = new BrowserWindow({
        width:500,
        height:500,
        webPreferences:{ nodeIntegration:true}
    })

    mainWindow.loadFile('index.html')

    mainWindow.on('closed',()=>{
        mainWindow = null
    })

})
javascript

修改完主进程,然后我们到index.html里边写一下界面.这里我们写了一个按钮,然后在按钮下方加一个<div>,这个DIV用来作读取过来内容的容器.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, idivnitial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <Button id="btn">进来</Button><br/>
    <div  id="mybaby"></div>


</body>
</html>
javascript

有了界面之后,我们可以单独新建一个renderer文件夹,一般约定俗成都会起这个名字.注意起这个名字意思是渲染进程中的操作. 文件夹建立完成后,在文件里新建index.js文件,然后再index.html页面里先进行引入.

<script src="renderer/index.js"></script>
javascript

然后编写index.js里的代码,代码如下,具体含义我会在视频中进行讲解.


var fs = require('fs'); 
window.onload = function(){
    var btn = this.document.querySelector('#btn')
    var mybaby = this.document.querySelector('#mybaby')
    btn.onclick = function(){
        fs.readFile('xiaojiejie.txt',(err,data)=>{
            mybaby.innerHTML = data
        })
    }
} 
javascript

写完这些,就可以在中台使用electron . 命令,跳出我们的界面,点击按钮,就可以看到我们的小姐姐进入了界面中.

05：Electron Remote模块的使用

当我们知道了Electron有主进程和渲染进程后，我们还要知道一件事，就是Electron的API方法和模块也是分为可以在主进程和渲染进程中使用。那如果我们想在渲染进程中使用主进程中的模块方法时，可以使用Electron Remote解决在渲染和主进程间的通讯。这节我们就实现一个通过Web中的按钮打开新窗口。

渲染进程中打开新窗口
那我们话不多说，直接按照上节课的程序进行改写,在项目根目录下，新建一个demo2.html文件，然后快速生成html的基本结构，编写一个按钮，引入渲染的js页面。代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <Button id="btn">打开新的窗口</Button><br/>
    <script src="renderer/demo2.js"></script>
</body>
</html>
html

在render文件夹下，新建一个demo2.js文件，然后编写如下代码。

 const btn = this.document.querySelector('#btn')
 const BrowserWindow =require('electron').remote.BrowserWindow

window.onload = function(){
    btn.onclick = ()=>{

         newWin = new BrowserWindow({
             width:500,
             height:500,
         })
         newWin.loadFile('yellow.html')
         newWin.on('close',()=>{win=null})

     }
}
javascript

这时候还没有yellow.html，在项目根目录下建立页面，然后写入下面的代码。

 const btn = this.document.querySelector('#btn')
 const BrowserWindow =require('electron').remote.BrowserWindow

window.onload = function(){
    btn.onclick = ()=>{

         newWin = new BrowserWindow({
             width:500,
             height:500,
         })
         newWin.loadFile('yellow.html')
         newWin.on('close',()=>{win=null})

     }
}
javascript

然后我们在终端中运行electron .,如果一切正常，就可以顺利打开一个新的窗口，这个窗口可以顺利打开主要的功劳就是electron remote。它让我们有了很多pc端的原生能力，剩下的功能会在后续课程中继续讲解。小伙伴可以先把这节课的效果做出来。

06：Electron 创建菜单和基本使用

每一个桌面应用都会有一个窗口，这个视频就学习一下在Electron中使用Menu来完成菜单的创建。话不多说，直接动手操作。

编写菜单模板
在Electron中编写菜单，需要先建立一个模板，这个目标很类似我们JSON或者类的数组。

我们打开项目，在项目的根目录下新建一个文件夹main，意思是主进程中用到的代码我们都写到这里。

然后新建一个menu.js文件,然后编写如下代码。

const { Menu } = require('electron')

var template = [
    {
        label:'home',
        submenu:[
            {label:'index'},
            {label:'test'}
        ]

    },
    {
        label:'about',
        submenu:[
            {label:'about'},
            {label:'help'}
        ]
    }
]

var m = Menu.buildFromTemplate(template)

Menu.setApplicationMenu(m)
javascript

然后再打开主进程main.js文件，在ready生命周期中，直接加入下面的代码，就可以实现自定义菜单了。

 require('./main/menu.js')
javascript

需要注意的是，Menu属于是主线程下的模块，所以只能在主线程中使用，这个要记清楚。

使用菜单打开新窗口
有了菜单之后，可以在菜单中加入click事件，代码如下:

const { Menu ,BrowserWindow} = require('electron')


var template = [
    {
        label:'home',
        submenu:[
            {
                label:'index',
                //主要代码--------------start
                click:()=>{
                    win = new BrowserWindow({
                        width:500,
                        height:500,
                        webPreferences:{ nodeIntegration:true}
                    })
                    win.loadFile('index.html')
                    win.on('closed',()=>{
                        win = null
                    })

                }
                //主要代码----------------end
            },
            {label:'test'}
        ]

    },
    {
        label:'about',
        submenu:[
            {label:'about'},
            {label:'help'}
        ]
    }
]

var m = Menu.buildFromTemplate(template)

Menu.setApplicationMenu(m)
javascript

这时候我们打开终端输入electron .之后，就可以看到效果了，当然我们还可以绑定快捷键，基于录制时间问题，我们下一个视频再讲解。这个视频先动手作出来吧。

07：Electron 制作右键菜单

上节课讲解了如何设置顶部菜单，我们也作了一个菜单的小案例，但是由于时间关系，没有讲解如何绑定快捷键。这节我们会进行讲解，并且讲述一下如何实现右键功能。

菜单快捷键绑定
绑定快捷键的属性是accelerator属性，比如我们新打开一个窗口，我们就的代码可以写成这样。

accelerator:`ctrl+n`
json

全部代码如下：

const { Menu ,BrowserWindow} = require('electron')
var template = [
    {
        label:'home',
        submenu:[
            {
                label:'index',
                accelerator:`ctrl+n`,
                click:()=>{
                    win = new BrowserWindow({
                        width:500,
                        height:500,
                        webPreferences:{ nodeIntegration:true}
                    })
                    win.loadFile('index.html')
                    win.on('closed',()=>{
                        win = null
                    })

                }
            },
            {label:'test'}
        ]

    },
    {
        label:'about',
        submenu:[
            {label:'about'},
            {label:'help'}
        ]
    }
]
var m = Menu.buildFromTemplate(template)
Menu.setApplicationMenu(m)
javascript

写完代码后，在终端中输入electron . 运行程序，再用快捷键ctrl+n就可以新建一个页面了。这就实现了新建页面的方法。

创建右键菜单
右键菜单的响应事件是写在渲染进程中的，也就是写在index.html中的，所以要是使用，就用到到remote模块进行操作了。

先来看看右键的相应事件，我们打开render文件夹，然后打开demo2.js文件，编写一个右键菜单的监听事件，代码如下：

window.addEventListener('contextmenu',function(){
    alert(111);
})
javascript

当我们要使用Menu模块,它是主线中的模块，如果想在渲染线程中使用，就必须使用remote。代码如下：

const { remote} = require('electron')

var rigthTemplate = [
    {label:'粘贴'},
    {label:'复制'}
]

var m = remote.Menu.buildFromTemplate(rigthTemplate)



window.addEventListener('contextmenu',function(e){

    //阻止当前窗口默认事件
    e.preventDefault();
    //把菜单模板添加到右键菜单
    m.popup({window:remote.getCurrentWindow()})

})
javascript

现在就可以有右键菜单了，我们可以在终端中输入electron .打开程序进行测试。

程序打开调试模式
由于我们已经定义了顶部菜单，没有了打开调试模式的菜单了，这时候可以使用程序来进行打开。在主进程中加入这句代码就可以了。

mainWindow.webContents.openDevTools()
javascript

全部代码如下:

var electron = require('electron') 

var app = electron.app   

var BrowserWindow = electron.BrowserWindow;

var mainWindow = null ;
app.on('ready',()=>{
    mainWindow = new BrowserWindow({
        width:500,
        height:500,
        webPreferences:{ nodeIntegration:true}
    })
    mainWindow.webContents.openDevTools()

    require('./main/menu.js')

    mainWindow.loadFile('demo2.html')

    mainWindow.on('closed',()=>{
        mainWindow = null
    })

})
javascript

这样就实现了打开窗口，直接进入调试模式，极大的提高了调试效率。这节课的内容就到这里吧，下节课我们继续学习Electron。

08：Electron 中通过链接打开浏览器

在渲染进程中默认加入一个<a>标签，进行跳转默认是直接在窗口中打开，而不是在浏览器中打开的，如果我们想在默认浏览器中打开，要如何操作那?这节课讲一下如何使用electron shell在浏览器中打开链接。

默认案例演示
我们先来看一下，在electron 中默认打开一个链接是什么样的，在项目根目录，新建一个demo2.html文件，编写一个<a>标签，代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>
        <a href="https://www.hyz.cool">续加仪的博客</a>
    </h1>
</body>
</html>
html

这时候我们运行程序，点击链接以后，可以看到是在窗口中直接打开的，而不是在浏览器中打开。我们现在要作的就是在浏览器中打开。

使用Shell在浏览器中打开
如果想使用浏览器打开，我们可以直接在<a>标签中加入id,代码如下:

<a id="aHref" href="https://www.hyz.cool">续加仪的博客</a>
javascript

然后在render文件夹下，新建一个demo3.js文件，先在文件首页中引入shell,然后编写响应事件click。

var { shell } = require('electron')

var aHref = document.querySelector('#aHref') 

aHref.onclick = function(e){
    e.preventDefault()
    var href = this.getAttribute('href')
    shell.openExternal(href)
}
javascript

编写完成，要记得在html中引入demo3.js文件。

<script src="./renderer/demo3.js"></script>
javascript

这里给出demo3.html全部代码，方便你的学习。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>
        <a id="aHref" href="https://jspang.com">续加仪的博客</a>
    </h1>
    <script src="./renderer/demo3.js"></script>
</body>
</html>
html

这节课就先到这里，内容不多，希望动手练习一下。

09：Electron 中嵌入网页和打开子窗口

上节课我们学了如何在浏览器中打开网页，这节我们学习一下如何用BrowserView来嵌入一个网页到我们应用中，这很类似Web中的<iframe>标签。需要注意的是BrowserView是主进程中的类，所以只能在主进程中使用。

在主进程中用BrowserView嵌入网页
打开根目录下打开main.js,直接引入并使用BrowserView就可以实现键入网页到应用中。

var BrowserView = electron.BrowserView //引入BrowserView
var view = new BrowserView()   //new出对象
mainWindow.setBrowserView(view)   // 在主窗口中设置view可用
view.setBounds({x:0,y:100,width:1200, height:800})  //定义view的具体样式和位置
view.webContents.loadURL('https://jspang.com')  //wiew载入的页面
javascript

这个使用起来非常简单，写完上面的代码，就可以在终端中输入一下electron .，运行程序，测试一下效果了。

用window.open打开子窗口
我们以前使用过BrowserWindow,这个是有区别的，我们通常把window.open打开的窗口叫做子窗口。 在demo3.html中，加入一个按钮，代码如下：

 <button id="mybtn" >打开子窗口</button> 
然后打开demo3.js,先获取button的DOM节点，然后监听onclick事件，代码如下：

var mybtn = document.querySelector('#mybtn')

mybtn.onclick = function(e){

    window.open('https://jspang.com')
}
javascript

这样就完成了子窗口的打开。这节课的内容也不多，就是讲解一些经常使用api，我们下节课接续讲解。

10：Electron Window.open子窗口和父窗口间的通信

上节课在视频最后，学习了用window.open打开了子窗口，这节课学习一下父子窗口如何通信。

window.opener.postMessage 子窗口向父窗口传递消息
window.opener.postMessage(message,targetOrigin),是将消息发送给指定来源的父窗口，如果未指定来源则发送给*，即所有窗口。
javascript
  • message : 传递的消息，是String类型的值
  • targetOrigin : 指定发送的窗口
    在传递消息时，你需要在子窗口的页面中设置一些内容，所以我们不能使用远程的页面，而需要自己建立一个。在项目根目录，建立一个popup_page.html文件。 代码如下(详细解释在视频中讲解):
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h2>我是弹出子窗口</h2>
    <button id="popBtn">向窗口传递信息</button>
</body>
<script>
    var popBtn = this.document.querySelector('#popBtn')
    popBtn.onclick = function(e){
        window.opener.postMessage('我是子窗口的消息')
    }
</script>
</html>
html

这样就可以从子窗口向父窗口发送信息了。

window.addEventListener父窗口接收信息
先打开demo3.html,在代码最下面，加一个<div>标签，记得要给一个ID，这样就用JS控制这个层了。

<div id="mytext"></div>
html

父窗口接收信息需要通过window.addEventListener,例如现在我们打开demo3.js，也就是父窗口的JS代码部分，写入下面代码：

window.addEventListener('message',(msg)=>{
    let mytext = document.querySelector('#mytext')
    mytext.innerHTML = JSON.stringify(msg)
})
javascript

这样父窗口就可以顺利接收到子串口发送过来的信息了，也可以轻松的显示在子窗口中。 这节学习内容就到这里了，希望小伙伴能练习一下。

11：Electron 选择文件对话框

这节课开始我们讲解Electron下的对话框操作，对话框一般会有选择文件对话框，保存文件对话框和确认对话框。这节我们先来学习文件选择对话框的相关操作。其实我完全可以把这三个对话框都讲了，那样更简单，但是我分开讲就是为了能帮你形成一个可以复习的知识点目录。

对话框相关API讲解
我们先来看一下打开对话框的相关API，打开文件选择对话框可以使用dialog.showOpenDialog()方法来打开，它有两个参数，一个是设置基本属性，另一个是回调函数，如果是异步可以使用then来实现。

title ： String (可选)，对话框的标题
defaultPath ： String (可选),默认打开的路径
buttonLabel ： String (可选), 确认按钮的自定义标签，当为空时，将使用默认标签
filters ： 文件选择过滤器，定义后可以对文件扩展名进行筛选
properties：打开文件的属性，比如打开文件还是打开文件夹，甚至是隐藏文件。
javascript

对基本的API了解以后，就可以写代码看看具体的效果了。

选择对话框练习
在根目录新建一个demo4.html文件，然后编写一个按钮，点击按钮可以打开窗口选择文件。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button id="openBtn">打开文件</button>
</body>

<script>
    const {dialog} = require('electron').remote
    var openBtn = document.getElementById('openBtn');
    openBtn.onclick = function(){
        dialog.showOpenDialog({
            title:'请选择你喜欢的照片'
        })
    }

</script>

</html>
html

写完后记得把main.js中的引入页面改成demo4.html代码如下：

 mainWindow.loadFile("demo4.html");
javascript

使用electron . 预览一下，可以看到，已经可以顺利打开文件选择窗口了。

默认路径的设置
这时打开的窗口是没有默认文件的，比如我们想直接定位到文件.jpg，就可以用defaultPath来进行制作。 代码如下：

dialog.showOpenDialog({
    title:'请选择你喜欢的照片',
    defaultPath:'xiaojiejie.jpg'
})
javascript

过滤器的使用
现在程序还是可以看到很多其他的文件，我们的原则就是想选择一个照片，然后显示在界面上，这时候就需要用到过滤器了。

openBtn.onclick = function(){
    dialog.showOpenDialog({
        title:'请选择你喜欢的照片',
        defaultPath:'xiaojiejie.jpg',
        filters:[
            {name:'jpg',extensions:['jpg']}
        ]
    })
}
javascript

自定义确定按钮
可以直接使用buttonLabel来自定义确定按钮的文字，比如现在把文字改成’打开图片’。

dialog.showOpenDialog({
    title:'请选择你喜欢的照片',
    defaultPath:'xiaojiejie.jpg',
    buttonLabel:'打开图片',
    filters:[
        {name:'jpg',extensions:['jpg']}
    ]
})
javascript

把放到应用中
当我们选择到了一个文件后，showOpenDialog提供了回调函数，也就是我们的第二个参数。现在来看一下回调函数如何获得图片路径。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button id="openBtn">打开文件</button>
    <img id="images"  style="width:100%" />
</body>

<script>
    const {dialog} = require('electron').remote
    var openBtn = document.getElementById('openBtn');
    openBtn.onclick = function(){
        dialog.showOpenDialog({
            title:'请选择你喜欢的照片',
            defaultPath:'xiaojiejie.jpg',
            filters:[{name:'jpg',extensions:['jpg']}]
        }).then(result=>{
            let image = document.getElementById('images')
            image.setAttribute("src",result.filePaths[0]);
            console.log(result)
        }).catch(err=>{
            console.log(err)
        })
    }

</script>

</html>
html

这样完成了选择照片，并显示在界面上的功能，有的小伙伴这时候就会问了，我用html的选择文件也可以实现这个效果，确实是可以实现的，但我认为既然用了Electron就最好使用原生的形式打开。

12：Electron 保存对话框的操作

有了上节的基础，再学习保存对话框dialog.showSaveDialog()就容易很多，因为他们大部分的API都是相同的，只有部分不一样，所以如果你已经掌握好了上节课的内容，这节就变的非常容易了。这节课我们作一个保存按钮，保存后能把固定的内容保存到文件中。

制作一个保存按钮
先在demo4.html中，编写一个按钮：

<button id="saveBtn">保存文件</button>
html

然后在<script>标签中加入下面的代码,这时候就可以顺利的弹出保存文件对话框了，我们可以随便写一个文件名，然后会在控制台给我们返回出来结果。

var saveBtn = document.getElementById('saveBtn')
    saveBtn.onclick = function(){
        dialog.showSaveDialog({
            title:'保存文件',

        }).then(result=>{
            console.log(result)
        }).catch(err=>{
            console.log(err)
        })
    }
javascript

其实我们还可以作的更多，比如我们引入Node中的fs模块，然后进行文件流的操作，就可以真的生成一个文件。

先引入fs模块。

 const fs = require('fs')
然后在保存后，向文件里写入内容。

saveBtn.onclick = function(){
    dialog.showSaveDialog({
        title:'保存文件',
    }).then(result=>{
        console.log(result.filePath)
        fs.writeFileSync(result.filePath,'测试数据')
    }).catch(err=>{
        console.log(err)
    })
}
javascript

写完这一步就可以在终端中输入electron . 来打开应用，进行预览了。这节课的内容就到这里了，内容不多。

13：Electron 消息对话框的操作

打开文件对话框和保存文件对话框我们都学习过了，这节学习一下最为普通的消息对话框dialog.showMessageBox()，他的属性还是比较多的，所以我们先来看一下他的相关属性。

showMessageBox 相关属性
它有太多的属性，这里我们也只挑一些常用的属性来讲解，如果你在工作中具体使用，可以先到官网查询相关的API后，再根据需求具体使用。

type ：String类型，可以选，图标样式，有none、info、error、question和warning
title: String类型，弹出框的标题
messsage : String 类型，必选 message box 的内容，这个是必须要写的
buttons: 数组类型，在案例中我会详细的讲解，返回的是一个索引数值（下标）
制作一个确认对话框
先在Demo4.html中增加一个按钮。

 <button id="messageBtn">弹出对话框</button>
html

然后这个对话框的内容也非常简单，就是简单的弹出一句话，用户可以点击“确定”或者“取消”。代码如下：

var messageBtn = document.getElementById('messageBtn')
    messageBtn.onclick = function(){
        dialog.showMessageBox({
            type:'warning',
            title:'标题',
            message:'消息?',
            buttons:['确认','取消']
        }).then(result=>{
            console.log(result)
        })
    }
javascript

可以看到回调中result里有一个response这个里会给我们返回按钮的数组下标。

为什么会鼓励使用showMessageBox，因为这样比JS里的alert更加灵活,比如可以设置按钮，可以设置title。最常用的对话框就是这三种了，当然还有两个不常用的，我在这里就不讲了。

14：Electron 断网提醒功能制作

桌面客户端的程序都必备的一个功能是判断网络状态，这个其实可以用window.addEventListener来进行时间监听。

相关事件
其实这个是JavaScript的一种方式进行监听网络状态,监听的事件分别是online和offline。

online : 如果链接上网络，就会触发该事件。
offline : 如果突然断网了，就会触发该事件。
案例演示
我们现在要做的就是当断网和重新链接到网络时，都给用户一个提示，方便用户即时得知网络状态。

新建一个文件，比如叫作demo5.html文件，然后编写下面的代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h2> JSPang.com  断网提醒测试 </h2>
</body>
<script>
    window.addEventListener('online',function(){
        alert('已联网！')
    })

    window.addEventListener('offline',function(){
        alert('已断网！')
    })
</script>
</html>
html

这样我们就完成了基本的网络情况监控，小伙伴们可以在终端中输入electron . 预览效果。

15：Electron 底部通知消息的制作

对话框通过三小节的学习，小伙伴们已经掌握的非常好了，接下来学习一下消息通知。Electron的消息通知是通过H5的window.Notification来实现的。

window.Notification的属性参数
title: 通知的标题，可以显示在通知栏上
option: 消息通知的各种属性配置，以对象的形式进行配置。
其实如果你想详细学习，完全可以看H5的NotificationAPI进行学习。

点击按钮提示消息
那直接来作一个实例，当我们点击一个按钮时，会自动给我i们弹出提示消息，告诉我们有新的订单。 新建一个demo5.html，然后编写如下代码。

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button id="notifyBtn">通知消息</button>
</body>
<script>

    var notifyBtn = document.getElementById('notifyBtn');

    var option = {
        title:'标题!',
        body:'有消息',

    }
    notifyBtn.onclick = function(){
      new  window.Notification(option.title,option)
    }
</script>
</html>
html

然后改变一下main.js中的代码，让他渲染demo5.html。

mainWindow.loadFile(“demo5.html”);
然后在终端中输入eelctron . 进行查看效果就可以了。这节课就到这里，我希望小伙伴们都能作一下这个效果。

16：Electron注册全局快捷键

全局快捷键模块就是globalShortcut，意思就是我们打开软件以后，按键盘上的快捷键，就可以实现用快捷键实现特定的功能，相当于用键盘快捷键触发某些事件。

注册快捷键
globalShortcut是主进程中的模块，而且注册的都是全局的快捷键，所以你尽量写在main.js中。打开main.js，然后先引入globalShortcut，代码如下：

var  globalShortcut = electron.globalShortcut
javascript

引入后，我们现在的需求是按快捷键ctrl+e键后，打开我的博客https://jspang.com。这时候使用globalShortcut.register方法就可以实现，全部代码如下:

var electron = require('electron') 

var app = electron.app   
var  globalShortcut = electron.globalShortcut

var BrowserWindow = electron.BrowserWindow;  

var mainWindow = null ;  
app.on('ready',()=>{
    mainWindow = new BrowserWindow({width:800,height:600})  

    globalShortcut.register('ctrl+e',()=>{

        mainWindow.loadURL('https://jspang.com')  
    })

    mainWindow.loadFile('test.html')  

    //监听关闭事件，把主窗口设置为null
    mainWindow.on('closed',()=>{
        mainWindow = null
    })

})
javascript

这里需要注意的是，注册全局的快捷键必须在ready事件之后，才能注册成功。

检测快捷键是否注册成功
可以使用globalShortcut.isRegistered()方法，来检测快捷键是否注册成功，因为你可能同时打开很多软件，它们已经占用了一些快捷键的组合，所以并不是你100%可以注册成功的。

 let isRegister= globalShortcut.isRegistered('ctrl+e')?'Register Success':'Register fail'
 console.log('------->'+isRegister)
javascript

这样就进行了检测，如果你在实际开发中，可能当有冲突时，软件是支持可以修改快捷键。

注销快捷键
因为我们注册的是全局的快捷键，所以当我们关闭软件或者窗口时，记得一定要注销我们的快捷键。防止关闭后打开其他软件和他们的快捷键冲突。


app.on('will-quit',function(){
    //注销全局快捷键的监听
    globalShortcut.unregister('ctrl+e')
    globalShortcut.unregisterAll()

})
javascript

为了方便学习，给出全部main.js代码:

var electron = require('electron') 

var app = electron.app   
var  globalShortcut = electron.globalShortcut

var BrowserWindow = electron.BrowserWindow;  

var mainWindow = null ;  
app.on('ready',()=>{
    mainWindow = new BrowserWindow({width:800,height:600})  

    globalShortcut.register('ctrl+e',()=>{

        mainWindow.loadURL('https://jspang.com')  
    })

    let isRegister= globalShortcut.isRegistered('ctrl+e')?'Register Success':'Register fail'

    console.log('------->'+isRegister)



    mainWindow.loadFile('test.html')  

    //监听关闭事件，把主窗口设置为null
    mainWindow.on('closed',()=>{
        mainWindow = null
    })

})

app.on('will-quit',function(){
    //注销全局快捷键的监听
    globalShortcut.unregister('ctrl+e')
    globalShortcut.unregisterAll()

})
javascript

这节课学的内容就到这里了，这节课的内容在Electron开发中都会用到，希望小伙伴们练习一下，工作中用到了也可以回来翻看这篇文章。

17：Electron 剪贴板事件的使用

在开发中我们经常会遇到给用户一个激活码，然后让用户复制粘贴的情况，这时候就需要用到clipboard模块，也就是我们的剪贴板模块。

复制激活码功能实现
现在要作一个激活码，然后旁边放一个按钮，点击按钮就可以复制这个激活码，你可以把激活码复制到任何地方。

先新建一个页面demo7.html,然后在里边先写相关的html代码。再里边放入一个文字的激活码，然后放入一个按钮。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>
        激活码：<span id="code">jspangcom1234234242</span> <button id="btn">复制激活码</button>
    </div>
</body>
</html>
html

然后编写<script>标签，首先分本获取<span>标签的DOM，然后再获取<button>的DOM,然后点击button时，触发事件，把内容复制到剪贴板中。代码如下：

<script>
    const {clipboard} = require('electron')

    const code = document.getElementById('code')
    const btn = document.getElementById('btn')
    btn.onclick = function(){
        clipboard.writeText(code.innerHTML)
        alert('复制成功')
    }

</script>
javascript

这时候就可以进行预览了，如果提示你的require没找到，记得在main.js中加入这句话。

mainWindow = new BrowserWindow({
    width:800,
    height:600,
    webPreferences:{ nodeIntegration:true}
})  
javascript

这个在前面讲过，这个就是允许你在Electron中使用node，现在就应该可以了。

18：vue-Electron 打包注意事项

如果vue使用vue-router配置路由的话，需要注意，打包之前，需要将路由模式设置为hash，即

    new VueRouter({
        //浏览器
        // mode: "history",
        //客户端
        mode: "hash",
        routes
    });
javascript

即通过/#/的形式路由，否则打包后的桌面应用无法正常显示路由页面！

文章作者： 续加仪
文章链接：
版权声明：本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明文章出处。
前端 electron 教程
打赏
  • 微信
  • 支付宝
相关推荐
2024-07-11
安卓实现仿网易云音乐播放界面（Loading...)
2023-05-25
Qt QML Windows项目实战——Cloud Music Player—— 七 专辑歌单列表
2023-05-13
Nuxt3项目创建
2023-04-26
QT QTextBorwser使用setText时设置右对齐
2023-04-25
Qt QML Windows项目实战——Cloud Music Player—— 六 搜索音乐
2023-04-19
Qt开发项目实战——代码编辑器Code Editor Demo——七 打包安装程序
评论
来发评论吧~
···

歌手: