Electron基础学习笔记

这篇具有很好参考价值的文章主要介绍了Electron基础学习笔记。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

Electron基础学习笔记

官网: https://www.electronjs.org/
文档:https://www.electronjs.org/zh/docs/latest/

Electon概述

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

electron,electron,学习,笔记

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.

Electron的Hello World案例

安装Electron

#项目内安装
npm install electron --save-dev
# 全局安装:
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 .就可以打开窗口了。

若是在创建项目的时候就生成json文件,main对应的会是index.js,但是现在的话会生成main.js

运行:

electron.cmd .
# 注意,后面有一个 .

electron,electron,学习,笔记

Electron的运行流程

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

我们可以理解package.json中定义的入口文件就是主进程,那一般一个程序只有一个主进程,而我们可以利用一个主进程,打开多个子窗口.
由于 Electron 使用了 Chromium 来展示 web 页面,所以 Chromium 的多进程架构也被使用到。 每个 Electron 中的 web 页面运行在它自己的渲染进程中,也就是我们说的渲染进程.
也就是说主进程控制渲染进程,一个主进程可以控制多个渲染进程.
electron,electron,学习,笔记

案例2

在项目根目录下建立一个xiaojiejie.txt的文件,然后写入几个小姐姐的名字.

代码如下:

1.麻里梨夏
2.星野娜美
3.高桥圣子

因为要使用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} //设置全局使用node.js
    })
 
    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>
    <script src="renderer/index.js"></script>
 
</body>
</html>

新建一个renderer文件夹,在文件里新建index.js,再index.html页面里先进行引入.
编写index.js里的代码

var fs = require('fs'); //引入node.js(需要在main.js中全局引入:webPreferences:{ nodeIntegration:true})
window.onload = function(){//监听页面
    var btn = this.document.querySelector('#btn') //获取按钮
    var mybaby = this.document.querySelector('#mybaby') //获取显示的div
    btn.onclick = function(){ //点击按钮监听
        fs.readFile('xiaojiejie.txt',(err,data)=>{ //读取文件(默认项目根目录)
            mybaby.innerHTML = data //赋值
        })
    }
}

Electron Remote模块的使用

Electron有主进程和渲染进程,Electron的API方法和模块也是分为可以在主进程和渲染进程中使用.如果想在渲染进程中使用主进程中的模块方法时,可以使用Electron Remote解决在渲染和主进程间的通讯。
新建一个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

<!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>
    yellow
</body>
</html>

electron,electron,学习,笔记

创建菜单和基本使用

编写菜单模板

Electron中编写菜单,需要先建立一个模板,这个目标很类似我们JSON或者类的数组。
我们打开项目,在项目的根目录下新建一个文件夹main,意思是主进程中用到的代码我们都写到这里。
然后新建一个menu.js文件,然后编写如下代码。

//放所有菜单的操作
const { Menu,BrowserWindow } = require('electron')
//所有的菜单
var template = [
    {
        label:'凤来怡洗浴会所',//菜单
        submenu:[//子菜单
            {label:'精品SPA',
            click:()=>{  //设置点击事件,使用的是electron的功能
                win = new BrowserWindow({//创建新窗口
                    width:500,
                    height:500,
                    webPreferences:{ nodeIntegration:true}
                })
                win.loadFile('yellow.html')
                win.on('closed',()=>{//监听关闭事件
                    win = null
                })
 
            }
        },
            {label:'泰式按摩'}
        ]
 
    },
    {
        label:'大浪淘沙洗浴中心',
        submenu:[
            {label:'牛奶玫瑰浴'},
            {label:'爱情拍拍手'}
        ]
    }
]
//构建菜单模板
var m = Menu.buildFromTemplate(template)
//设置菜单模板
Menu.setApplicationMenu(m)

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

 require('./main/menu.js') //在引入页面之前加,比如:
 
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,
        webPreferences:{ nodeIntegration:true}//全局引用node.js
    })   //设置打开的窗口大小
    //----------------------
    require('./main/menu.js')//引入自定义的菜单
    //------------------------
    mainWindow.loadFile('demo2.html')  //加载那个页面,使用新页面
    //监听关闭事件,把主窗口设置为null
    mainWindow.on('closed',()=>{
        mainWindow = null
    })
 
})

注意:Menu属于是主线程下的模块,所以只能在主线程中使用。
electron,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)

右键菜单

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

打开render文件夹,然后打开demo2.js文件,编写一个右键菜单的监听事件

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

例如

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})
 
    }
}
//监听右键点击事件-------------
window.addEventListener('contextmenu',function(){
    alert(111);
})

electron,electron,学习,笔记

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

//引入remote就可以使用了
const { remote} = require('electron')
//右键的菜单
var rigthTemplate = [
    {label:'粘贴',accelerator:`ctrl+c`},//菜单,快捷键
    {label:'复制'}
]
//声明菜单
var m = remote.Menu.buildFromTemplate(rigthTemplate)
//监听右键点击事件-------------
window.addEventListener('contextmenu',function(e){
 
    //阻止当前窗口默认事件
    e.preventDefault();
    //把菜单模板添加到右键菜单,弹出右键菜单
    m.popup({window:remote.getCurrentWindow()})
 
})

electron,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 中使用shell通过链接打开浏览器

在渲染进程中默认加入一个<a>标签,进行跳转默认是直接在窗口中打开,而不是在浏览器中打开的,如果我们想在默认浏览器中打开,要使用electron shell在浏览器中打开链接。

案例:

<!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>
        <!-- 使用浏览器打开 -->
        <a id="aHref" href="https://jspang.com">技术胖的博客</a>
    </h1>
    <script src="./renderer/demo3.js"></script>
</body>
</html>

如果想使用浏览器打开,我们可以直接在<a>标签中加入id,然后在render文件夹下,新建一个demo3.js文件,先在文件首页中引入shell,然后编写响应事件click

var { shell } = require('electron')  //需要使用的是shell
 
var aHref = document.querySelector('#aHref')
 
aHref.onclick = function(e){
    e.preventDefault() //组织默认行为
    var href = this.getAttribute('href') //获取连接
    shell.openExternal(href) //打开连接
}

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载入的页面

例如:

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,
        webPreferences:{ nodeIntegration:true}//全局引用node.js
    })   //设置打开的窗口大小
    mainWindow.webContents.openDevTools()  //打开调试模式
    require('./main/menu.js')//引入自定义的菜单
    mainWindow.loadFile('demo3.html')  //加载那个页面,使用新页面
    //---------嵌入网页----------
    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载入的页面
    //----------------
    //监听关闭事件,把主窗口设置为null
    mainWindow.on('closed',()=>{
        mainWindow = null
    })
 
})

electron,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')
}

这样就完成了子窗口的打开。
electron,electron,学习,笔记

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

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 子窗口向父窗口传递消息
        window.opener.postMessage('我是子窗口的消息')
    }
</script>
</html>
父窗口接受消息

先打开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)
})

这样父窗口就可以顺利接收到子串口发送过来的信息了,也可以轻松的显示在子窗口中。

electron,electron,学习,笔记

{"isTrusted":false,"data":"我是子窗口的消息","origin":"file://","source":{"location":{"href":"file:///D:/data/electron/demo01/popup_page.html","hash":"","host":"","hostname":"","origin":"file://","pathname":"/D:/data/electron/demo01/popup_page.html","port":"","protocol":"file:","search":""},"closed":false}}

Electron 选择文件对话框showOpenDialog

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

  • title : String (可选),对话框的标题
  • defaultPath : String (可选),默认打开的路径
  • buttonLabel : String (可选), 确认按钮的自定义标签,当为空时,将使用默认标签
  • filters : 文件选择过滤器,定义后可以对文件扩展名进行筛选
  • properties:打开文件的属性,比如打开文件还是打开文件夹,甚至是隐藏文件。
<!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 src='' id='images'>
</body>
 
<script>
    //引入dialog
    const {dialog} = require('electron').remote
    var openBtn = document.getElementById('openBtn');
    openBtn.onclick = function(){
        //打开文件选择对话框
        dialog.showOpenDialog({
            title:'请选择你喜欢的小姐姐照片' , //弹窗名:左上角
            defaultPath:'./img/1.jpg', //默认路径的设置,是一个文件(默认根目录)
            filters:[  //过滤器
                {name:'只jpg',extensions:['jpg','png']},
                {name:'png',extensions:['png']}
            ],
            buttonLabel:'打开图片', //自定义
        }).then(result=>{
            let image = document.getElementById('images')
            image.setAttribute("src",result.filePaths[0]);
            console.log(result)
        }).catch(err=>{
            console.log(err)
        })
    }
 
</script>
 
</html>

electron,electron,学习,笔记

文件保存对话框showSaveDialog

dialog.showSaveDialog()

<button id="saveBtn">保存文件</button>
    //保存文件
    const fs = require('fs') //流处理
    var saveBtn = document.getElementById('saveBtn')
    saveBtn.onclick = function(){
        dialog.showSaveDialog({ //打开保存
            title:'保存文件',
        }).then(result=>{
            console.log(result)
             fs.writeFileSync(result.filePath,'技术胖一个前端爱好者')//将字符串写入选择的位置(需要包含文件名)
        }).catch(err=>{
            console.log(err)
        })
    }

electron,electron,学习,笔记

electron,electron,学习,笔记

Electron 消息对话框的操作showMessageBox

showMessageBox 相关属性

  • type :String类型,可以选,图标样式,有noneinfoerrorquestionwarning
  • title: String类型,弹出框的标题
  • messsage : String 类型,必选 message box 的内容,这个是必须要写的
  • buttons: 数组类型,在案例中我会详细的讲解,返回的是一个索引数值(下标)

案例:制作一个确认对话框

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

electron,electron,学习,笔记
回调中result里有一个response这个里会给我们返回按钮的数组下标。

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 . 预览效果。
electron,electron,学习,笔记

electron,electron,学习,笔记

Electron 底部通知消息的制作

Electron的消息通知是通过H5window.Notification来实现的。

window.Notification的属性参数

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

点击按钮提示消息

当我们点击一个按钮时,会自动弹出提示消息,告诉我们有新的订单。 新建一个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>

electron,electron,学习,笔记

Electron注册全局快捷键

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

注册快捷键

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

var  globalShortcut = electron.globalShortcut

引入后,我们现在的需求是按快捷键ctrl+e键后,打开我的博客https://jspang.com。这时候使用globalShortcut.register方法就可以实现.
这里需要注意的是,注册全局的快捷键必须在ready事件之后,才能注册成功。

检测快捷键是否注册成功

可以使用globalShortcut.isRegistered()方法,来检测快捷键是否注册成功,因为你可能同时打开很多软件,它们已经占用了一些快捷键的组合,所以并不是你100%可以注册成功的。如果你在实际开发中,可能当有冲突时,软件是支持可以修改快捷键。

注销快捷键

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

    //注销全局快捷键的监听
    globalShortcut.unregister('ctrl+e')
//全部注销
    globalShortcut.unregisterAll()

案例

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 剪贴板事件的使用

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

复制激活码功能实现

现在要作一个激活码,然后旁边放一个按钮,点击按钮就可以复制这个激活码,你可以把激活码复制到任何地方。
先新建一个页面demo7.html,然后在里边先写相关的html代码。再里边放入一个文字的激活码,然后放入一个按钮。
然后编写<script>标签,首先分本获取<span>标签的DOM,然后再获取<button>的DOM,然后点击button时,触发事件,把内容复制到剪贴板中。

<!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>
    <script>
      const { clipboard } = require("electron");
      const code = document.getElementById("code");
      const btn = document.getElementById("btn");
      btn.onclick = function () {
          //写入剪切板
        clipboard.writeText(code.innerHTML);
        alert("复制成功");
      };
    </script>
  </body>
</html>

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

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

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

退出按钮

main.js

const {app, BrowserWindow, Menu,ipcMain} = require('electron') //使用app和ipcMain

ipcMain.on('close',()=>{
  app.quit()
})

html引入的js

const ipc = require('electron').ipcRenderer
/*关闭程序*/
function closeApp(){
  ipc.send('close');
}

页面调用这个方法即可

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就可以进行打包了,打包的时间会非常长,而且如果你安装了一些安全软件,还要时刻看着安全软件的禁止操作,如果不小心被禁止掉了,可能会造成打包的失败。

参考:文章来源地址https://www.toymoban.com/news/detail-724444.html

  • https://jspang.com/detailed?id=62

到了这里,关于Electron基础学习笔记的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Electron学习2 使用Electron-vue和Vuetify UI库

    Electron-Vue 是一个使用 Vue.js 构建跨平台桌面应用程序的框架。它基于 Electron,一个使用 JavaScript、HTML 和 CSS 构建跨平台桌面应用程序的开源库。 Electron-Vue 结合了 Vue.js 的灵活性和 Electron 的跨平台能力,使得开发桌面应用程序变得更加简单和高效。以下是一些 Electron-Vue 的主要

    2024年02月11日
    浏览(34)
  • Electron 桌面应用开发从基础到进阶

    Electron 是一个基于 Node.js 和 Chromium 的桌面应用程序开发框架,它使开发人员能够使用 Web 技术(HTML、CSS 和 JavaScript)构建跨平台的桌面应用程序。它已经被众多知名公司使用,例如 GitHub、Slack、Microsoft 等等。本文将介绍如何使用 Electron 开发桌面应用程序。 安装 Electron 在开

    2024年02月03日
    浏览(35)
  • Electron 学习_BrowserWindow

    BrowserWindow创建并控制浏览器窗口(主进程) 条件:在 app 模块 emitted ready 事件之前,您不能使用此模块。 1.在加载页面时,渲染进程第一次完成绘制时,如果窗口还没有被显示,渲染进程会发出 ready-to-show 事件 。 在此事件后显示窗口将没有视觉闪烁 2.设置backgroundColor 属性 3.设

    2024年02月15日
    浏览(26)
  • Electron学习3 使用serialport操作串口

    本文将使用 nodejs 的 SerialPort 包来实现串口通讯功能。 Node SerialPort 是一个 JavaScript 库,用于连接到在 NodeJS 和 Electron 中工作的串行端口,以下是准备环境: Electron 开发环境 电脑有串口通讯能力,一般使用USB-串口转接板 windows 操作系统 本文操作过程来自: https://girishjoshi.i

    2024年02月11日
    浏览(34)
  • 小笔记:Electron中关联格式、处理文件、创建链接的相关编程

    Electron 笔记:Electron中关联格式、处理文件、创建链接的相关编程 作者 : 李俊才 (jcLee95):https://blog.csdn.net/qq_28550263?spm=1001.2101.3001.5343 邮箱 : 291148484@163.com 本文地址 :https://blog.csdn.net/qq_28550263/article/details/131041514 【介绍】:本文介绍关于在Electron中绑定文件格式、在菜单

    2024年02月09日
    浏览(34)
  • Electron学习1 安装环境与第一个程序

    Electron是一个用于构建跨平台桌面应用程序的开源库。它使用HTML、CSS和JavaScript等技术,通过将Web技术打包为原生应用程序,使得开发者能够创建出具有本地操作系统特性的软件。Electron使用Chromium作为渲染引擎,并允许开发者使用Node.js来访问底层系统资源。 本文将介绍elect

    2024年02月13日
    浏览(35)
  • electron学习-03preload 预加载-主进程 和 渲染进程之间通信

    主进程 是有着完全操作系统访问权限的 Node.js 环境; 渲染进程 默认跑在网页页面上。 渲染进程不能直接访问 Node.js 接口;主进程访不能直接访问 DOM。 预加载 脚本 运行在 具有 HTML DOM 和 Node.js、Electron API 的有限子集访问权限的环境中 预加载脚本: 将 Electron 的不同类型的进

    2023年04月09日
    浏览(42)
  • Electron:Electron整合vue

    主要思路:分别启动两个进程,一个是vue,另一个是electron。然后在electron通过loadURL去引入vue的主页面。但怎么才能将这两个项目整合成一键启动呢?请看后文! TODO

    2024年01月19日
    浏览(37)
  • 正确安装Electron、Electron-quick-start和Electron Forge

    Electron Forge引用了Squirrel.windows项目,这导致Electron Forge生成的安装包只能安装在本地用户帐户中。 Or maybe you’re good at reinvent the wheel and can read this part of the documentation. ElectronForge文档 - 扩展 - 制作工具 Squirrel.Windows的Github议题 - Choosing install directory 打开命令行工具,输入 如果正

    2024年02月06日
    浏览(42)
  • 【electron 4】electron配置打包环境

    window需要:ico mac需要:icns linux需要png 借助:electron-icon-builder 安装: 配置package.json scripts 说明: input:icon.png是我需要引入的图标 output:是我将input引入图标所转换不同大小不同格式的图标输出文件 因为我是已有的项目了,所以这里我只需要安装并引入electron-forge,虽然我进

    2024年04月28日
    浏览(35)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包