彷徨的耗子

Appearance

electron+vite构建桌面应用 ​

electron-vite 是一个新型构建工具，旨在为 Electron 提供更快、更精简的开发体验。它主要由五部分组成： 一套构建指令，它使用 Vite 打包你的代码，并且它能够处理 Electron 的独特环境，包括 Node.js 和浏览器环境。 集中配置主进程、渲染器和预加载脚本的 Vite 配置，并针对 Electron 的独特环境进行预配置。 为渲染器提供快速模块热替换（HMR）支持，为主进程和预加载脚本提供热重载支持，极大地提高了开发效率。 优化 Electron 主进程资源处理。 使用 V8 字节码保护源代码 electron-vite 快速、简单且功能强大，旨在开箱即用。

参考文档

搭建项目 ​

yarn create @quick-start/electron
根据提示进行操作即可
✔ Project name: … <electron-app>
✔ Select a framework: › vue
✔ Add TypeScript? … No / Yes
✔ Add Electron updater plugin? … No / Yes
✔ Enable Electron download mirror proxy? … No / Yes

Scaffolding project in ./<electron-app>...
Done.

多窗口应用 ​

js
// 在electron.vite.config.js进行配置
export default {
  main: {},
  preload: {
    build: {
      rollupOptions: {
        input: {
          browser: resolve(__dirname, 'src/preload/browser.js'),
          webview: resolve(__dirname, 'src/preload/webview.js')
        }
      }
    }
  },
  renderer: {
    build: {
      rollupOptions: {
        input: {
          browser: resolve(__dirname, 'src/renderer/browser.html'),
          webview: resolve(__dirname, 'src/renderer/webview.html')
        }
      }
    }
  }
}

桌面端配置 ​

js
const BASE_WINDOW_CONFIG = {//定义一个常量来设置桌面基础配置(适用于多窗口)
  width: 1200,
  height: 670,
  minHeight: 670,
  minWidth: 1200,
  frame: false,
  show: false,
  autoHideMenuBar: true,
  transparent: true,
  backgroundColor: '#00000000',
  icon: icon,
  ...(process.platform === 'linux' ? { icon } : {}),
  webPreferences: {
    preload: join(__dirname, '../preload/index.js'),
    sandbox: false,
    nodeIntegration: true,
    contextIsolation: false
  }
}
//创建窗口
const createWindow = (): void => {
  // Create the browser window.
  mainWindow = new BrowserWindow({
    ...BASE_WINDOW_CONFIG,
    title: 'title'
  })

  mainWindow.on('ready-to-show', () => {
    mainWindow.show()
    globalShortcut.register('Alt+I', () => {//快捷键打开调试控制台
      mainWindow.webContents.toggleDevTools()
    })
  })

  mainWindow.webContents.setWindowOpenHandler((details: { url: string }) => {
    shell.openExternal(details.url)
    return { action: 'deny' }
  })

  if (is.dev && process.env['ELECTRON_RENDERER_URL']) {
    mainWindow.loadURL(process.env['ELECTRON_RENDERER_URL'])
  } else {
    mainWindow.loadFile(join(__dirname, '../renderer/index.html'))
  }
}

环境变量 ​

//环境变量需要区分头部,MAIN只能在主进程使用,渲染器,预加载脚本无法读取.PRELOAD,RENDERER同理
SOME_KEY=123                # 无效变量
MAIN_VITE_SOME_KEY=123      # 主进程可用
PRELOAD_VITE_SOME_KEY=123   # 预加载脚本可用
RENDERER_VITE_SOME_KEY=123  # 渲染器可用

添加系统托盘 ​

js
import {app,Tray,Menu,} from 'electron'
let tray: Tray
app.whenReady().then(() => {
  electronApp.setAppUserModelId('com.electron')
  tray = new Tray(icon)//托盘图标
  //托盘菜单
  const menu = Menu.buildFromTemplate([
    {
      label: '退出',
      role: 'quit'
    }
  ])
  tray.setContextMenu(menu)
  tray.setToolTip('托盘悬停提示')
  tray.on('double-click', () => {
    //托盘双击打开主窗口
    mainWindow.show()
  })
  createWindow()
})

警告提示 ​

Electron Security Warning (Insecure Resources) This renderer process loads resources using insecure
  protocols. This exposes users of this app to unnecessary security risks.
  Consider loading the following resources over HTTPS or FTPS. 
- http://172.18.1.202:8080/cms/product/category/tree
  
For more information and help, consult
https://electronjs.org/docs/tutorial/security.
This warning will not show up
once the app is packaged.
//如果出现该警告,再main.ts中添加
process.env['ELECTRON_DISABLE_SECURITY_WARNINGS'] = 'true'

...(待续)