Electronjs开发速查文档学习笔记

已收录   阅读次数: 1,124
2021-05-1822:46:19 发表评论
摘要

伯衡君正在学习electronjs，涉及到的内容很多，也为了方便以后查询，加速快发，同时能够把自己学习electronjs的知识经验记录一下……
分享至：
Electronjs开发速查文档学习笔记

开篇寄语

伯衡君正在学习electronjs，涉及到的内容很多，也为了方便以后查询，加速快发，同时能够把自己学习electronjs的知识经验记录一下。

内容详情

菜单

主菜单

Mac和Windows都在左上角，如果windows系统中没有显示，则按下alt键就会出现。

const { Menu, dialog, app } = require('electron')

const template = [
  {
    label: 'app', // macOS下第一个标签是应用程序名字，此处设置无效
    submenu: [
      { label: '退出', click: () => { app.quit() } },
      { label: '关于', click: () => { app.showAboutPanel() } }
    ]
  },
  {
    label: '文件',
    submenu: [
      {
        label: '子菜单', 
        click: () => {
          // 调用了dialog（弹窗模块），演示效果
          dialog.showMessageBoxSync({
            type: 'info',
            title: '提示',
            message: '点击了子菜单'
          })
        }
      }
    ]
  }
]

const menu = Menu.buildFromTemplate(template)

Menu.setApplicationMenu(menu)

程序中的右键菜单

const { Menu, BrowserWindow } = require('electron')

const templateCustom = [
  {
    label: 'app', // macOS下第一个标签是应用程序名字，此处设置无效
    submenu: [
      { label: 'quit', role: 'quit' },
      {label: '关于', role: 'about', accelerator: 'CommandOrControl + shift + H' }
    ]
  },
  {
    label: '编辑',
    submenu: [
      {role: 'editMenu'},
      {type: 'separator'},
      {label: '自定义', click: () => {
        const win = new BrowserWindow()
        win.loadURL('https://electronjs.org')
      } }
    ]
  }
]

const customMenu = Menu.buildFromTemplate(templateCustom)

Menu.setApplicationMenu(customMenu)

隐藏菜单中的调试窗口命令

const { Menu } = require('electron')
const menu = Menu.getApplicationMenu()

menu.items[3].submenu.items[2].visible = false;

Dock菜单

适用于MacOS电脑

在main.js添加以下代码：

const { app, Menu } = require('electron')

const dockMenu = Menu.buildFromTemplate([
  {
    label: 'New Window',
    click () { console.log('New Window') }
  }, {
    label: 'New Window with Settings',
    submenu: [
      { label: 'Basic' },
      { label: 'Pro' }
    ]
  },
  { label: 'New Command...' }
])

app.whenReady().then(() => {
  app.dock.setMenu(dockMenu)
})
提示消息

renderer过程显示消息

请将以下行添加到</ body>标记之前的index.html文件中：

<script src="renderer.js"></script>

之后在renderer.js中添加下面代码：

const myNotification = new Notification('Title', {
  body: 'Notification from the Renderer process'
})

myNotification.onclick = () => {
  console.log('Notification clicked')
}

主程序显示消息

const { Notification } = require('electron')

function showNotification () {
  const notification = {
    title: 'Basic Notification',
    body: 'Notification from the Main process'
  }
  new Notification(notification).show()
}

app.whenReady().then(createWindow).then(showNotification)
最近文档

在main.js中，添加如下代码：

const { app } = require('electron')
app.addRecentDocument('/Users/USERNAME/Desktop/work.type')

清除，则用到下面的代码：

const { app } = require('electron')

app.clearRecentDocuments()
进度条
const { BrowserWindow } = require('electron')
const win = new BrowserWindow()

win.setProgressBar(0.5)
暗灰模式

创建index.html页面，输入以下代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Hello World!</title>
    <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
    <link rel="stylesheet" type="text/css" href="./styles.css">
</head>
<body>
    <h1>Hello World!</h1>
    <p>Current theme source: <strong id="theme-source">System</strong></p>

    <button id="toggle-dark-mode">Toggle Dark Mode</button>
    <button id="reset-to-system">Reset to System Theme</button>

    <script src="renderer.js"></script>
  </body>
</body>
</html>

在renderer.js中输入以下代码：

const { ipcRenderer } = require('electron')

document.getElementById('toggle-dark-mode').addEventListener('click', async () => {
  const isDarkMode = await ipcRenderer.invoke('dark-mode:toggle')
  document.getElementById('theme-source').innerHTML = isDarkMode ? 'Dark' : 'Light'
})

document.getElementById('reset-to-system').addEventListener('click', async () => {
  await ipcRenderer.invoke('dark-mode:system')
  document.getElementById('theme-source').innerHTML = 'System'
})

在main.js中输入以下代码：

const { app, BrowserWindow, ipcMain, nativeTheme } = require('electron')

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

  win.loadFile('index.html')

  ipcMain.handle('dark-mode:toggle', () => {
    if (nativeTheme.shouldUseDarkColors) {
      nativeTheme.themeSource = 'light'
    } else {
      nativeTheme.themeSource = 'dark'
    }
    return nativeTheme.shouldUseDarkColors
  })

  ipcMain.handle('dark-mode:system', () => {
    nativeTheme.themeSource = 'system'
  })
}

app.whenReady().then(createWindow)

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

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

创建style.css样式表，然后输入以下内容样式：

@media (prefers-color-scheme: dark) {
  body { background:  #333; color: white; }
}

@media (prefers-color-scheme: light) {
  body { background:  #ddd; color: black; }
}
在线检测

首先是在main.js输入以下代码：

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

let onlineStatusWindow

app.whenReady().then(() => {
  onlineStatusWindow = new BrowserWindow({ width: 0, height: 0, show: false })
  onlineStatusWindow.loadURL(`file://${__dirname}/index.html`)
})

之后，创建一个js文件，从index.html引用，比如以下所示：

<script src="renderer.js"></script>

然后在其中填写下面的代码：

const alertOnlineStatus = () => { window.alert(navigator.onLine ? 'online' : 'offline') }

window.addEventListener('online', alertOnlineStatus)
window.addEventListener('offline', alertOnlineStatus)

alertOnlineStatus()
引用网页

有三种方式可供选择：<iframe>标签，<webview>标签以及BrowserViews。

收 藏
  • 我的微信
  • 微信扫一扫加好友
  • weinxin
  • 我的微信公众号
  • 扫描关注公众号
  • weinxin

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: