electron_笔记

已于 2023-04-22 14:51:15 修改
阅读量1.6k 收藏 3
点赞数
文章标签： electron 笔记 javascript
于 2023-04-19 00:59:05 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ice_stone_kai/article/details/130234629
版权

创建你的第一个应用:

package.json:

{
  "name": "my-electron-app",
  "version": "1.0.0",
  "description": "my demo",
  "main": "main.js",
  "scripts": {
    "dev": "electron .  --inspect=5858",
    "start": "electron-forge start",
    "package": "electron-forge package",
    "make": "electron-forge make",
    "win": "electron-builder --win --x64"
  },
  "author": "icestone",
  "license": "MIT",
  "devDependencies": {
    "@electron-forge/cli": "^6.1.1",
    "electron": "23.1.3",
    "electron-builder": "^23.6.0"
  },
  "win": {
    "icon": "icons/icon.ico",
    "target": [
      {
        "target": "nsis",
        "arch": [
          "x64",
          "ia32"
        ]
      }
    ]
  }
}

main.js

const path = require('path');
const {app, BrowserWindow, ipcMain} = require('electron');

const createWindow = () => {
    const win = new BrowserWindow({
        width: 1000,
        height: 900,
        webPreferences: {
            preload: path.join(__dirname, './preload.js'),
        },
    })
    require('./src/js/menu'),
    ipcMain.handle('ping', () => 'pong');
    win.loadFile('index.html');
}


// 下面两种监听都可以
/*app.whenReady().then(() => {
    createWindow()
})*/
app.on('ready', () => {
    createWindow()
})

//  监听关闭时调用
app.on('window-all-closed', () => {
    console.log('close window')
    if (process.platform !== 'darwin') app.quit()
})

index.html:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Hello World!</title>
    <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
</head>
<body>
<h1>Hello World!</h1>
<p>
    We are using Node.js <span id="node-version"></span>,
    Chromium <span id="chrome-version"></span>,
    and Electron <span id="electron-version"></span>.
</p>
</body>
</html>

run:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QVScXRef-1681837054112)(./images/1.png)]

监听一个窗口的关闭:
    win.on('close',function () {
        console.log('window is close!')
    })

它的完整代码应该是:

const path = require('path');
const {app, BrowserWindow, ipcMain} = require('electron');

const createWindow = () => {
    const win = new BrowserWindow({
        width: 1000,
        height: 900,
        webPreferences: {
            preload: path.join(__dirname, './preload.js'),
        },
    })
    ipcMain.handle('ping', () => 'pong');
    win.loadFile('index.html');
    win.on('close',function () {
        console.log('window is close!')
    })
}


// 下面两种监听都可以
/*app.whenReady().then(() => {
    createWindow()
})*/
app.on('ready', () => {
    createWindow()
})

//  监听关闭时调用
app.on('window-all-closed', () => {
    console.log('close window')
    if (process.platform !== 'darwin') app.quit()
})

electron的生命周期

生命周期事件:

  • ready

    • app初始化完成时调用一次

  • dom-ready

    • 一个窗口中的文本加载完成,此时可以执行dom操作

  • did-finsh-load

    • 导航完成时触发

  • window-all-closed

    • 所有窗口都被关闭时触发

  • before-quit

    • 在关闭窗口之前触发

  • will-quit

    • 在窗口关闭并且应用退出时触发

  • quit

    • 当所有窗口被关闭时触发

  • closed

    • 当所有窗口关闭时触发,此时应删除窗口引用

例如下面的main.js演示:

const path = require('path');
const {app, BrowserWindow, ipcMain} = require('electron');

const createWindow = () => {
    const win = new BrowserWindow({
        width: 1000,
        height: 900,
        webPreferences: {
            preload: path.join(__dirname, './preload.js'),
        },
    })
    ipcMain.handle('ping', () => 'pong');
    win.loadFile('index.html');

    win.webContents.on('did-finish-load', () => {
        console.log('did-finish-load');
    })
    win.webContents.on('dom-ready', () => {
        console.log('dom-ready');
    })

    win.on('close', function () {
        console.log('close')
    })
}


// 下面两种监听都可以
/*app.whenReady().then(() => {
    createWindow()
})*/
app.on('ready', () => {
    console.log('ready')
    createWindow()
});
//  监听关闭时调用
app.on('window-all-closed', () => {
    console.log('all close window')
    if (process.platform !== 'darwin') app.quit()
});
app.on('before-quit', function () {
    console.log('before-quit')
});
app.on('will-quit', function () {
    console.log('will-quit');
});
app.on('quit', function () {
    console.log('quit');
});

run:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JgKXwH8V-1681837054113)(./images/2.png)]

窗口尺寸设置

使用nodemon

package.json中的script:

  "scripts": {
    "dev": "electron .  --inspect=5858",
    "start": "electron .",
    "nodemon": "nodemon --main.js --exec npm run dev"
  },

这样就可以使用nodemon监听main.js的改动了

相关属性

每次打开窗口默认会在屏幕的中央进行显示,如果想要更改,可以在mian.js中使用x,y来更改:

const path = require('path');
const {app, BrowserWindow, ipcMain} = require('electron');

const createWindow = () => {
    const win = new BrowserWindow({
        x: 200,
        y: 200,
        width: 1000,
        height: 900,
        webPreferences: {
            preload: path.join(__dirname, './preload.js'),
        },
    })
    ipcMain.handle('ping', () => 'pong');
    win.loadFile('index.html');

    win.webContents.on('did-finish-load', () => {
        console.log('did-finish-load');
    })
    win.webContents.on('dom-ready', () => {
        console.log('dom-ready');
    })

    win.on('close', function () {
        console.log('close')
    })
}

// 下面两种监听都可以
/*app.whenReady().then(() => {
    createWindow()
})*/
app.on('ready', () => {
    console.log('ready')
    createWindow()
});
//  监听关闭时调用
app.on('window-all-closed', () => {
    console.log('all close window')
    if (process.platform !== 'darwin') app.quit()
});
app.on('before-quit', function () {
    console.log('before-quit')
});
app.on('will-quit', function () {
    console.log('will-quit');
});
app.on('quit', function () {
    console.log('quit');
});

然后他就更改了:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-VqgfTyUh-1681837054114)(./images/3.png)]

但是此时,可能会先出现窗口,白屏一瞬间之后再加载内容,那么此时就可以使用:show: false设置一下

const win = new BrowserWindow({
        show: false,
        x: 200,
        y: 200,
        width: 1000,
        height: 900,
        webPreferences: {
            preload: path.join(__dirname, './preload.js'),
        },
    })
    win.on("ready-to-show", function () {
        win.loadFile('index.html');
    })

这里监听了ready-to-show,在这个阶段才调用加载index.html

设置最大,最小尺寸
const win = new BrowserWindow({
        show: false,
        x: 200,
        y: 200,
        width: 1000,
        height: 900,
        maxHeight: 1000,
        maxWidth: 1100,
        minHeight: 500,
        minWidth: 1000
    })
固定尺寸

使用resizable:false:

const win = new BrowserWindow({
        show: false,
        x: 200,
        y: 200,
        width: 1000,
        height: 900,
        maxHeight: 1000,
        maxWidth: 1100,
        minHeight: 500,
        minWidth: 1000,
        resizable:false
    })
main设置界面内容
设置title
const win = new BrowserWindow({
        // show: false,
        x: 200,
        y: 200,
        width: 1000,
        height: 900,
        // 设置最大尺寸
        maxHeight: 1000,
        maxWidth: 1100,
        // 设置最小尺寸
        minHeight: 500,
        minWidth: 1000,
        // 禁止缩放窗口
        // resizable:false
        title:'在main.js中设置的title'
    })
  • 注意,此时在index.html的title应该为空
设置icon
const win = new BrowserWindow({
        // show: false,
        x: 200,
        y: 200,
        width: 1000,
        height: 900,
        // 设置最大尺寸
        maxHeight: 1000,
        maxWidth: 1100,
        // 设置最小尺寸
        minHeight: 500,
        minWidth: 1000,
        // 禁止缩放窗口
        // resizable:false
        title:'在main.js中设置的title',
        icon:'./lg.ico'
    })

如图:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GGvK5093-1681837054114)(./images/4.png)]

不显示默认的窗口和菜单

frame:false,默认为true

运行:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BWjYpzv0-1681837054115)(./images/5.png)]

那么此时窗口无法进行拖动

透明窗体

transparent: true

运行:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9wdKoXGV-1681837054115)(./images/6.png)]

隐藏menu
const win = new BrowserWindow({
        // show: false,
        x: 200,
        y: 200,
        width: 1000,
        height: 900,
        // 设置最大尺寸
        maxHeight: 1000,
        maxWidth: 1100,
        // 设置最小尺寸
        minHeight: 500,
        minWidth: 1000,
        // 禁止缩放窗口
        // resizable:false
        title: '在main.js中设置的title',
        icon: './lg.ico',
        // 不显示默认窗口和菜单
        // frame:false
        // 透明窗体
        // transparent: true
        // 隐藏menu
        autoHideMenuBar: true
    })
调试面板

ctrl+shift+i

允许渲染进程和nodejs交互

一般情况下,在index.html中引用的js文件是无法导入nodejs中的包的,例如下面的代码:

index.js:

const o = require('electron');

// dom加载完之后执行
window.addEventListener('DOMContentLoaded', function () {
// 点击打开一个新窗口
    const oBtn = document.getElementById('btn')
    oBtn.addEventListener('click', () => {
    })
})

在第一行导入了包,那么在应用的控制台中:

在这里插入图片描述

默认情况下是不允许渲染进程中的js直接和nodejs进行交互,那么在开发中想要和nodejs进行交互,可以在main.js中开启:

webPreferences: {
    nodeIntegration: true,
        contextIsolation
:
    false
}

完整的main.js:

const path = require('path');
const {app, BrowserWindow, ipcMain} = require('electron');

const createWindow = () => {
    const win = new BrowserWindow({
        x: 200,
        y: 200,
        width: 1000,
        height: 900,
        title: '在main.js中设置的title',
        icon: './lg.ico',
        autoHideMenuBar: true,
        webPreferences: {
            nodeIntegration: true,
            contextIsolation: false
        }
    })
    win.loadFile('index.html');
}

//  监听关闭时调用
app.on('window-all-closed', () => {
    console.log('all close window')
    if (process.platform !== 'darwin') app.quit()
});

然后就不会报错了

渲染进程中不可以使用主进程的一些对象

例如像下面,在渲染进程中使用了BrowserWindow,虽然可以导入,但是不被允许:

// BrowserWindow 是个主进程,虽然可以导入,但是在渲染进程中是不允许这样做的
const {BrowserWindow} = require('electron');
// dom加载完之后执行
window.addEventListener('DOMContentLoaded', function () {
// 点击打开一个新窗口
    const oBtn = document.getElementById('btn')
    oBtn.addEventListener('click', () => {
        let indexMin = new BrowserWindow({
            width: 1000,
            height: 900
        })
        indexMin.loadFile('../views/list.html');
        indexMin.on("close", () => {
            indexMin = null;
        })
    })
})

报错:

index.js:8 Uncaught TypeError: BrowserWindow is not a constructor
    at HTMLButtonElement.<anonymous> (index.js:8:24)
使用remote让渲染进程使用BrowserWindow

main.js中的主要代码:

const remote = require("@electron/remote/main") //1
remote.initialize()//2
remote.enable(win.webContents)//3

mian.js的完整代码:

const {app, BrowserWindow} = require('electron');
const remote = require("@electron/remote/main") //1
remote.initialize()//2

const createWindow = () => {
    const win = new BrowserWindow({
        x: 200,
        y: 200,
        width: 1000,
        height: 900,
        title: '在main.js中设置的title',
        icon: './lg.ico',
        autoHideMenuBar: true,
        webPreferences: {
            nodeIntegration: true,
            contextIsolation: false
        },
    })
    win.loadFile('index.html');
    remote.enable(win.webContents)//3
}

app.on('ready', () => {
    console.log('ready')
    createWindow()
});
//  监听关闭时调用
app.on('window-all-closed', () => {
    console.log('all close window')
    if (process.platform !== 'darwin') app.quit()
});

index.js:

// BrowserWindow 是个主进程,虽然可以导入,但是在渲染进程中是不允许这样做的
const {BrowserWindow} = require("@electron/remote");
console.log('当前路径')
console.log(__dirname)
// dom加载完之后执行
window.addEventListener('DOMContentLoaded', function () {
// 点击打开一个新窗口
    const oBtn = document.getElementById('btn')
    oBtn.addEventListener('click', () => {
        let indexMin = new BrowserWindow({
            width: 1000,
            height: 900
        })
        indexMin.loadFile('./src/views/list.html');
        indexMin.on("close", () => {
            indexMin = null;
        })
    })
})

要注意这里的引用:

const {BrowserWindow} = require("@electron/remote");

在这里插入图片描述

自定义窗口的实现
最小化,最大化,关闭的实现:

index.html:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!-- https://developer.mozilla.org/zh-CN/docs/Web/HTTP/CSP -->
    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">
    <title></title>
    <!--    <link rel="stylesheet/less" type="text/less" href="./src/css/index.less"/>-->
    <link rel="stylesheet" type="text/css" href="./src/css/index.css"/>
</head>
<body>
<div class="container">
    <div class="header">
        <div class="btn">minWindow</div>
        <div class="btn">maxWindow</div>
        <div class="btn">close</div>
    </div>

</div>

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

</body>
</html>

index.js:

// BrowserWindow 是个主进程,虽然可以导入,但是在渲染进程中是不允许这样做的
const {BrowserWindow, ipcMain, getCurrentWindow} = require("@electron/remote");
let mainWin = getCurrentWindow();

console.log('当前路径')
console.log(__dirname)
// dom加载完之后执行
window.addEventListener('DOMContentLoaded', function () {
// 点击打开一个新窗口
    const btns = document.getElementsByClassName('btn')
    const close = btns[2];
    const maxWindow = btns[1];
    const minWindow = btns[0];

    close.addEventListener('click', () => {
        console.log('关闭')
        mainWin.close();
    })
    maxWindow.addEventListener('click', () => {
        console.log('最大化')
        /*        console.log('是否为最大化')
                console.log(mainWin.isMaximizable());*/
        if (!mainWin.isMaximized()) {
            mainWin.maximize()
        } else {
            console.log('恢复尺寸')
            // 让当前窗口回到原始状态
            mainWin.restore();
        }
    })
    minWindow.addEventListener('click', () => {
        console.log('最小化')
        if (!mainWin.isMinimized()) {
            mainWin.minimize()
        } else {
            mainWin.restore();
        }
    })
})
阻止窗口关闭

监听窗口关闭之前的状态:

index.js:

// BrowserWindow 是个主进程,虽然可以导入,但是在渲染进程中是不允许这样做的
const {BrowserWindow, ipcMain, getCurrentWindow} = require("@electron/remote");
let mainWin = getCurrentWindow();

console.log('当前路径')
console.log(__dirname)
// dom加载完之后执行
window.addEventListener('DOMContentLoaded', function () {
    window.onbeforeunload = function () {
        console.log('关闭窗口')
        return false;
    }

// 点击打开一个新窗口
    const btns = document.getElementsByClassName('btn')
    const close = btns[2];
    const maxWindow = btns[1];
    const minWindow = btns[0];

    close.addEventListener('click', () => {
        console.log('关闭')
        mainWin.close();
    })
    maxWindow.addEventListener('click', () => {
        console.log('最大化')
        /*console.log('是否为最大化')
                console.log(mainWin.isMaximizable());*/
        if (!mainWin.isMaximized()) {
            mainWin.maximize()
        } else {
            console.log('恢复尺寸')
            // 让当前窗口回到原始状态
            mainWin.restore();
        }
    })
    minWindow.addEventListener('click', () => {
        console.log('最小化')
        if (!mainWin.isMinimized()) {
            mainWin.minimize()
        } else {
            mainWin.restore();
        }
    })
})

index.html:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">
    <title></title>
    <link rel="stylesheet" type="text/css" href="./src/css/index.css"/>
</head>
<body>
<div class="container">
    <div class="header">
        <div class="btn">minWindow</div>
        <div class="btn">maxWindow</div>
        <div class="btn">close</div>
    </div>

</div>
<div class="alert">
    确认关闭?
    <button class="close">yes!</button>
    <button class="notClose">no!</button>
</div>
<script src="./index.js"></script>
</body>
</html>

这里主要是index.js中的:

    window.onbeforeunload = function () {
    console.log('关闭窗口')
    return false;
}
弹窗控制窗口关闭与否:

index.html:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">
    <title></title>
    <link rel="stylesheet" type="text/css" href="./src/css/index.css"/>
</head>
<body>
<div class="container">
    <div class="header">
        <div class="btn">minWindow</div>
        <div class="btn">maxWindow</div>
        <div class="btn">close</div>
    </div>
</div>
<div class="alert">
    确认关闭?
    <button class="close">yes!</button>
    <button class="notClose">no!</button>
</div>
<script src="./index.js"></script>
</body>
</html>

index.css:

.container {
    display: flex;
    flex-direction: column;
}

.header {
    display: flex;
    width: 100%;
    flex-direction: row;
    justify-content: end;
    background: #8c8c73;
}

.header div {
    padding-right: 20px;
}

body {
    background-image: linear-gradient(to top, #cfd9df 0%, #e2ebf0 100%);
}

.alert {
    display: none;
}

index.js:

// BrowserWindow 是个主进程,虽然可以导入,但是在渲染进程中是不允许这样做的
const {BrowserWindow, ipcMain, getCurrentWindow} = require("@electron/remote");
let mainWin = getCurrentWindow();

console.log('当前路径')
console.log(__dirname)
// dom加载完之后执行
window.addEventListener('DOMContentLoaded', function () {
    window.onbeforeunload = function () {
        console.log('关闭窗口')
        const alert = document.getElementsByClassName('alert')[0];
        alert.style.display = 'flex';
        const yesBtn = document.getElementsByClassName('close')[0];
        const noBtn = document.getElementsByClassName('notClose')[0];
        yesBtn.addEventListener('click', () => {
            mainWin.destroy();
        })
        noBtn.addEventListener('click', () => {
            alert.style.display = 'none';
        })
        return false;
    }

// 点击打开一个新窗口
    const btns = document.getElementsByClassName('btn')
    const close = btns[2];
    const maxWindow = btns[1];
    const minWindow = btns[0];

    close.addEventListener('click', () => {
        console.log('关闭')
        mainWin.close();
    })
    maxWindow.addEventListener('click', () => {
        console.log('最大化')
        /*console.log('是否为最大化')
                console.log(mainWin.isMaximizable());*/
        if (!mainWin.isMaximized()) {
            mainWin.maximize()
        } else {
            console.log('恢复尺寸')
            // 让当前窗口回到原始状态
            mainWin.restore();
        }
    })
    minWindow.addEventListener('click', () => {
        console.log('最小化')
        if (!mainWin.isMinimized()) {
            mainWin.minimize()
        } else {
            mainWin.restore();
        }
    })
})

main.js:

const {app, BrowserWindow} = require('electron')
const path = require('path')
const remote = require("@electron/remote/main") //1
remote.initialize()//2
const createWindow = () => {
    const win = new BrowserWindow({
        width: 800,
        height: 600,
        frame: false,
        webPreferences: {
            nodeIntegration: true,
            contextIsolation: false
        }
    })
    win.loadFile('index.html')
    win.on('close', function () {
        console.log('close')
    })
    remote.enable(win.webContents)//3
}
app.whenReady().then(() => {
    createWindow()
    app.on('activate', () => {
        if (BrowserWindow.getAllWindows().length === 0) createWindow()
    })
})
app.on('window-all-closed', () => {
    if (process.platform !== 'darwin') app.quit()
})
父子及模态窗口

一般情况下创建的子窗口,在操作子窗口时,父窗口依旧可以操作:

main.js:

const {app, BrowserWindow} = require('electron')
//1
const remote = require("@electron/remote/main")
//2
remote.initialize()

const createWindow = () => {
    // 创建浏览窗口
    const win = new BrowserWindow({
        width: 800,
        height: 600,
        title: '子窗口及模态窗口',
        webPreferences: {
            nodeIntegration: true,
            contextIsolation: false
        }
    })

    // 加载 index.html
    win.loadFile('index.html')
    //3
    remote.enable(win.webContents)

    // 打开开发工具
    // mainWindow.webContents.openDevTools()
}

// 这段程序将会在 Electron 结束初始化
// 和创建浏览器窗口的时候调用
// 部分 API 在 ready 事件触发后才能使用。
app.whenReady().then(() => {
    createWindow()
    app.on('activate', () => {
        // 在 macOS 系统内, 如果没有已开启的应用窗口
        // 点击托盘图标时通常会重新创建一个新窗口
        if (BrowserWindow.getAllWindows().length === 0) createWindow()
    })
})

app.on('window-all-closed', () => {
    if (process.platform !== 'darwin') app.quit()
})

index.html:

<!--index.html-->
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">
    <title></title>
</head>
<body>

<div class="container">
    <button id="btn">新增窗口</button>

</div>
<script src="./index.js"></script>
</body>
</html>

index.js:

const {BrowserWindow, getCurrentWindow} = require("@electron/remote");
let mainWin = getCurrentWindow();
window.addEventListener('DOMContentLoaded', () => {
    const btn = document.getElementById("btn");
    btn.addEventListener('click', () => {
        let subWin = new BrowserWindow({
            parent: mainWin,
            width: 1000,
            height: 900
        })
        subWin.loadFile('sub.html')
        subWin.on('close', () => {
            subWin = null;
        })
    })
})

run:

在这里插入图片描述

此时是可以拖动父窗口的

但是使用模态窗口就可以避免这个问题,

模态窗口

main.js:

const {app, BrowserWindow} = require('electron')
//1
const remote = require("@electron/remote/main")
//2
remote.initialize()

const createWindow = () => {
    // 创建浏览窗口
    const win = new BrowserWindow({
        width: 800,
        height: 600,
        title: '子窗口及模态窗口',
        webPreferences: {
            nodeIntegration: true,
            contextIsolation: false
        }
    })

    // 加载 index.html
    win.loadFile('index.html')
    //3
    remote.enable(win.webContents)

    // 打开开发工具
    // mainWindow.webContents.openDevTools()
}

// 这段程序将会在 Electron 结束初始化
// 和创建浏览器窗口的时候调用
// 部分 API 在 ready 事件触发后才能使用。
app.whenReady().then(() => {
    createWindow()
    app.on('activate', () => {
        // 在 macOS 系统内, 如果没有已开启的应用窗口
        // 点击托盘图标时通常会重新创建一个新窗口
        if (BrowserWindow.getAllWindows().length === 0) createWindow()
    })
})
app.on('window-all-closed', () => {
    if (process.platform !== 'darwin') app.quit()
})

index.html:

<!--index.html-->
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">
    <title></title>
</head>
<body>

<div class="container">
    <button id="btn">新增窗口</button>

</div>
<script src="./index.js"></script>
</body>
</html>

index.js:

const {BrowserWindow, getCurrentWindow} = require("@electron/remote");
let mainWin = getCurrentWindow();
window.addEventListener('DOMContentLoaded', () => {

    const btn = document.getElementById("btn");
    btn.addEventListener('click', () => {
        let subWin = new BrowserWindow({
            parent: mainWin,
            width: 1000,
            height: 900,
            modal: true
        })
        subWin.loadFile('sub.html')
        subWin.on('close', () => {
            subWin = null;
        })
    })
})

run:

在这里插入图片描述

注意,这里主要起作用的是index.js的:

modal: true
自定义菜单
自定义一个简单的菜单
const {app, BrowserWindow, Menu} = require('electron')
//1
const remote = require("@electron/remote/main")
//2
remote.initialize()
const createWindow = () => {
    // 创建浏览窗口
    const win = new BrowserWindow({
        width: 800,
        height: 600,
        title: '自定义菜单',
        webPreferences: {
            nodeIntegration: true,
            contextIsolation: false
        }
    })
    // 1.定义自己需要的菜单
    let menuMap = [
        {label: '文件'},
        {label: '编辑'},
    ];
    // 2.利用上面的模板构建菜单项:
    let menu = Menu.buildFromTemplate(menuMap);
    // 3.将上述的自定义菜单添加到应用
    Menu.setApplicationMenu(menu);
    win.loadFile('index.html')
    //3
    remote.enable(win.webContents)
}
app.whenReady().then(() => {
    createWindow()
    app.on('activate', () => {
        if (BrowserWindow.getAllWindows().length === 0) createWindow()
    })
})
app.on('window-all-closed', () => {
    if (process.platform !== 'darwin') app.quit()
})

主要分三步:

  • 定义你的菜单,数组,需要在之前引入Menu:const {app, BrowserWindow, Menu} = require('electron')
// 1.定义自己需要的菜单
let menuMap = [
    {label: '文件'},
    {label: '编辑'},
];
  • 利用上面的模板构建菜单项:
let menu = Menu.buildFromTemplate(menuMap);
  • 将上述的自定义菜单添加到应用
// 3.将上述的自定义菜单添加到应用
Menu.setApplicationMenu(menu);
win.loadFile('index.html')
菜单的点击以及二级菜单
const {app, BrowserWindow, Menu} = require('electron')
//1
const remote = require("@electron/remote/main")
//2
remote.initialize()
const createWindow = () => {
    // 创建浏览窗口
    const win = new BrowserWindow({
        width: 800,
        height: 600,
        title: '自定义菜单',
        webPreferences: {
            nodeIntegration: true,
            contextIsolation: false
        }
    })
    // 1.定义自己需要的菜单
    let menuMap = [
        {
            label: '文件',
            submenu: [
                {
                    label: '打开文件夹',
                    click() {
                        console.log('open someone dir')
                    }
                },
                {
                    label: '打开文件'
                },
                {
                    label: '关于',
                    role: 'about'
                }
            ]
        },
        {label: '编辑'},
    ];
    // 2.利用上面的模板构建菜单项:
    let menu = Menu.buildFromTemplate(menuMap);
    // 3.将上述的自定义菜单添加到应用
    Menu.setApplicationMenu(menu);
    // 加载 index.html
    win.loadFile('index.html')
    //3
    remote.enable(win.webContents)
}
app.whenReady().then(() => {
    createWindow()
    app.on('activate', () => {
        if (BrowserWindow.getAllWindows().length === 0) createWindow()
    })
})

app.on('window-all-closed', () => {
    if (process.platform !== 'darwin') app.quit()
})

这里主要是menuMap发生变化,里面存储的click函数,在文件中定义的有其他的二级菜单

定义菜单之间的分割线
let menuMap = [
    {
        label: '文件',
        submenu: [
            {
                label: '打开文件夹',
                click() {
                    console.log('open someone dir')
                }
            },
            // 分割线
            {
                type: 'separator'
            },
            {
                label: '打开文件',
            },
            {
                label: '关于',
                role: 'about'
            }
        ]
    },
    {label: '编辑'},
];

例如上面的,传入type`的值表示不同的分割线

角色菜单以及类型
菜单中的内置角色
let menuMap = [
    {
        label: '内置角色',
        submenu: [
            {
                label: '复制',
                role: 'copy'
            },
            {
                label: '剪贴',
                role: 'cut'
            },
            {
                label: '粘贴',
                role: 'paste'
            },
            {
                label: '最小化',
                role: 'minimize'
            }
        ]
    }];
菜单中的选项卡:
let menuMap = [
    {
        label: '类型',
        submenu: [
            {
                label: '选项1',
                type: 'checkbox'
            },
            {
                label: '选项2',
                type: 'checkbox'
            },
            {
                label: '选项3',
                type: 'checkbox'
            },
            {
                type: 'separator'
            },
            {
                label: 'item1',
                type: 'radio'
            },
            {
                label: 'item2',
                type: 'radio'
            },
            {
                type: 'separator'
            },
            {
                label: 'windows',
                type: 'submenu',
                role: 'windowMenu'
            }
        ]
    }]
快捷键
let menuMap = [
    {
        label: '其他',
        submenu: [
            {
                label: '打开',
                icon: './open.png',
                accelerator: 'ctrl+o',
                click() {
                    console.log('open操作执行了!')
                }
            },
        ]
    }
]


在这里插入图片描述
在这里插入图片描述

动态创建菜单

main.js:

const {app, BrowserWindow} = require('electron')
//1
const remote = require("@electron/remote/main")
//2
remote.initialize()

const createWindow = () => {
    // 创建浏览窗口
    const win = new BrowserWindow({
        width: 800,
        height: 600,
        title: 'demo页面',
        webPreferences: {
            nodeIntegration: true,
            contextIsolation: false
        }
    })

    // 加载 index.html
    win.loadFile('index.html')
    //3
    remote.enable(win.webContents)

    // 打开开发工具
    // mainWindow.webContents.openDevTools()
}

// 这段程序将会在 Electron 结束初始化
// 和创建浏览器窗口的时候调用
// 部分 API 在 ready 事件触发后才能使用。
app.whenReady().then(() => {
    createWindow()
    app.on('activate', () => {
        // 在 macOS 系统内, 如果没有已开启的应用窗口
        // 点击托盘图标时通常会重新创建一个新窗口
        if (BrowserWindow.getAllWindows().length === 0) createWindow()
    })
})

app.on('window-all-closed', () => {
    if (process.platform !== 'darwin') app.quit()
})

index.html:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">
    <title></title>
</head>
<body>
<h1>自定义菜单</h1>
<div class="container">
    <button id="add">创建自定义菜单</button>
    <input type="text" value="输入自定义菜单项内容" id="menuVal">
    <button id="addMenu">添加菜单项</button>

</div>
<script src="./index.js"></script>
</body>
</html>

index.js:

const {BrowserWindow, Menu, MenuItem} = require("@electron/remote");

console.log('当前路径')
console.log(__dirname)
// 自定义全局变量
let menuItem = new Menu();

window.addEventListener('DOMContentLoaded', () => {
    let addBtn = document.getElementById('add');
    let addMenuBtn = document.getElementById('addMenu');
    let input = document.getElementById('menuVal');

// 生成自定义的菜单:
    addBtn.addEventListener('click', () => {
// 创建菜单
        let menuFile = new MenuItem({label: '文件', type: 'normal'});
        let menuEdit = new MenuItem({label: '编辑', type: 'normal'});
        let customMenu = new MenuItem({label: '自定义菜单', submenu: menuItem});
// 将创建好的菜单添加至menu
        let menu = new Menu();
        menu.append(menuFile)
        menu.append(menuEdit)
        menu.append(customMenu)
// 将menu放置于app中显示
        Menu.setApplicationMenu(menu);
    })

    addMenuBtn.addEventListener('click', () => {
        // 获取当前input输入框的内容
        const con = input.value.trim();
        if (con) {
            menuItem.append(new MenuItem({
                label: con, type: 'normal'
            }))
            input.value = '';
        }
    })
})

运行:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mTkUeX0D-1682146115361)(./images/14.png)]

右键菜单

mian.js:

const {app, BrowserWindow} = require('electron')
//1
const remote = require("@electron/remote/main")
//2
remote.initialize()

const createWindow = () => {
    // 创建浏览窗口
    const win = new BrowserWindow({
        width: 800,
        height: 600,
        title: '右键菜单',
        webPreferences: {
            nodeIntegration: true,
            contextIsolation: false
        }
    })

    // 加载 index.html
    win.loadFile('index.html')
    //3
    remote.enable(win.webContents)

    // 打开开发工具
    // mainWindow.webContents.openDevTools()
}

// 这段程序将会在 Electron 结束初始化
// 和创建浏览器窗口的时候调用
// 部分 API 在 ready 事件触发后才能使用。
app.whenReady().then(() => {
    createWindow()
    app.on('activate', () => {
        // 在 macOS 系统内, 如果没有已开启的应用窗口
        // 点击托盘图标时通常会重新创建一个新窗口
        if (BrowserWindow.getAllWindows().length === 0) createWindow()
    })
})

app.on('window-all-closed', () => {
    if (process.platform !== 'darwin') app.quit()
})

index.html:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">
    <title></title>
</head>
<body>
<h1>你好!</h1>
<div class="container">

</div>
<script src="./index.js"></script>
</body>
</html>

index.js:

const {Menu, getCurrentWindow} = require("@electron/remote");
const remote = require("@electron/remote/main")
let mainWin = getCurrentWindow();


// 创建一个自定义的菜单内容
let contextTemp = [
    {label: 'Run Code'},
    {label: '转到定义'},
    {type: 'separator'},
    {
        label: '其他功能',
        click() {
            console.log('其他功能被点击了')
        }
    },
]
// 依据上面模板来创建menu
let menu = Menu.buildFromTemplate(contextTemp);

// 在鼠标右击行为后显示出来
window.addEventListener('DOMContentLoaded', () => {
// 监听右击
    window.addEventListener('contextmenu', (ev) => {
        ev.preventDefault();
        menu.popup({
            window: mainWin
        })
    }, false)
})

运行:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-33wfz8tb-1682146115361)(./images/15.png)]

主进程与渲染进程之间通讯

监听页面元素点击,渲染进程向主进程发消息:

渲染进程向主进程发送消息

index.html

<button id="one">渲染到主异步操作</button>
    <br>
    <button id="two">渲染到主同步操作</button>

index.js

const {
    ipcRenderer
} = require('electron')

window.onload = function () {
    const aBtn = document.getElementById('one');
    const twoBtn = document.getElementById('two');
// 异步发送消息
// 通过异步api在渲染进程中给主进程发送消息
    aBtn.addEventListener('click', () => {
        ipcRenderer.send('msg1', '来自渲染进程的异步消息');
    })
// 接收来自主进程的异步消息
    ipcRenderer.on('msg1Re', (ev, data) => {
        console.log('来自主进程的data:')
        console.log(data)
    })
// 同步发送消息
    twoBtn.addEventListener('click', () => {
        let val = ipcRenderer.sendSync('msg2', '同步消息')
        console.log("val:")
        console.log(val)
    })
}

main.js

const {app, BrowserWindow, ipcMain, Menu} = require('electron')
//1
const remote = require("@electron/remote/main")
//2
remote.initialize()

let temp = [
    {
        label: 'send',
        click() {
            BrowserWindow.getFocusedWindow().webContents.send('mtp','来自于主进程的消息')
        }
    }
]
let menu = Menu.buildFromTemplate(temp);
Menu.setApplicationMenu(menu);

const createWindow = () => {
    // 创建浏览窗口
    const win = new BrowserWindow({
        width: 800,
        height: 600,
        title: '主进程与渲染进程之间通讯',
        webPreferences: {
            nodeIntegration: true,
            contextIsolation: false
        }
    })

    // 加载 index.html
    win.loadFile('index.html')
    win.webContents.openDevTools();
    //3
    remote.enable(win.webContents)

    // 打开开发工具
    // mainWindow.webContents.openDevTools()
}

// 这段程序将会在 Electron 结束初始化
// 和创建浏览器窗口的时候调用
// 部分 API 在 ready 事件触发后才能使用。
app.whenReady().then(() => {
    createWindow()
    app.on('activate', () => {
        // 在 macOS 系统内, 如果没有已开启的应用窗口
        // 点击托盘图标时通常会重新创建一个新窗口
        if (BrowserWindow.getAllWindows().length === 0) createWindow()
    })
})

app.on('window-all-closed', () => {
    if (process.platform !== 'darwin') app.quit()
})

// 主进程接受消息
ipcMain.on('msg1', (ev, data) => {
    console.log('data:')
    console.log(data)
// 给渲染进程发送消息
    ev.sender.send('msg1Re', '这是一条来自主进程的异步消息')
})
ipcMain.on('msg2', (ev, data) => {
    console.log(data)
    ev.returnValue = '来自于主进程的同步消息'
})

上面代码中主要是ipcMain.on来接收渲染进程发送来的消息

主进程接收消息后向渲染进程发送消息

主进程可以这样接收并返回:

ipcMain.on('msg1', (ev, data) => {
    console.log('data:')
    console.log(data)
	// 给渲染进程发送消息
    ev.sender.send('msg1Re', '这是一条来自主进程的异步消息')
})
ipcMain.on('msg2', (ev, data) => {
    console.log(data)
    // 给渲染进程发送消息
    ev.returnValue = '来自于主进程的同步消息'
})

渲染进程的接收:

 ipcRenderer.on('msg1Re', (ev, data) => {
        console.log('来自主进程的data:')
        console.log(data)
    })
// 同步发送消息
    twoBtn.addEventListener('click', () => {
        let val = ipcRenderer.sendSync('msg2', '同步消息')
        console.log("val:")
        console.log(val)
    })

上面的代码中,渲染进程向主进程发送消息,并接收

主线程向渲染进程发送消息

主线程:

let temp = [
    {
        label: 'send',
        click() {
            BrowserWindow.getFocusedWindow().webContents.send('mtp','来自于主进程的消息')
        }
    }
]
let menu = Menu.buildFromTemplate(temp);
Menu.setApplicationMenu(menu);

上面的代码中,设置了一个点击事件,点击触发向当前获取焦点的窗口发送消息

渲染进程:

    ipcRenderer.on('mtp', (ev, data) => {
        console.log(data)
    })

完成代码:

main.js

const {app, BrowserWindow, ipcMain, Menu} = require('electron')
//1
const remote = require("@electron/remote/main")
//2
remote.initialize()

let temp = [
    {
        label: 'send',
        click() {
            BrowserWindow.getFocusedWindow().webContents.send('mtp','来自于主进程的消息')
        }
    }
]
let menu = Menu.buildFromTemplate(temp);
Menu.setApplicationMenu(menu);

const createWindow = () => {
    // 创建浏览窗口
    const win = new BrowserWindow({
        width: 800,
        height: 600,
        title: '主进程与渲染进程之间通讯',
        webPreferences: {
            nodeIntegration: true,
            contextIsolation: false
        }
    })

    // 加载 index.html
    win.loadFile('index.html')
    win.webContents.openDevTools();
    //3
    remote.enable(win.webContents)

    // 打开开发工具
    // mainWindow.webContents.openDevTools()
}

// 这段程序将会在 Electron 结束初始化
// 和创建浏览器窗口的时候调用
// 部分 API 在 ready 事件触发后才能使用。
app.whenReady().then(() => {
    createWindow()
    app.on('activate', () => {
        // 在 macOS 系统内, 如果没有已开启的应用窗口
        // 点击托盘图标时通常会重新创建一个新窗口
        if (BrowserWindow.getAllWindows().length === 0) createWindow()
    })
})

app.on('window-all-closed', () => {
    if (process.platform !== 'darwin') app.quit()
})

// 主进程接受消息
ipcMain.on('msg1', (ev, data) => {
    console.log('data:')
    console.log(data)
// 给渲染进程发送消息
    ev.sender.send('msg1Re', '这是一条来自主进程的异步消息')
})
ipcMain.on('msg2', (ev, data) => {
    console.log(data)
    ev.returnValue = '来自于主进程的同步消息'
})

index.js

const {
    ipcRenderer
} = require('electron')

window.onload = function () {
    const aBtn = document.getElementById('one');
    const twoBtn = document.getElementById('two');
// 异步发送消息
// 通过异步api在渲染进程中给主进程发送消息
    aBtn.addEventListener('click', () => {
        ipcRenderer.send('msg1', '来自渲染进程的异步消息');
    })
// 接收来自主进程的异步消息
    ipcRenderer.on('msg1Re', (ev, data) => {
        console.log('来自主进程的data:')
        console.log(data)
    })
// 同步发送消息
    twoBtn.addEventListener('click', () => {
        let val = ipcRenderer.sendSync('msg2', '同步消息')
        console.log("val:")
        console.log(val)
    })
    ipcRenderer.on('mtp', (ev, data) => {
        console.log(data)
    })
}

index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">
    <title></title>
</head>
<body>
<h1>渲染进程与主进程通信</h1>
<div class="container">
    <button id="one">渲染到主异步操作</button>
    <br>
    <button id="two">渲染到主同步操作</button>
</div>
<script src="./index.js"></script>
</body>
</html>
基于本地存储的渲染进程通信

​

无名之辈无名之辈
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
electron_memo
05-19
电子记忆 稍微使用Electron时要写笔记。 什么是电子？ 您可以在其中使用HTML，CSS和JavaScript创建桌面应用程序的环境。 与Windows，Mac和Linux兼容。 Electron使用Chromium和Node.js来实现跨平台。 安装 假设已安装Node.js。 $ npm -g install electron-prebuilt app01_helloworld $ cd ~/work/ $ git pull https://github.com/yoggy/electron_memo.git $ cd electron_memo/app01_helloworld $ electron . 入口点是package.json的“ main”中描述的js文件。 { "name" : "app01_helloworld", "versio
初学Electron笔记(一）
02-20
初学Electron笔记(一）
electron +vue自定义点击最大化、最小化和关闭窗口事件功能
最新发布
2401_83946196的博客
04-01 625
图标 效果如下（此时已具备最小化、最大化、恢复以及关闭当前窗口的功能）：二、使用和ipcMain模块发送消息，让主进程、渲染进程通信；在渲染进程给主进程发消息，通知主进程我要进行什么操作在渲染进程中通过ipcRender模块给主进程发送信息；主进程中接收渲染进程的消息，并调用函数，进行相应的操作。frame: false,//通过设置frame的值为false可以隐藏窗口的边框。/* if (!*/} else {
electron electron-vue放大、缩小、关闭、恢复窗口大小
weixin_43294560的博客
09-13 7457
方式一: import {remote} from 'electron' 缩小: remote.getCurrentWindow().minimize(); 放大: remote.getCurrentWindow().maximize(); 判断是否处于最大化: remote.getCurrentWindow().isMaximized() 恢复： remote.getCurrentWindow().restore(); 关闭: remote.getC
electron+vite+vue+ts项目搭建(二)-关闭窗口提示信息,最小化托盘及右键菜单
wz121341的博客
08-16 332
index.ts文件下新增。
electron实现桌面端隐藏到托盘
热门推荐
不忘初心
07-07 1万+
最近学习了下electron，需要实现一个托盘功能，下面是我的实现，如果有更好的实现方法，希望大佬指正下 下面是项目地址:码云项目地址 我们首先要了解一下托盘功能，只有了解了托盘才能更好地写代码实现它。 1.首先我们需要我们的的桌面程序在右下角也就是系统通知区添加图标和上下文菜单，这部分我们可以用Tray部分的API实现：官网Tray方面的API 2.其次我们现在可以实现下方系统通知区的功...
electron关闭窗口
weixin_40679578的博客
05-19 9484
关闭子窗口的方法大体流程如下： 1、在渲染进程（子窗口）中通过点击“关闭”按钮事件，通知主进程 ipcRenderer.send("close"); 2、主进程收到通知后执行close方法 ipcMain.on('close', () => { win && win.close(); }); 3、在创建窗口的时候，可以给他添加close的回调监听；调用close的方法后就会进入这里的回调 const win = new BrowserWindow() win.on('clos
Electron实现自定义最大化最小化关闭窗口功能
weixin_56295520的博客
07-17 2177
创建窗口时设置frame属性为false，即创建一个无边框的窗口，不使用Electron自带的框架，那么如何在渲染进程中通知主进程进行窗口的操作？详见代码如下。
Electron生命周期
m0_38066007的博客
01-29 1842
1 1
Electron加载网页失败，监听事件处理
饮尽鸿爪下的雪泥的博客
03-23 4548
1. 问题提出 在使用electronjs打包桌面软件的时候，如果启动软件之后，网络不通的情况下，加载网页失败，会显示白屏，在此情况下需要对加载网页失败的事件进行处理 2. 处理手段 2.1 监听did-finish-load事件 mainWindow.webContents.on('did-finish-load', () => { console.log('finish') }) did-finish-load事件，无论网页加载成功或者失败都会调用 2.2 监听did-
定制Electron窗口关闭行为，阻止默认事件与自定义逻辑
SailingCoder的博客
12-19 1192
在关闭事件中，你可以执行各种自定义逻辑，例如询问用户是否真的要关闭应用。// 弹出确认对话框',});// 如果用户选择"Yes"，销毁窗口});在这个例子中，我们使用了方法弹出一个确认对话框，用户可以选择"Yes"或"No"。根据用户的选择，我们决定是否销毁窗口。通过阻止默认关闭事件并添加自定义逻辑，可以更好地控制Electron应用的关闭行为，提供更好的用户体验。
vue & element & electron MAC学习笔记
01-07
查看vue版本 vue --version 2. 下载安装vue cli , 命令行安装 sudo npm install -g @vue/cli # xcode 的CLI 工具 sudo xcode-select --install # 查看vue历史版本 npm view @vue/cli --versions --json ...
NotesApp:基于Electron构建的桌面应用程序，可记录笔记
05-25
一个基于Electron的桌面应用程序，可以记录笔记。 发展 该桌面应用程序是使用ElectronJs构建的，并且可以在能够运行沙盒化chrome窗口的所有桌面平台上运行。 该应用程序用HTML和CSS编写，并在VanillaJs的帮助下呈现...
youdao-note-electron:有道云笔记 electron 版，支持 Windows、Linux、Mac 平台。在网页版基础上，进行界面的优化，并支持切换日夜间模式
05-23
有道云笔记 electron 版，支持 Windows、Linux、Mac 平台。在网页版基础上，进行界面的优化，并支持切换日/夜间模式。 不知从什么时候开始，我使用 Windows 有道云笔记同步笔记内容的时候，经常出现下面这种情况： ...
Electron训练笔记
qq_40551957的博客
12-20 288
终端乱码解决办法：更改编号 下载卡住解决办法：Electron RequestError: connect ETIMEDOUT 20.205.243.166:443 electron本质是一个依赖库，改依赖库提供了部分对象，可以实现对于window的调用。 electron有一个主进程，多个渲染进程，一个预处理模块。 主进程是程序起点，负责执行预处理模块，启动渲染进程 预处理模块可以用于环境校验，提供全局变量等，可以阻塞主进程。 渲染进程就是网页进程。 进程之前相互隔离，通过ipc进行进程间通信 ipc的
electron关闭最小化_Electron.js如何最小化/关闭系统托盘的窗口并从托盘恢复窗口？...
weixin_39627201的博客
12-19 542
我希望我的Electron.js应用程序驻留在系统托盘上，并且每当用户要执行某项操作时，他们都可以从系统托盘中进行还原，则可以执行某些操作并将其最小化/关闭回系统托盘。我怎么做？我已经tray从文档中看到了这一部分，但是对于实现我想要的内容并没有多大帮助。这是我到目前为止在main.js文件上得到的var application = require('app'),BrowserWindow = r...
如何使用Electron实现一个托盘功能
小柒的前端之旅
03-18 3685
前面的话 我们身边有很多应用点击关闭按钮时，并不会真正的退出，而是隐藏到托盘。这篇文章介绍如何使用Electron实现一个托盘功能。 如何创建 当主进程监听关闭事件时，这时我们就可以开启托盘功能。我们需要使用Electron的两个模块Menu与Tray const electron = require('electron'); const Menu = electron.Menu; const T...
electron__桌面应用 笔记
weixin_42880952的博客
04-04 239
electron npm命令安装electron库 npm install electron --save-dev --save-exact 使用一个github的仓库模拟应用 git clone https://github.com/electron/electron-quick-start cd electron-quick-start npm install npm start elec...
构建第一个 Electron 桌面应用
yiyi_11的博客
04-06 1913
最近对electron有点感兴趣，那就动手试试呗，构建第一个 Electron 桌面应用！
ELECTRON_MIRROR说明
07-12
`ELECTRON_MIRROR`是一个环境变量，用于指定Electron框架的下载镜像源。Electron是一个用于构建跨平台桌面应用程序的开源框架，它使用Chromium和Node.js作为底层技术。 当你使用npm安装Electron时，默认情况下会从官方源下载Electron的二进制文件。如果你在某些网络环境下访问官方源较慢或被限制，可以通过设置`ELECTRON_MIRROR`环境变量来指定一个可用的镜像源。 你可以将`ELECTRON_MIRROR`设置为一个镜像源的URL，例如： ``` export ELECTRON_MIRROR="https://npm.taobao.org/mirrors/electron/" ``` 在上述示例中，`ELECTRON_MIRROR`被设置为淘宝镜像提供的Electron镜像源URL。这样，当你使用npm安装Electron时，npm会从指定的镜像源下载Electron的二进制文件。 需要注意的是，设置`ELECTRON_MIRROR`环境变量只会影响Electron的下载行为，对其他npm包的下载没有影响。在设置环境变量之前，你需要先确保所选的镜像源可用并且具有所需的Electron版本。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

无名之辈无名之辈

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值