专注前端开发,每年100集免费视频。
首页/视频教程/ Electron 免费视频教程-用前端技术开发桌面应用/
Electron 免费视频教程-用前端技术开发桌面应用
2020-01-03 视频教程 2816218

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

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

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

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

  1. 公司没有专门的桌面应用开发者,而需要前端兼顾来进行开发时,用Electron就是一个不错的选择。
  2. 一个应用同时开发Web端和桌面端的时候,那使用Electron来进行开发就对了。
  3. 开发一些效率工具,比如说我们的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

ElectronUI

防坑指南

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

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

这节课的内容就到这里,下节课我们就可以开始编写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的运行流程

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

})

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

window.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.BrowserWindow

window.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 //引入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载入的页面

这个使用起来非常简单,写完上面的代码,就可以在终端中输入一下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类型,可以选,图标样式,有noneinfoerrorquestionwarning
  • 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来进行时间监听。

相关事件

其实这个是JavaScript的一种方式进行监听网络状态,监听的事件分别是onlineoffline

  • 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>

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

P15:Electron 底部通知消息的制作

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

window.Notification的属性参数

  • title: 通知的标题,可以显示在通知栏上
  • option: 消息通知的各种属性配置,以对象的形式进行配置。

其实如果你想详细学习,完全可以看H5NotificationAPI进行学习。

点击按钮提示消息

那直接来作一个实例,当我们点击一个按钮时,会自动给我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>

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

mainWindow.loadFile("demo5.html");

然后在终端中输入eelctron . 进行查看效果就可以了。这节课就到这里,我希望小伙伴们都能作一下这个效果。

p16:Electron注册全局快捷键

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

注册快捷键

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

var  globalShortcut = electron.globalShortcut

引入后,我们现在的需求是按快捷键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
    })

})

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

检测快捷键是否注册成功

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

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

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

注销快捷键

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


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

})

为了方便学习,给出全部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()

})

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

p17: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>

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

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

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

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

p18:Electorn应用打包

当我们使用了Electron开发完应用后,一定想着如何打包成exe文件,打包的方式有很多,甚至根据你使用不同的前端框架,打包方式也会有所不同。这里我们就学习原汁原味的打包方式,用electron-package打包。

安装electron-packager

定位到项目根目录下,然后使用npm来安装electron-packager当然你也可以使用yarn来进行安装

//npm
npm install electron-packager --save-dev
//yarn
yarn add electron-packager --dev

在工作中我习惯于用yarn来进行安装。安装完成后会在package.json文件中看到如下代码:

"devDependencies": {
    "electron-packager": "^14.2.1"
  }

从代码中可以看出我目前的版本是14.2.1

第一种打包方法(不建议)

第一种打包方法就是直接在命令行中输入electron-packager,然后后边跟着6个打包参数,这种方法太难了。

electron-packager <location of project> <name of project> <platform> <architecture> <electron version> <optional options>

参数说明:

  • location of project : 项目所在路径
  • name of project : 打包的项目名称
  • platform : 确定了你要构建哪个平台的应用(Windows、Mac还是Liux)
  • architecture: 决定了使用x86还是x64还是两个架构都需要
  • electron version: electron 的版本
  • optional options: 可选选项

这个命令太长了,每次要是都用这个命令来打包会很烦,所以推荐使用第二种方法:

第二种打包方法

打开package.json文件,在scripts下添加代码

  "packager": "electron-packager ./ HelloWorld --all --out ./outApp  --overwrite --icon=./app/img/icon/icon.ico"

在项目中新建outAPP文件夹。

使用npm run-script packager就可以进行打包了,打包的时间会非常长,而且如果你安装了一些安全软件,还要时刻看着安全软件的禁止操作,如果不小心被禁止掉了,可能会造成打包的失败。

总结:Electron的内容还有很多,但是你能掌握这18节,也可以走到一个基本的入门,并可以达到自学的能力,剩下的你完全可以看着中文API学会,因为你已经掌握了大部分Electron的架构。剩下的就是实战部分的操作了。这个视频先到这里。我们下一套教程再见。

对不起,该文章暂时不支持留言。
最新留言

No Data

技术胖
专注于WEB和移动前端开发
光头Coder12年经验业余讲师免费视频被访问
只要50元/年 得4项福利

视频离线高清版下载-400集

每周至少两篇文章分享

技术胖收费视频半价购买

每天回答所提问题(选择性回答)