electron 记录

已于 2022-11-24 09:52:47 修改
阅读量202 收藏 1
点赞数
分类专栏： js 文章标签： electron 前端 javascript
于 2022-11-17 17:20:28 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42112342/article/details/127905747
版权

一. 基础代码

1.创建 package.json 文件

npm init -y

2.安装 electron 

npm i electron -D

如果 提示 timeout 的错误，可以用淘宝镜像安装

sudo npm install -g cnpm --registry=https://registry.npmmirror.com    
cnpm i electron -D

3.创建 main.js 文件

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

const createWindow = () => {
    const win = new BrowserWindow({
        width: 1000,
        height: 800
    })
}

app.whenReady().then(createWindow);

4.package.json 文件中修改

"main": "main.js",
"scripts": {
    "start": "electron ."
 },

5.终端输入

npm start

6.安装 nodemon 便于更改后监听更新

cnpm i nodemon -D

7.package.json 文件中修改

"scripts": {
    "start": "nodemon --exec electron ."
 },

8.创建 index.html 文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    //这边是引入的js文件
    <script src="./renderer/app.js"></script>
<body>
    Hello
</body>
</html>

创建一个 app.js 文件并引入 

console.log(100)

在main.js 中打开开发者工具

//打开开发者工具
win.webContents.openDevTools()

9.在 index.html 中配置 CSP 关闭开发者工具中的警告

<meta http-equiv="Content-Security-Policy" content="default-src 'self' ; img-src 'self' data:; script-src 'self'; style-src 'self' 'unsafe-inline'">

二.进程通信

1.app.js

document.querySelector('#btn').addEventListener('click',()=>{
    console.log('点击')
    myApi.handleSend()
})

2.proload.js

const { contextBridge ,ipcRenderer } = require('electron')

const handleSend = async () => {
    let fallback = await ipcRenderer.invoke('send-event','hhhh')
    console.log('fallback:',fallback);

}

contextBridge.exposeInMainWorld('myApi',{
    platform:'process.platform',
    handleSend
})

3.main.js

const {app, BrowserWindow,ipcMain} = require('electron')
ipcMain.handle('send-event',(event,msg)=>{
    return msg
})

4.index.html

<button id="btn">send</button>

三.优雅的关闭重新打开窗口(再次打开默认恢复在上次关闭位置)

1.安装 electron-win-state

 cnpm i electron-win-state -S

2.main.js

const WinState = require('electron-win-state').default

const winState = new WinState({
    defaultWidth: 800,
    defaultHeight: 600,
})

const createWindow = () => {
    const win = new BrowserWindow({
        ...winState.winOptions,
        width: 1000, //这部分有些版本需要注释掉，不注释会没有效果
        height: 800,
    })

    winState.manage(win);
}

四.dialog

1.index.html

<div>Hello</div>

2.main.js

const {dialog} = require('electron')

wc.on('context-menu',(e,params)=>{


  //打开窗口
  dialog.showOpenDialog({
    buttonLabel: '选择',
    defaultPath: app.getPath('desktop'),
    properties: ['multiSelections','createDirectory','openFile','openDirectory']
  }).then((result) => {
    console.log('result:',result.filePaths)
  })


    //存储窗口
     dialog.showSaveDialog({}).then(result => {
         console.log('result:',result.filePath)
     })


        //显示一个 dialog
        const answers = ['Yes','No','Maybe']
        dialog.showMessageBox({
            title: 'Message Box',
            message: 'Please select an option',
            detail: 'Message details',
            buttons: answers
        }).then(({response}) => {
            console.log(`User selected: ${answers[response]}`)
        })
})

五.快捷键

main.js

const {globalShortcut} = require('electron')
const createWindow = () => {

     //快捷键
    globalShortcut.register('CommandOrControl+Y',()=>{
        console.log('CommandOrControl + Y');
        //注销快捷键
        globalShortcut.unregister('CommandOrControl+Y')
    })
}

六.菜单

main.js

const {Menu} = require('electron')

const mainMenu = Menu.buildFromTemplate([
    {
        label: 'electron',
        submenu: [
            {
                label: 'menu-1',
                submenu: [
                    {
                        label: 'submenu-1'
                    }
                ]
            },
            {
                label: 'menu-2',
            }
        ]
    },
    //使用系统提供的
    {
        label: 'Edit',
        submenu: [
            {role: 'undo'},
            {role: 'redo'},
            {role: 'copy'},
            {role: 'paste'},
        ]
    },
    {
        label: 'Action',
        submenu: [
            {
                label: 'DevTools', //打开or关闭开发者工具
                role: 'toggleDevTools'
            },
            {
                role: 'toggleFullScreen' //全屏or取消全屏
            },
            {
                label: 'Greet',
                click: () => {
                    console.log('100')
                },
                accelerator: 'Shift+Alt+G'//定义快捷键
            }
        ]
    }

])

const createWindow = () => {
    Menu.setApplicationMenu(mainMenu);
}

拆分传参数

mainMenu.js

const {Menu} = require('electron')

const mainMenu = (args,callback) => {
    return Menu.buildFromTemplate([
        {
            label: 'electron',
            submenu: [
                {
                    label: 'menu-1',
                    submenu: [
                        {
                            label: 'submenu-1'
                        }
                    ]
                },
                {
                    label: 'menu-2',
                }
            ]
        },
        //使用系统提供的
        {
            label: 'Edit',
            submenu: [
                {role: 'undo'},
                {role: 'redo'},
                {role: 'copy'},
                {role: 'paste'},
            ]
        },
        {
            label: 'Action',
            submenu: [
                {
                    label: 'DevTools', //打开or关闭开发者工具
                    role: 'toggleDevTools'
                },
                {
                    role: 'toggleFullScreen' //全屏or取消全屏
                },
                {
                    label: 'Greet',
                    click: () => {
                        console.log('args:',args);
                        callback('hello electron')
                    },
                    accelerator: 'Shift+Alt+G'//定义快捷键
                }
            ]
        }

    ])
}

module.exports = mainMenu

main.js

const mainMenu = require('./mainMenu')

const createWindow = () => {
    Menu.setApplicationMenu(mainMenu('我的消息窗口',(args)=>{
        console.log('main.js args',args)
    }));
}

七.托盘

tray.js

const {Tray,app,Menu} = require('electron')

function createTray(app,win) {
    const tray = new Tray('icon.png');
    tray.setToolTip('我的应用')
    tray.on('click',(e)=>{
        //按住 shift 键并单击托盘
        if (e.shiftKey) {
            app.quit()
        } else {
            win.isVisible() ? win.hide() : win.show();
        }
    })

    tray.setContextMenu(Menu.buildFromTemplate([
        {label: 'item1'},
        {
            label: 'item2',
            // click: () => {
            //     win.isVisible() ? win.hide() : win.show();
            // }
        },
    ]))
}

module.exports = createTray;

main.js

const createTray = require('./tray')

const createWindow = () => {

     //定义托盘
     createTray(app,win)
}

我的账号昵称
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
electron-window-state:一个库，用于存储和恢复您的Electron应用程序的窗口大小和位置
04-23
电子窗口状态 一个库，用于存储和恢复您的应用程序的窗口大小和位置 受的实施影响很大。 安装 $ npm install --save electron-window-state 用法 const windowStateKeeper = require ( 'electron-window-state' ) ; let win ; app . on ( 'ready' , function ( ) { // Load the previous state with fallback to defaults let mainWindowState = windowStateKeeper ( { defaultWidth : 1000 , defaultHeight : 800 } ) ; // Create the window using the state
Electron桌面开发入门
qq_37905131的博客
06-24 1350
main.js 主程序文件 node环境，能读写文件 renderer 渲染文件 有关页面渲染的都在这里，可以结合vue等框架 app.js //vue模板 index.html //窗口页面 style.css //窗口样式文件 preload-js 桥接文件 因为渲染程序和主程序直接传递消息有严重的安全隐患，所以要通过这里的’桥’文件,当工具人这里面重要的...
electron学习-01：lectron-win-state 窗口宽度/高度/位置缓存插件使用
weixin_46211267的博客
03-27 561
electron学习-01：lectron-win-state 窗口宽度/高度/位置缓存插件使用。
electron-window-state 保存窗口的状态
wandoumm的博客
01-04 1642
let win;});});});
Electron 如何创建模态窗口？
编程火箭车（Coding Rocket）专注编程领域
05-21 2291
模态框是一种常用的交互元素，无论是在 Web 网站、桌面应用还是移动 APP 中，都有其应用场景。
electron-screen-recorder:使用Electronjs进行屏幕记录的应用
05-28
App-electron.js 如何运行？ 要运行此项目，您必须具有 installed nodejs on your PC. You need to install also Electronjs npm install electron --save 遵循以下步骤 1st Step: Extract file 2st Step : ...
ty-study#mywiki#electron安装踩坑记录1
07-25
electron安装踩坑记录electron官网electron官方文档配置镜像找到C:\Users{用户名}.npmrc，添加自定义镜像安装electron安
基于Electron的鼠标键盘自动点击和记录回放软件
最新发布
04-17
基于Electron的鼠标键盘自动点击和记录回放软件，软件有点大，练手软件，但功能还算齐全，有键盘连按，鼠标连点击，记录鼠标键盘的操作并可以进行回放模拟点击，可以手动设置鼠标点击位置，键盘按键等等
electronic-log：只是适用于您的Electron应用程序的简单记录模块
02-04
只是适用于您的Electron或NW.js应用程序的简单日志记录模块。 没有依赖关系。 没有复杂的配置。 只是需要和使用。 另外，在任何node.js应用程序中，都可以在没有Electron的情况下使用它。 默认情况下，它将日志...
推荐开源项目：Electron-Window-State - 管理你的Electron应用窗口状态
gitblog_00099的博客
04-14 365
推荐开源项目：Electron-Window-State - 管理你的Electron应用窗口状态 项目地址:https://gitcode.com/mawie81/electron-window-state 在开发 Electron 应用时，我们经常会遇到一个问题：如何保存并恢复用户的窗口大小和位置？Electron-Window-State 是一个轻量级、易于使用的库，专门解决这个问题。 项目...
electron-windows:优雅地管理Electron的多个窗口并提供强大的功能
05-01
电子窗 优雅地管理Electron的多个窗口并提供强大的功能。 贡献者 此项目遵循git-contributor，该在Fri Dec 11 2020 11:31:32 GMT+0800自动更新。 分期付款 $ npm i electron-windows --save 演示版 蜜蜂 在里面 const WindowManager = require ( 'electron-windows' ) ; const windowManager = new WindowManager ( ) ; 创造 const winRef = windowManager . create ( { name : 'window1' , loadingView : { url : '' , } , browserWindow : { width : 800 , h
clippy:Clippy是用Electron制作的最小剪贴板历史记录管理器！
05-12
帅气！ :rocket: Clippy是使用 ， 和制作的最小剪贴板历史记录日志。 它既不存储也不同步剪贴板。 我无法展示我多么需要剪贴板日志。 我需要一个来构建一个。 我的一些项目可以在我的。 特征 这个项目是最小的。 功能包括： 跟踪复制的文本和图像！ 使用标签按文本或图像搜索条目 复制任何条目 从日志中删除条目 固定/书签条目到列表的顶部 清除日志（也可以清除系统的剪贴板） 仅清除系统的剪贴板（未更改历史记录） 在系统的默认浏览器中打开嵌入在复制文本中的链接 复制嵌入在复制文本中的链接 选择并删除多个条目 选择并复制多个文本条目 完整的键盘导航 在后台无缝下载更新，然后在需要时应用 自动更新 语法高亮显示代码 经常问的问题 版本控制 要npm version软件包版本，请使用NPM中的npm version 。 我建议也通过运行npm version patch -s -m "cho
3 - Electron app BrowserWindow对象-关于窗口
violetta521的博客
12-17 939
);});创建了两个互不相干的窗口});parent:win,//父窗口是win});当不属于父子窗口时，拖动哪个窗口哪个窗口置顶当属于父子窗口时，拖动窗口后，子窗口置顶，父窗口在下面。
Vue-Electron 多开,性能优化
qq_40602449的博客
04-19 1757
方法来管理创建的窗口。这会确保所有窗口都在同一个进程中运行，并且具有相同的状态。最后，我们加载应用程序的页面，并在窗口准备好之后将其显示出来。来创建多个窗口，每个窗口都会被当作一个独立的进程运行。创建了一个新的窗口，并将其属性保存在本地。你可以根据需要设置窗口的默认宽度和高度等属性。这样，我们就成功地防止了 Vue-Electron 应用程序多开窗口时出现很多进程的问题。模块来管理窗口状态，并确保所有窗口在同一个进程中运行。在 Vue-Electron 应用程序中，如果你使用。在上面的代码中，我们使用。
Electron小白入门自学笔记（一）
Echoyya、的博客
01-19 67
码文不易啊，转载请带上本文链接呀，感谢感谢 https://www.cnblogs.com/echoyya/p/14297176.html 目录码文不易啊，转载请带上本文链接呀，感谢感谢 https://www.cnblogs.com/echoyya/p/14297176.html一、从Hello Electron开始二、制作设置菜单 Menu三、主进程(Main Process)和渲染进...
electronjs设置宽度_electron基本配置
weixin_39976960的博客
12-19 454
Electron是由Github开发，用HTML，CSS和JavaScript来构建跨平台桌面应用程序的一个开源库。 Electron通过将Chromium和Node.js合并到同一个运行时环境中，并将其打包为Mac，Windows和Linux系统下的应用来实现这一目的。前端又打开了一扇通向新世界的大门，通过Electron前端就可以开发桌面应用啦。先来了解一下框架的基本配置。安装npminst...
electron的devtools设置
梧桐芊羽的博客
11-10 6238
mainWindow = new BrowserWindow({ height: sHeight, width: sWidth, useContentSize: true, autoHideMenuBar: true, //是否隐藏菜单 }) // mainWindow.webContents.openDevTools() //关闭开发者工具使用 mainWindow.webContents.closeDevTools(); mainWin..
vue3+electron开发桌面软件入门与实战（3）—— electron模块化改造+窗口位置工具+合并命令行工具
关注前端，关注原创
10-21 1229
vue3+electron的模块化改造，窗口位置记录工具，命令行合并工具，让你的应用更趋近于企业级
Electron使用指南 - [03] Main Process API
sdasadasds的博客
11-13 355
Main Process API Electron API （Electron API 有三种） Main Process （主进进程） Renderer Process（渲染进程） Share Modules（共享模块） App 事件 ready: 当 Electron 完成初始化时被触发。 两种使用方法 app.on('ready', createWindow) app.on('ready', () => { console.log('App is ready!') creat
electron forever
05-09
除了基本的重启功能，electron forever还支持多进程管理、日志记录、监控性能等功能，能够满足大多数应用程序的需求。 需要注意的是，electron forever并不能解决所有的应用程序崩溃问题，也不能代替应用程序的质量...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值