返回文章

electron 入门

electron 7.1.1 官网： https://electronjs.org/ 安装 运行机制 渲染进程与主进程调试 生命周期 文档： https://electronjs.org/docs/all app 事件 webContents 常用事件 进程 如何在渲染进程中打印 process file 对象 webview window.open 子窗口与父窗口通信 BrowserWindow…

electron 7.1.1 官网：https://electronjs.org/

安装

# 使用cnpm，防止报这个错误：Error: EPERM: operation not permitted、add 1 或者 node install.js中
npm install -g cnpm --registry=https://registry.npm.taobao.org
# 克隆示例项目的仓库
$ git clone https://github.com/electron/electron-quick-start
# 进入这个仓库
$ cd electron-quick-start
# 安装依赖并运行
$ npm install && npm start

运行机制

1. electron分为渲染进程与主进程
1）渲染进程：web界面，包括html，css，js
2）主进程：electron运行package.json的main脚本的进程
3）在主进程中运行的脚本通过创建web页面来展示用户界面，一个electron应用只有一个主进程

渲染进程与主进程调试

1. 渲染进程调试和chrome调试一样
2. 主进程调试方式1
  1）执行electron --inspect=[port] .
  2）chrome输入chrome://inspect
  3）加一个localhost:[port]
3. vscode在launch.json添加配置文件即可

生命周期

文档：https://electronjs.org/docs/all

  1. app 事件
1. 当 Electron 完成初始化时被触发
app.on('ready', callback)
2. 在应用程序退出时发出
app.on('quit', callback)
3. 当应用被激活时发出
app.on('activate', callback)
4. 退出窗口
app.on("window-all-closed",callback)
  1. webContents 常用事件
1. 导航完成时触发，即选项卡的旋转器将停止旋转，并指派onload事件后
mainWindow.webContents.on('did-finish-load', callback)
2. 一个框架中的文本加载完成后触发该事件。
mainWindow.webContents.on('dom-ready', callback)

进程

  1. 如何在渲染进程中打印 process
// https://electronjs.org/docs/all#new-browserwindowoptions
// mian.js
// Create the browser window.
mainWindow = new BrowserWindow({
  width: 800,
  height: 600,
  webPreferences: {
    preload: path.join(__dirname, "preload.js"),
    // nodeIntegration Boolean (可选) - 是否集成Node，默认为false
    nodeIntegration: true
  }
});

1. cpu信息
getCPUUsage()
2. 内存信息
getSystemMemoryInfo()
3. 环境变量
env

file 对象

1. 在文件系统中，使用HTML5 File 原生API操作文件
const fs = require("fs");
const iconv = require("iconv-lite");
const $drag_file = document.getElementById("drag_file");
$drag_file.addEventListener("drop", e => {
  e.preventDefault();
  const files = e.dataTransfer.files;
  fs.readFile(files[0].path, (err, data) => {
    var content = iconv.decode(data, "gbk");
    console.log(content);
  });
});
$drag_file.addEventListener("dragover", e => {
  e.preventDefault();
});

webview

https://electronjs.org/docs/all#webview%E6%A0%87%E7%AD%BE
1. 需要在perload.js开启webviewTag
2. nodeintegration
webview 中的访客页（guest page）将具有Node集成, 并且可以使用像 require 和 process 这样的node APIs 去访问低层系统资源。 Node 集成在访客页中默认是禁用的
3. preload
给webview嵌入js脚本
4. webview的方法
const webview = document.querySelector("webview");
webview.addEventListener("dom-ready", () => {
  console.log(webview.getURL());
  webview.openDevTools()
});
webview.addEventListener("did-start-loading", e => {
  console.log("did-start-loading", e);
});
webview.addEventListener("did-stop-loading", e => {
  console.log("did-stop-loading", e);
});

window.open 子窗口与父窗口通信

1. 打开一个新窗口
window.open('open.html', '_blank', 'nodeIntegration=no')
2. 向父窗口传递信息
window.opener.postMessage('这是子窗口')
3. 关闭子窗口
var subWin = window.open("open.html", "_blank", "nodeIntegration=no");
setTimeout(() => {
  subWin.close();
}, 1000);

BrowserWindow

1. ready-to-show后显示窗口
let win = new BrowserWindow({ show: false })
win.once('ready-to-show', () => {
  win.show()
})
2. 子窗口
childWindow = new BrowserWindow({
  parent: mainWindow,
  modal: true,
  x: 10,
  y: 100
});

BrowserView

1. 打开与关闭
let view = new BrowserView();
mainWindow.setBrowserView(view);
view.setBounds({ x: 0, y: 0, width: 300, height: 300 });
view.webContents.loadURL("https://www.hao123.com");
setTimeout(() => {
  view.destroy();
}, 3000);

dialog

const { dialog } = require("electron").remote;
1. 打开文件
dialog
.showOpenDialog({
  title: "选择",
  buttonLabel: "快点啊，老弟",
  filters: [
    {
      name: "images",
      extensions: ["png", "jpg", "gif"]
    }
  ]
})
.then(res => {

  console.log(res.filePaths);
});
2. 写入文件
dialog
.showSaveDialog({
  title: "选择",
  buttonLabel: "快点啊，老弟",
  filters: [
    {
      name: "images",
      extensions: ["txt"]
    }
  ]
})
.then(res => {
  fs.writeFileSync(res.filePath, "这是一个测试txt");
});
3. 消息弹窗
dialog
  .showMessageBox({
    title: "老了老弟",
    message: "hello world",
    type: "warning"
  })
  .then(res => {
    console.log(res);
  });

api 快捷键

1. 主进程绑定热键
const {
  globalShortcut
} = require("electron");
app.on("ready", () => {
  console.log("ready");
  const ret = globalShortcut.register("CommandOrControl+X", () => {
    console.log("CommandOrControl+X is pressed");
  });
  if (!ret) {
    console.log("registration failed");
  }
  // 检查快捷键是否注册成功
  console.log(globalShortcut.isRegistered("CommandOrControl+X"));
});
app.on("window-all-closed", function() {
  // 注销快捷键
  globalShortcut.unregister("CommandOrControl+X");
  // 注销所有快捷键
  globalShortcut.unregisterAll();
});
2. 渲染进程注册热键
const { remote } = require("electron");
remote.globalShortcut.register("CommandOrControl+I", () => {
  console.log("hahahhahaha");
});

主进程和渲染进程如何双向通信

1. 主进程与渲染进程被动双向通信
1)主进程
const {
  ipcMain
} = require("electron");
ipcMain.on("to-main", (event, arg) => {
  console.log("hello", arg);
  event.reply("to-renderer", "hello");
});
2)渲染进程
const { ipcRenderer } = require("electron");
ipcRenderer.send("to-main", "render-to-main");
ipcRenderer.on("to-renderer", (event, arg) => {
  cons
  ole.log("main-to-renderer", arg);
});
2. 主进程向渲染进程发信息
1)主进程
setTimeout(() => {
  mainWindow.webContents.send("directly-to-renderer", "我是小明");
}, 5000);
2)渲染进程
ipcRenderer.on("directly-to-renderer", (event, res) => {
  console.log("已阅", res);
});

原生应用菜单

渲染进程;
const electron = require("electron");
const { remote } = require("electron");
const { Menu, menuItem } = remote;
remote.globalShortcut.register("CommandOrControl+I", () => {
  var template = [
    {
      label: "编辑",
      submenu: [
        {
          label: "撤销",
          accelerator: "CmdOrCtrl+Z",
          role: "undo"
        },
        {
          label: "重做",
          accelerator: "Shift+CmdOrCtrl+Z",
          role: "redo"
        },
        {
          type: "separator"
        },
        {
          label: "复制",
          accelerator: "CmdOrCtrl+C",
          role: "copy"
        },
        {
          label: "粘贴",
          accelerator: "CmdOrCtrl+V",
          role: "paste"
        }
      ]
    },
    {
      label: "帮助",
      role: "help",
      submenu: [
        {
          label: "学习更多",
          click: function() {
            electron.shell.openExternal("http://electron.atom.io");
          }
        }
      ]
    }
  ];
  const menu = Menu.buildFromTemplate(template);
  // 应用于窗口菜单
  // Menu.setApplicationMenu(menu);
  menu.popup();
});

网络访问模块

模块是一个发送 HTTP(S) 请求的客户端API。 它类似于Node.js的HTTP 和 HTTPS 模块 ，但它使用的是Chromium原生网络库来替代Node.js的实现，提供更好的网络代理支持
特点：
系统代理配置的自动管理, 支持 wpad 协议和代理 pac 配置文件。
HTTPS 请求的自动隧道。
支持使用basic、digest、NTLM、Kerberos 或协商身份验证方案对代理进行身份验证。
支持传输监控代理: 类似于Fiddler代理，用于访问控制和监视。

// 主进程中用
const { net } = require("electron");
// 渲染进程中用
const { net } = require("electron").remote;
const request = net.request("https://www.baidu.com");
request.on("response", response => {
  console.log(`STATUS: ${response.statusCode}`);
  console.log(`HEADERS: ${JSON.stringify(response.headers)}`);
  response.on("data", chunk => {
    // console.log(`BODY: ${chunk}`);
  });
  response.on("end", () => {
    console.log("No more data in response.");
  });
});
request.end();

暂无评论