• electron学习笔记

    简介

    Electron 是一个跨平台的、基于 Web 前端技术的桌面 GUI 应用程序开发框架。

    使用 Web 前端技术来开发一个桌面 GUI 程序是一件多么炫酷的事情，你可以使用 HTML、CSS 来绘制界面和控制布局，使用 JavaScript 来控制用户行为和业务逻辑，使用 Node.js 来通信、处理音频视频等，几乎所有的 Web 前端技术和框架（jQuery、Vue、React、Angular 等）都可以应用到桌面 GUI 开发中。

    至此，JavaScript 这门神奇的语言除了能开发 Web 前端、Web 后台（基于 Node.js）、手机 APP（基于 React），也能开发桌面 GUI 程序了。

    经济学中的“有需求就有市场”在技术领域也适用，Electron 就是应需求而生的。Electron 面世之后，不仅满足了大部分现有的开发需求，还创造了大量的新需求，开辟了一个新的生态。

    官网地址:官网地址

    在这里插入图片描述

    安装

    # 创建工程
npm init
# 安装electron
npm install electron --save -g # 全局安装
# 检查安装是否成功
npx electron -v
./node_modules/.bin/electron -v
# 引入remote 
npm install --save @electron/remote

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9

    快速入门

    HelloWorld

    大概分为以下步骤:

    1. 创建html页面
    2. 编写main.js
    3. 在package.json中引入

    index.html页面

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index</title>
</head>
<body>
    <h3 id="hello">helloWorld</h3>
    <button id="button-one">按钮</button>
    <h3>打开新窗口</h3>
    <button id="button-two">按钮</button>
    <h3>按钮</h3>
    <button id="button-three">按钮</button>
    <h3>打开超链接</h3>
    <a id="button-four" href="http://www.baidu.com">按钮</a>
</body>
<script src="js/button.js"></script> <!--在js目录下准备一个js文件后续有用-->
</html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18

    main.js

    var electron = require('electron');
var app = electron.app; //引用app
var BrowserWindow = electron.BrowserWindow; // 窗口引用
var mainWindow = null; // 声明打开的主窗口

app.on('ready', () => {
    mainWindow = new BrowserWindow({
        width: 1000,
        height: 700,
        title: "helloWorld",
        webPreferences: {
            nodeIntegration: true,
            contextIsolation: false,
            enableRemoteModule: true
        }
    });
    mainWindow.webContents.openDevTools() // 默认打开调试模式
    require('@electron/remote/main').initialize(); //v14 版本 引入 remote需要以下两步
    require('@electron/remote/main').enable(mainWindow.webContents);
    mainWindow.loadFile('src/index.html');// 加载html页面
    mainWindow.on('closed', () => {
        mainWindow = null; // 页面关闭需要设置为null防止内存溢出
    });
})

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24

    在package.json引入

    在这里插入图片描述

    测试运行

    electron . #启动

    • 1

    在这里插入图片描述

    打开新窗口

    在js目录下准备一个button.js文件,在之前的index.html引入

    const buttontTow = document.getElementById("button-two");

const {BrowserWindow} = require('@electron/remote')
var newWin = null;
window.onload = function () {
    buttontTow.onclick = function () {
        newWin = new BrowserWindow({
            width: 1000,
            height: 700,
            title: "第二个页面"
        })
        newWin.loadFile("src/index2.html");
        newWin.on('closed', function () {
            newWin = null; // 页面关闭需要设置为null防止内存溢出
        });
    }
    }
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18

    测试运行

    在这里插入图片描述

    打开超链接

    默认的超链接是会在窗口中打开,类似如下

    在这里插入图片描述

    我们可能需要的是 点击超链接时,在浏览器中打开网页

    在button.js中编写如下

    // 超链接 在浏览器中打开
var {shell} = require('electron');
const buttonFour = document.getElementById('button-four');
buttonFour.onclick = function (e) {
    e.preventDefault(); // 阻止默认行为
    var href = this.getAttribute('href');
    shell.openExternal(href); //在默认浏览器中打开超链接
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8

    自定义顶部菜单

    在这里插入图片描述

    我们可以自定义顶部菜单

    在main.js中进行如下编写

    // 客户端顶部菜单
const {Menu} = require('electron');
const template = [
    {
        label: '金足印象',
        submenu: [
            {
                label: '金品SPA',
                accelerator: 'ctrl+n', // 绑定快捷键
                click: () => { // 菜单事件
                    var win = new BrowserWindow({
                        width: 1000,
                        height: 700,
                        title: "第二个页面"
                    });
                    win.loadFile("src/index2.html");
                    win.on('closed', function () {
                        win = null;
                    });
                }
            },
            {label: '泰式按摩'}
        ]
    },
    {
        label: '斗鱼网咖',
        submenu: [
            {label: '网费充值'}
        ]
    }
]
const menu = Menu.buildFromTemplate(template);
Menu.setApplicationMenu(menu);

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33

    自定义鼠标右键菜单

    由于我们是在index.html页面中鼠标右键打开菜单,所以需要在button.js中进行编写

    // 鼠标右键打开菜单
const remote = require('@electron/remote')
const m = [
    {
        label: '粘贴'
    },
    {
        label: '复制'
    }
]
const mm = remote.Menu.buildFromTemplate(m);
// 鼠标右击事件
window.addEventListener('contextmenu', function (e) {
    e.preventDefault(); // 阻止默认行为
    mm.popup({window: remote.getCurrentWindow()})
});

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16

    在这里插入图片描述

    嵌入网页

    打开第二个页面的时候嵌入网页

    在button.js中编写

    const buttontTow = document.getElementById("button-two");
const {BrowserWindow, BrowserView} = require('@electron/remote')
var newWin = null;
window.onload = function () {
    buttontTow.onclick = function () {
        newWin = new BrowserWindow({
            width: 1000,
            height: 700,
            title: "第二个页面"
        })
        newWin.loadFile("src/index2.html");
        // 嵌入网页
        var view = new BrowserView();
        newWin.setBrowserView(view);
        view.setBounds({
            x: 0,
            y: 120,
            width: 1000,
            height: 680
        });
        view.webContents.loadURL('https://www.baidu.com')
        newWin.on('closed', function () {
            newWin = null;
        });
    }
    }
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27

    在这里插入图片描述

  • 相关阅读:
    使用Blender编辑Character Creater 4的人物形象
    微信小程序-form表单-获取用户输入文本框的值
    LeetCode--HOT100题（48）
    Linux脚本之监控系统内存使用情况并给予警告
    高速DSP系统设计参考指南（五）印制电路板或PCB布局
    关于http测试总结
    认知电子战 | 无线电中的认知理论
    WebAPI文档与自动化测试
    R语言dplyr包intersect函数获取在两个dataframe中都存在的数据行、获取两个dataframe交叉的数据行
    代码泄漏无感知？代码安全审计构筑企业核心资产安全防线
  • 原文地址：https://blog.csdn.net/weixin_46684099/article/details/125521474