electron基础学习Electron是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架。

electron

Electron是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架。嵌入了Chromium 和 Node.js 到二进制的 Electron 允许您保持一个 JavaScript 代码代码库并创建在Windows上运行的跨平台应用 macOS和Linux——不需要本地开发经验。

主进程

每个 Electron 应用都有一个单一的主进程，作为应用程序的入口点。主进程直接在nodejs中运行，所以可以直接使用nodejs的能力。

窗口

主要目的是使用 BrowserWindow 模块创建和管理应用程序窗口。(渲染进程)

BrowserWindow 类的每个实例创建一个应用程序窗口，且在单独的渲染器进程中加载一个网页。

使用方式：

const{BrowserWindow}=require('electron')

const win = new  BrowserWindow({width:800,height:1500})
win.loadURL('https://github.com')

const contents = win.webContents

渲染进程

每个 Electron 应用都会为每个打开的 BrowserWindow ( 与每个网页嵌入 ) 生成一个单独的渲染器进程。洽如其名，渲染器负责渲染网页内容。

在渲染器进程中无法直接使用node.js的能力。

preload脚本

预加载（preload）脚本包含了那些执行于渲染器进程中，且先于网页内容开始加载的代码。这些脚本虽运行于渲染器的环境中，却因能访问 Node.js API 而拥有了更多的权限。

const { BrowserWindow } = require('electron')
const win = new BrowserWindow({
  webPreferences: {
    preload: 'path/to/preload.js'
  }
})

因为预加载脚本与浏览器共享同一个全局 Window 接口，并且可以访问 Node.js API，所以它通过在全局 window 中暴露任意 API 来增强渲染器，以便你的网页内容使用。

为什么会有preload的存在？

使用preload的目的是在electron中不开启node环境集成情况下使用node的模块，避免不安全的JavaScript代码随意使用node环境。

单向数据通讯场景,例如：动态修改窗口标题，调用打印服务等不需要回调的事件
双向数据通讯场景,例如：选择文件后的回调

总结：

1.一体机项目是基于`vue-cli` 脚手架创建的uniapp 的 vue2.x版本。

2.通过electron主进程获取一体机硬件信息。

问题：大概率情况下第二次打开electron应用，无法获取推送的硬件信息。

分析：通过electron主进程主动推送硬件信息到渲染进程的方案，可能是退出的时候慢，进程没有彻底杀死，导致应用只能在第一次触发消息推送，之后再次打开项目无法主动推送。

改进：修改为在渲染进程中主动去获取硬件信息。通过vue的生命周期函数去控制获取硬件信息的时机。

3.在项目中使用 `vue add electron-builder` 命令添加electron的依赖，具体操作看这篇文档。

基于electron进程与打印机进行通讯并打印使用了pdf-to-printer库，此库依赖 SumatraPDF-3.4.6-32.exe,官网下载之后，放到项目中的 build 文件夹中，修改通过vue.config.js配置，在打包的时候把exe文件放到打包后的项目中。

module.exports = {
  pluginOptions： {
    electronBuilder：{
      builderOptions: {
        extraResources:{
          {
              from: "build/SumatraPDF-3.4.6-32.exe",
              to: "app.asar.unpacked/SumatraPDF-3.4.6-32.exe",
          },
        }
      }
    }
  }
}

4.electron项目打开后的一些默认操作

1.默认全屏

const win = new BrowserWindow({
  width: 800,
  height: 600,
  menuBarVisible: true, //隐藏菜单状态栏
  focusable:  true, //窗口是否可以聚焦
  frame: false, //是否显示窗口边框
  fullScreen: true, //是否全屏
  kiosk：true, // 是否展台模式
})

2.在桌面的最前端

win.focus(); // 选中当前窗口
win.setAlwaysOnTop(true); //设置窗口置顶

3.允许触摸事件以及touch事件

win.webContents.debugger.attach("1.3");
win.webContents.debugger.sendCommand("Emulation.setTouchEmulationEnabled", {
    enabled: true,
    configuration: "mobile",
});
win.webContents.debugger.sendCommand("Emulation.setEmitTouchEventsForMouse", {
    enabled: true,
});

4.electron应用自动更新(暂无)

electron基础学习