zqy233的前端学习笔记

主题

回到顶部
索引

语法实例

取消默认菜单栏

js
import { Menu } from 'electron'
Menu.setApplicationMenu(null)

import { Menu } from 'electron'
Menu.setApplicationMenu(null)

关闭菜单栏和外边框

js
const win = new BrowserWindow({
    frame: false, // 关闭菜单栏和外边框
    ...
  })

const win = new BrowserWindow({
    frame: false, // 关闭菜单栏和外边框
    ...
  })

打开开发者工具

js
win.webContents.openDevTools()

win.webContents.openDevTools()

设置菜单栏

ts
  //设置菜单
  let headerMenu = Menu.buildFromTemplate([
    {
      label: "退出",
      click: () => {
        app.quit()
      }
    },
    {
      label: "卸载",
      click: () => {
        execFile(app.getPath("exe").replace(app.getName() + ".exe", "Uninstall " + app.getName() + ".exe"), (err: any, data: any) => {
          console.log(err)
          console.log(data.toString())
        })
      }
    },
    {
      label: "全屏",
      click: () => {
        win.maximize()
      }
    },
    {
      label: "开发者选项",
      submenu: [
        {
          label: "开发者工具",
          click: () => {
            win.webContents.openDevTools()
          }
        }
      ]
    }
  ])
  Menu.setApplicationMenu(headerMenu)

  //设置菜单
  let headerMenu = Menu.buildFromTemplate([
    {
      label: "退出",
      click: () => {
        app.quit()
      }
    },
    {
      label: "卸载",
      click: () => {
        execFile(app.getPath("exe").replace(app.getName() + ".exe", "Uninstall " + app.getName() + ".exe"), (err: any, data: any) => {
          console.log(err)
          console.log(data.toString())
        })
      }
    },
    {
      label: "全屏",
      click: () => {
        win.maximize()
      }
    },
    {
      label: "开发者选项",
      submenu: [
        {
          label: "开发者工具",
          click: () => {
            win.webContents.openDevTools()
          }
        }
      ]
    }
  ])
  Menu.setApplicationMenu(headerMenu)

清webview缓存

js
let webview = document.querySelector("webview")

setInterval(() => {
  webview.getWebContents().session.clearCache(() => {
    webview.reload()
  })
}, 1000)

let webview = document.querySelector("webview")

setInterval(() => {
  webview.getWebContents().session.clearCache(() => {
    webview.reload()
  })
}, 1000)

设置隐藏至托盘

js
const { app, BrowserWindow, Tray, Menu } = require("electron")
const path = require("path")

let tray = null // 在外面创建tray变量，防止被自动删除，导致图标自动消失
function createWindow() {
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    icon: path.join(__dirname, "logo.ico"),
    webPreferences: {
      preload: path.join(__dirname, "preload.js")
    }
  })
  mainWindow.setMenu(null)
  mainWindow.loadURL("https://fanyi.baidu.com/")

  // 当点击关闭按钮
  mainWindow.on("close", e => {
    e.preventDefault() // 阻止退出程序
    mainWindow.setSkipTaskbar(true) // 取消任务栏显示
    mainWindow.hide() // 隐藏主程序窗口
  })

  // 创建任务栏图标
  tray = new Tray(path.join(__dirname, "logo.ico"))

  // 自定义托盘图标的内容菜单
  const contextMenu = Menu.buildFromTemplate([
    {
      // 点击退出菜单退出程序
      label: "退出",
      click: () => {
        mainWindow.destroy()
        app.quit()
      }
    }
  ])

  tray.setToolTip("百度翻译") // 设置鼠标指针在托盘图标上悬停时显示的文本
  tray.setContextMenu(contextMenu) // 设置图标的内容菜单
  // 点击托盘图标，显示主窗口
  tray.on("click", () => {
    mainWindow.show()
  })
}

app.whenReady().then(() => {
  createWindow()
  app.on("activate", function () {
    if (BrowserWindow.getAllWindows().length === 0) createWindow()
  })
})

app.on("window-all-closed", function () {
  if (process.platform !== "darwin") app.quit()
})

const { app, BrowserWindow, Tray, Menu } = require("electron")
const path = require("path")

let tray = null // 在外面创建tray变量，防止被自动删除，导致图标自动消失
function createWindow() {
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    icon: path.join(__dirname, "logo.ico"),
    webPreferences: {
      preload: path.join(__dirname, "preload.js")
    }
  })
  mainWindow.setMenu(null)
  mainWindow.loadURL("https://fanyi.baidu.com/")

  // 当点击关闭按钮
  mainWindow.on("close", e => {
    e.preventDefault() // 阻止退出程序
    mainWindow.setSkipTaskbar(true) // 取消任务栏显示
    mainWindow.hide() // 隐藏主程序窗口
  })

  // 创建任务栏图标
  tray = new Tray(path.join(__dirname, "logo.ico"))

  // 自定义托盘图标的内容菜单
  const contextMenu = Menu.buildFromTemplate([
    {
      // 点击退出菜单退出程序
      label: "退出",
      click: () => {
        mainWindow.destroy()
        app.quit()
      }
    }
  ])

  tray.setToolTip("百度翻译") // 设置鼠标指针在托盘图标上悬停时显示的文本
  tray.setContextMenu(contextMenu) // 设置图标的内容菜单
  // 点击托盘图标，显示主窗口
  tray.on("click", () => {
    mainWindow.show()
  })
}

app.whenReady().then(() => {
  createWindow()
  app.on("activate", function () {
    if (BrowserWindow.getAllWindows().length === 0) createWindow()
  })
})

app.on("window-all-closed", function () {
  if (process.platform !== "darwin") app.quit()
})

进度条

win.setProgressBar(c)设置进度

小于0则底部蓝色，大于0小于1则底部绿色，且进度

js
const { app, BrowserWindow } = require("electron")

let progressInterval

function createWindow() {
  const win = new BrowserWindow({
    width: 800,
    height: 600
  })

  win.loadFile("index.html")

  const INCREMENT = 0.03
  const INTERVAL_DELAY = 100 // ms

  let c = 0
  progressInterval = setInterval(() => {
    win.setProgressBar(c)
    if (c < 2) {
      c += INCREMENT
    } else {
      c = -INCREMENT * 5 
    }
  }, INTERVAL_DELAY)
}

app.whenReady().then(createWindow)

app.on("before-quit", () => {
  clearInterval(progressInterval)
})

app.on("window-all-closed", () => {
  if (process.platform !== "darwin") {
    app.quit()
  }
})

app.on("activate", () => {
  if (BrowserWindow.getAllWindows().length === 0) {
    createWindow()
  }
})

const { app, BrowserWindow } = require("electron")

let progressInterval

function createWindow() {
  const win = new BrowserWindow({
    width: 800,
    height: 600
  })

  win.loadFile("index.html")

  const INCREMENT = 0.03
  const INTERVAL_DELAY = 100 // ms

  let c = 0
  progressInterval = setInterval(() => {
    win.setProgressBar(c)
    if (c < 2) {
      c += INCREMENT
    } else {
      c = -INCREMENT * 5 
    }
  }, INTERVAL_DELAY)
}

app.whenReady().then(createWindow)

app.on("before-quit", () => {
  clearInterval(progressInterval)
})

app.on("window-all-closed", () => {
  if (process.platform !== "darwin") {
    app.quit()
  }
})

app.on("activate", () => {
  if (BrowserWindow.getAllWindows().length === 0) {
    createWindow()
  }
})

Released under the MIT License.

Copyright © 2022.4-2024.7