首页 > 其他分享 >Electron-Vite快速识别

Electron-Vite快速识别

时间：2022-12-21 17:56:02浏览次数：43  
标签：const 渲染 app Electron 模块 进程 识别 require Vite

构建Vite-electron项目

npm i electron-vite -D

npm create @quick-start/electron project-name -- template vue-ts

Electron的运行流程

Electron 运行流程

Electron进程

一、主进程：有且唯一的应用程序入口点，在 Node.js 环境中运行，具有 require 模块和使用所有 Node.js API 的能力。
二、渲染进程：每个打开的 BrowserWindow ( 与每个网页嵌入 )都会生成一个单独的渲染器进程，无权直接访问 require 或其他 Node.js API，入口为HTML文件
三、预加载脚本：包含执行于渲染器进程中，且先于网页内容开始加载的代码 。 运行在渲染进程的环境中，却有使用Node.js API的能力，在BrowserWindow 构造方法中的 webPreferences 选项里被附加到主进程。
ps：由于预加载脚本与渲染进程的运行环境是隔离开，如果想要在预加载脚本中暴露信息则使用``contextBridge`模块实现,但也有暴露限制例如暴露原型或者 Symbol。不可直接暴露权限API，可采取暴露API功能实现方法。

Electron的模块

app模块：控制应用程序的生命周期
BrowserWindow模块：窗口管理，每个实例对应一个窗口，且在单独的渲染器进程中加载一个网页。当实例被销毁时，与其相应的渲染器进程也会被终止
autoUpdater模块：程序自动更新，window和mac支持
BrowserView模块：创建和控制视图，相对于父窗口的子窗口，窗口里面开窗口
clipboard模块：在系统剪贴板上执行复制和粘贴操作
dialog模块：显示用于打开和保存文件、警报等的本机系统对话框
powerMonitor模块：监听电源状态变化
powerSaveBlocker模块：阻止系统进入低功耗 (休眠) 模式
screen模块：检索有关屏幕大小、显示器、光标位置等的信息
safeStorage 模块：允许访问简单的加密和解密字符串，以便存储在本地机器上
session模块：管理浏览器会话、cookie、缓存、代理设置等
protocol模块：注册自定义协议并拦截基于现有协议的请求
pushNotifications模块：注册并接收远程推送通知服务的通知
shell模块：使网页在本地浏览器打开而不是在窗口中，新窗口直接window.open(url)即可
systemPreferences模块：获取系统偏好
Tray模块：添加图标和上下文菜单到系统通知区
globalShortcut模块：全局快捷键
const globalShortcut = electron.globalShortcut;            //引入
//const globalShortcut = require('global-shortcut');

//！必须在ready监听回调中使用
app.on("ready", () => {
  globalShortcut.register("ctrl+x", () => {
        //使用快捷键的回调
  });
   let judgeRegister = globalShortcut.isRegister('ctrl+e')?'注册成功':'注册失败'        //判断快捷键是否注册成功
});
app.on('will-quit', ()=> {
  globalShortcut.unregister('ctrl+x');            //注销ctrl+x快捷键
  globalShortcut.unregisterAll();            //注销全部快捷键
});
contextBridge模块：在隔离的上下文中创建一个安全的、双向的、同步的桥梁
nativeImage模块：使用 PNG 或 JPG 文件创建托盘、dock和应用程序图标
webFrame模块：自定义渲染当前网页
ipc模块：进程通信，负责进程之间的事件触发，数据传递
1、渲染进程单向通信主进程 // 修改程序名称
// index.html
<html>
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">
    <title>Hello World!</title>
  </head>
  <body>
    Title: <input id="title"/>
    <button id="btn" type="button">Set</button>
    <script src="./renderer.js"></script>
  </body>
</html>

// main.ts
const {app, BrowserWindow, ipcMain} = require('electron')
const path = require('path')

function handleSetTitle (event, title) {
    // event是消息发送方，
  const webContents = event.sender
   // 确定是哪个渲染进程调用，然后作用与该渲染进程
  const win = BrowserWindow.fromWebContents(webContents)
  win.setTitle(title)
}
function createWindow () {
  const mainWindow = new BrowserWindow({
    webPreferences: {
      preload: path.join(__dirname, 'preload.js')
    }
  })
  mainWindow.loadFile('index.html')
}
app.whenReady().then(() => {
  ipcMain.on('set-title', handleSetTitle)
  createWindow()
}

// preload.ts
const { contextBridge, ipcRenderer } = require('electron')
// 通过contextBridge安全的向渲染进程暴露一个electronAPI对象，其中是渲染进程所需实现业务的方法,不可直接暴露Api给渲染
contextBridge.exposeInMainWorld('electronAPI', {
    setTitle: (title) => ipcRenderer.send('set-title', title)
    ... // 更多方法
})

// render.ts
const setButton = document.getElementById('btn')
const titleInput = document.getElementById('title')
setButton.addEventListener('click', () => {
    const title = titleInput.value
       // 点击触发proload提供的winndow.electronAPI对象中的setTitle方法
    window.electronAPI.setTitle(title)
});
2、主进程渲染进程双向通信 // 渲染进程调用主进程的原生文件对话框
// index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">
    <title>Dialog</title>
  </head>
  <body>
    <button type="button" id="btn">Open a File</button>
    File path: <strong id="filePath"></strong>
    <script src='./renderer.js'></script>
  </body>
</html>

// render.ts
const btn = document.getElementById('btn')
const filePathElement = document.getElementById('filePath')
btn.addEventListener('click', async () => {
   // 触发由contentBrige模块暴露的window.electronAPI对象openFile方法
  const filePath = await window.electronAPI.openFile()
  filePathElement.innerText = filePath
})

// preload.ts
const { contextBridge, ipcRenderer } = require('electron')
contextBridge.exposeInMainWorld('electronAPI',{
       // 双向通信触发通过invoke方法
  openFile: () => ipcRenderer.invoke('dialog:openFile')
})

// main.ts
const {app, BrowserWindow, ipcMain, dialog} = require('electron')
const path = require('path')

async function handleFileOpen() {
  const { canceled, filePaths } = await dialog.showOpenDialog()
  if (canceled) {
    return
  } else {
    return filePaths[0]
  }
}

function createWindow () {
  const mainWindow = new BrowserWindow({
    webPreferences: {
      preload: path.join(__dirname, 'preload.js')
    }
  })
  mainWindow.loadFile('index.html')
}

app.whenReady().then(() => {
 // 双向通信接收通过handle方法
  ipcMain.handle('dialog:openFile', handleFileOpen)
  createWindow()
  app.on('activate', function () {
    if (BrowserWindow.getAllWindows().length === 0) createWindow()
  })
})

app.on('window-all-closed', function () {
  if (process.platform !== 'darwin') app.quit()
})
3、主进程通信渲染进程
// index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">
    <title>Menu Counter</title>
  </head>
  <body>
    Current value: <strong id="counter">0</strong>
    <script src="./renderer.js"></script>
  </body>
</html>

// render.ts
const counter = document.getElementById('counter')

window.electronAPI.handleCounter((event, value) => {
    const oldValue = Number(counter.innerText)
    const newValue = oldValue + value
    counter.innerText = newValue
       // 回复？？
    event.sender.send('counter-value', newValue)
})

// preload.ts
const { contextBridge, ipcRenderer } = require('electron')
contextBridge.exposeInMainWorld('electronAPI', {
  handleCounter: (callback) => ipcRenderer.on('update-counter', callback)
})

// main.ts
const {app, BrowserWindow, Menu, ipcMain} = require('electron')
const path = require('path')

function createWindow () {
  const mainWindow = new BrowserWindow({
    webPreferences: {
      preload: path.join(__dirname, 'preload.js')
    }
  })
   // 自定义菜单
  const menu = Menu.buildFromTemplate([
    {
      label: app.name,
      submenu: [
        {
          click: () => mainWindow.webContents.send('update-counter', 1),
          label: 'Increment',
        },
        {
          click: () => mainWindow.webContents.send('update-counter', -1),
          label: 'Decrement',
        }
      ]
    }
  ])
  Menu.setApplicationMenu(menu)
  mainWindow.loadFile('index.html')
}
 app.whenReady(()=>{
    // 接收渲染进程回复的
    ipcMain.on('counter-value', (_event, value) => {
       console.log(value) 
   })
})
//...
4、渲染进程通信渲染进程
一般很少用，因为渲染进程用框架例如Vue有N种通信方式
1、把主进程当作事件总线来用
2、主进程将一个MessagePort传递到两个渲染器。 这将允许在初始设置后渲染器之间直接进行通信。

设置网络是否连接的不同回调

 window.addEventListener("online", () => {});   //上网
 window.addEventListener("offline", () => {});    //断网

标签：const,渲染,app,Electron,模块,进程,识别,require,Vite
From： https://www.cnblogs.com/kq981024/p/16996820.html

相关文章

  • Vite + Vue3导入 vue-i18n 插件
    使用Vite+Vue3导入vue-i18n插件Step1下载vue-i18n插件npminstallvue-i18nStep2新建local文件夹，创建index.jsindex.jsimport{createI18n}from"v......
  • 中学数学知识点实体识别
    中学数学知识点实体识别⚠️所有有关智慧教育的项目已完结停更，不再维护，感谢您的支持构建中学数学知识图谱的第一步是完成数学命名实体识别。1.Overview  本文定义是：中学数......
  • Electron Mac 打包报 Error: Exit code: ENOENT. spawn /usr/bin/python ENOENT 解决
     Electron项目使用vue-cli-electron-builder创建，原来我的Mac上编译都很正常自从Mac升级到macOSventuraversion13.0.1后打包报错，electron-builder编译dmg......
  • 机器学习——植物叶片病害识别
    机器学习——植物叶片病害识别一、选题背景随着现代科技的发展，人们对于人工智能领域的研究越发的深入。机器学习作为人工智能和识别领域研究的重要课题非常值得我们......
  • Vue-router4.0接口快速识别
    Vue-router4.0接口快速识别<router-link> ：将会被渲染a标签属性名属性类型属性作用tostring/object相当于跳转调用router.push(string/object)replacebo......
  • PaddlePaddle 实现手写数字识别
    PaddlePaddle实现手写数字识别在这次实验中我们将使用PaddlePaddle来实现三种不同的分类器，用于识别手写数字。三种分类器所基于的模型分别为Softmax回归、多层感知器、......
  • 机器学习——人脸性别识别
    一、选题背景    人脸识别技术是模式识别和计算机视觉领域最富挑战性的研究课题之一，也是近年来的研究热点，人脸性别识别作为人脸识别技术的重要组成部分也受到了广......
  • 【MindStudio训练营第一季】MindX SDK情绪识别样例速跑 Atlas 200 DK版
    一、前言书接上回，我想用Atlas200DK开发者套件来跑这次的MindStudio训练营，很明显一个最大的问题就是环境，官方镜像是全部已经配置好了的环境，而我现在这只有CANN，除了CANN一......
  • 『论文笔记』基于度量学习的行人重识别方法中损失函数总结！
    基于度量学习的行人重识别方法中损失函数总结！文章目录​​一、对比损失(Contrasiveloss)​​​​二、三元组损失(Tripletloss)​​​​三、改进三元组损失(Improvedtripl......
  • 机器学习——人脸识别判断表情
    （一） 选题背景随着机器学习和深度神经网络两个领域的迅速发展以及智能设备的普及，人脸识别技术正在经历前所未有的发展，关于人脸识别技术讨论从未停歇。目前，人脸识别精度已......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99