技术胖 / 开普饭

P01：Electron简介和教程介绍

如果你对Electron有所了解，完全可以跳过这一节，直接看下一节的视频。

视频和文章介绍

首先这篇文章中的视频也是完全免费的，你不用花费1分钱就可以跟着技术胖一起学习这个技术。

这篇文章是站在WEB前端的视角来设计的，偏向于实战和技巧的总结，核心是引领你高效学习并熟悉Electron的使用。我会尽量站在一个学生的角度来讲解这门课程，这样会更多的考虑你学习中的困难，并避开一些无需踩的坑，让你学习更加顺畅，而不会有任何技术壁垒。

视频中的代码我都会手工一个字母一个字母的敲击出来，然后说出代码的意思，让你最大程度的理解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.

课程介绍

本博客视频，每周更新三集，99%都是免费视频，所以你可以把博客搜藏一下。如果有经济能力，希望你加入技术胖的小密圈，具体的地址：

小密圈详细介绍：https://jspang.com/detailed?id=54

P02：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

防坑指南

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

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

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

P03：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>

新建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    })})

创建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"}

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

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

P04：Electron 编写邀请小姐姐程序

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

Electron的运行流程

1.读取package.json的中的入口文件,这里我们是main.js
2.main.js 主进程中创建渲染进程
3.读取应用页面的布局和样式
4.使用IPC在主进程执行任务并获取信息

也许你现在还不能理解这个流程,但是你需要记住这个流程,只有我们记住这个流程后,在以后程序出现问题时,才可以很快的定位问题.

Electron的主进程和渲染进程

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

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

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

如果你实在不理解,也没关系,你可以简单的把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    })})

修改完主进程,然后我们到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>

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

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

然后编写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        })    }}

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

P05：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>

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

const btn = this.document.querySelector('#btn') const BrowserWindow =require('electron').remote.BrowserWindowwindow.onload = function(){    btn.onclick = ()=>{         newWin = new BrowserWindow({             width:500,             height:500,         })         newWin.loadFile('yellow.html')         newWin.on('close',()=>{win=null})     }}

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

const btn = this.document.querySelector('#btn') const BrowserWindow =require('electron').remote.BrowserWindowwindow.onload = function(){    btn.onclick = ()=>{         newWin = new BrowserWindow({             width:500,             height:500,         })         newWin.loadFile('yellow.html')         newWin.on('close',()=>{win=null})     }}

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

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

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

编写菜单模板

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

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

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

const { Menu } = require('electron')var template = [    {        label:'凤来怡洗浴会所',        submenu:[            {label:'精品SPA'},            {label:'泰式按摩'}        ]    },    {        label:'大浪淘沙洗浴中心',        submenu:[            {label:'牛奶玫瑰浴'},            {label:'爱情拍拍手'}        ]    }]var m = Menu.buildFromTemplate(template)Menu.setApplicationMenu(m)

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

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

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

使用菜单打开新窗口

有了菜单之后，可以在菜单中加入click事件，代码如下:

const { Menu ,BrowserWindow} = require('electron')var template = [    {        label:'凤来怡洗浴会所',        submenu:[            {                label:'精品SPA',                //主要代码--------------start                click:()=>{                    win = new BrowserWindow({                        width:500,                        height:500,                        webPreferences:{ nodeIntegration:true}                    })                    win.loadFile('yellow.html')                    win.on('closed',()=>{                        win = null                    })                }                //主要代码----------------end            },            {label:'泰式按摩'}        ]    },    {        label:'大浪淘沙洗浴中心',        submenu:[            {label:'牛奶玫瑰浴'},            {label:'爱情拍拍手'}        ]    }]var m = Menu.buildFromTemplate(template)Menu.setApplicationMenu(m)

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

P07：Electron 制作右键菜单

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

菜单快捷键绑定

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

accelerator:`ctrl+n`

全部代码如下：

const { Menu ,BrowserWindow} = require('electron')var template = [    {        label:'凤来怡洗浴会所',        submenu:[            {                label:'精品SPA',                accelerator:`ctrl+n`,                click:()=>{                    win = new BrowserWindow({                        width:500,                        height:500,                        webPreferences:{ nodeIntegration:true}                    })                    win.loadFile('yellow.html')                    win.on('closed',()=>{                        win = null                    })                }            },            {label:'泰式按摩'}        ]    },    {        label:'大浪淘沙洗浴中心',        submenu:[            {label:'牛奶玫瑰浴'},            {label:'爱情拍拍手'}        ]    }chengxu]var m = Menu.buildFromTemplate(template)Menu.setApplicationMenu(m)

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

创建右键菜单

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

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

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

当我们要使用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()})})

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

程序打开调试模式

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

mainWindow.webContents.openDevTools()

全部代码如下:

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    })})

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

P08：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://jspang.com">技术胖的博客</a>    </h1></body></html>

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

使用Shell在浏览器中打开

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

<a id="aHref" href="https://jspang.com">技术胖的博客</a>

然后在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)}

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

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

这里给出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>

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

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

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

在主进程中用BrowserView嵌入网页

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

var BrowserView = electron.BrowserView //引入BrowserViewvar 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载入的页面

这个使用起来非常简单，写完上面的代码，就可以在终端中输入一下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')}

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

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

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

window.opener.postMessage 子窗口向父窗口传递消息

window.opener.postMessage(message,targetOrigin),是将消息发送给指定来源的父窗口，如果未指定来源则发送给*，即所有窗口。

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>

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

window.addEventListener父窗口接收信息

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

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

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

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

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

P11：Electron 选择文件对话框

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

对话框相关API讲解

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

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

对基本的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>

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

mainWindow.loadFile("demo4.html");

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

默认路径的设置

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

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

过滤器的使用

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

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

自定义确定按钮

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

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

把小姐姐放到应用中

当我们选择到了一个文件后，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的选择文件也可以实现这个效果，确实是可以实现的，但我认为既然用了Electron就最好使用原生的形式打开。

P12：Electron 保存对话框的操作

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

制作一个保存按钮

先在demo4.html中，编写一个按钮：

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

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

var saveBtn = document.getElementById('saveBtn')    saveBtn.onclick = function(){        dialog.showSaveDialog({            title:'保存文件',        }).then(result=>{            console.log(result)        }).catch(err=>{            console.log(err)        })    }

其实我们还可以作的更多，比如我们引入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)    })}

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

P13：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>

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

var messageBtn = document.getElementById('messageBtn')    messageBtn.onclick = function(){        dialog.showMessageBox({            type:'warning',            title:'去不去由你',            message:'是不是要跟胖哥去红袖招?',            buttons:['我要去','不去了']        }).then(result=>{            console.log(result)        })    }

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

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

P14：Electron 断网提醒功能制作

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

技术胖

相关推荐