Electron 笔记

1. 窗口相关基础引用

链接地址： Electron的BrowserWindow设置参数

// 从electron中引入app和BrowserWindow模块
const {app, BrowserWindow} = require('electron');

// 当 Electron 完成初始化时被触发 ready
app.on('ready', function () {
  // 创建一个可视化的窗口
  let bw1 = new BrowserWindow({
    width: 800, // 窗口宽度800px
    height: 600, // 窗口高度600px
    // resizable: false, //  窗口是否可以改变尺寸. 默认值为true
    alwaysOnTop: true, // 窗口是否永远在别的窗口的上面. 默认值为false
    title: '淘淘课堂', // 窗口的默认标题. 默认值为 "Electron"
    // frame: false, // 要创建无边框窗口，只需在 BrowserWindow 的 options 中将 frame 设置为 false：
  });

  // 加载指定的页面到窗口中，支持绝对路径，但是推荐使用相对
  // 路径，而且路径在解析的时候会被处理，相对路径默认指向
  // 应用程序的根目录
  bw1.loadFile('./layout/index.html');

  // 支持加载远程文件，支持http协议，也支持file协议
  // bw1.loadURL('https://www.miaov.com');
});

2. 与菜单有关的基础引用

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

app.on('ready', () => {

  // 创建一个窗口对象
  let bw1 = new BrowserWindow();

  // 创建一个菜单对象
  let m1 = new Menu();

  // 创建一个菜单单项
  let mi1 = new MenuItem({
    type: 'normal', // 一般菜单
    label: '文件'
  });

  // 把菜单单项添加到指定菜单对象
  m1.append(mi1);

  // 创建菜单项
  let mi2 = new MenuItem({
    type: 'submenu', // 带有下拉选项的菜单
    label: '查看',
    submenu: [{
        type: 'normal',
        label: '文件'
      },
      {
        type: 'separator' // 分隔符
      },
      {
        type: 'normal',
        label: '文件夹'
      },
      {
        type: 'checkbox', // 复选框
        label: '选项一',
        checked: true
      },
      {
        type: 'separator'
      },
      {
        type: 'radio',
        label: 'AAAA'
      },
      {
        type: 'radio', // 单选框
        label: 'BBBB'
      },
      {
        type: 'separator'
      },
      // {
      //     role: 'quit',
      //     label: '退出'
      // }
      {
        type: 'normal',
        label: '退出',
        click() {
          app.quit();
        }
      }
    ]
  });
  m1.append(mi2);


  // 指定该菜单显示的主体（具体哪个窗口、右键-上下文）
  /**
   * 菜单位置：
   *  1. 应用程序的顶层菜单
   *  2. 上下文菜单
   */
  // 把菜单添加到应用程序窗口最顶层
  Menu.setApplicationMenu(m1);
});

3. 进程之间的数据通信

ipcMain: 从主进程到渲染进程的异步通信

const {app, BrowserWindow, ipcMain} = require('electron');
// ipcMain 从主进程到渲染进程的异步通信。
// let username = 'Clairoll';
// 将username 挂载到全局对象上
// global.username = username;

let datas ={
  username: 'Clairoll',
  gender: '男'
}
app.on('ready', () => {
  let bw = new BrowserWindow();

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

  bw.loadFile('./layout/index.html');

  // 监听渲染进程 ipcRenderer 发送的消息
  ipcMain.on('getData', function(e,key){
    // console.log(key);

    // e.sender => 通过这个对象返回消息给渲染进程
    // datas[key] => 渲染进程请求的数据
    e.sender.send('sendData', datas[key]);
  })
  
  // 主进程主动发送消息到渲染进程
  setTimeout(() => {
    bw.webContents.send('hello', 'hello........', 10, 20, 30);
  }, 2000);


  let bw1 = new BrowserWindow();

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

  bw1.loadFile('./layout/index1.html');
});

ipcRenderer:从渲染器进程到主进程的异步通信
- 页面1

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>
  <h1>App</h1>
  <button>按钮</button>
  <button>按钮2</button>
  <script>
    // 在渲染进程中不能直接获取到主进程中的数据
    // console.log(username);

    // 在渲染进程中也可以使用electron对象
    // electron对象下面有的属性方法只能在主进程中使用，有的是在渲染进程中使用
    // 如果需要访问主进程中的数据，那么我们可以通过渲染进程中的electron下有一个子对象：remote =》 主进程


    const {remote, ipcRenderer} = require('electron');
    // ipcRenderer 从渲染器进程到主进程的异步通信

    // 该对象下有一个方法：getGlobal，可以通过该方法来获取主进程中的全局数据,但是并不推荐
    // console.log(remote.getGlobal('username')); // Clairoll

    const btns = document.querySelectorAll('button');
    // 点击按钮向主进程发送获取username的请求
    btns[0].onclick = function(){
      ipcRenderer.send('getData', 'username'); 
    }
    // 监听从主进程返回来的消息 data 则是一开始用户请求的数据
    ipcRenderer.on('sendData', function(e, data){ 
      console.log(data);
    })

    // 监听从主进程主动发送过来的消息，并获取数据
    ipcRenderer.on('hello', function(e, ...data){
      console.log(data);
    })

    // 点击按钮2的时候往
    btns[1].onclick = function() {
      localStorage.setItem('user', 'Clairoll');
    }
  </script>
</body>

</html>

页面2

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>
  <h1>App2</h1>
  <button>按钮</button>
  <script>
    const buttons = document.querySelectorAll('button');

    buttons[0].onclick = function () {
      console.log(localStorage.getItem('user'));
    }
  </script>
</body>

</html>

Electron 笔记

Electron 笔记

1. 窗口相关基础引用

2. 与菜单有关的基础引用

3. 进程之间的数据通信

猜你喜欢