[electron]官方示例解析

官方例子


github链接

main.js

js 复制代码
const { app, BrowserWindow } = require('electron')

说句实话这里的语法是有部分看不懂的。导入模块虽然electron有很多模块。但是这里只是用到了appBrowserWindow

js 复制代码
function createWindow () {
  // Create the browser window.
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js')
    }
  })

  // and load the index.html of the app.
  mainWindow.loadFile('index.html')

  // Open the DevTools.
  // mainWindow.webContents.openDevTools()
}

创建窗口函数,new了一个BrowserWindow。并指定了一些属性,然后加载html文件

js 复制代码
app.whenReady().then(() => {
  createWindow()

  app.on('activate', function () {
    // On macOS it's common to re-create a window in the app when the
    // dock icon is clicked and there are no other windows open.
    if (BrowserWindow.getAllWindows().length === 0) createWindow()
  })
})

app whenReady之后就可以创建窗口了,调用createWindow()函数。

js 复制代码
app.on('window-all-closed', function () {
  if (process.platform !== 'darwin') app.quit()
})

当所有窗口退出后。app退出。

package.json

复制代码
{
  "name": "electron-quick-start",
  "version": "1.0.0",
  "description": "A minimal Electron application",
  "main": "main.js",
  "scripts": {
    "start": "electron ."
  },
  "repository": "https://github.com/electron/electron-quick-start",
  "keywords": [
    "Electron",
    "quick",
    "start",
    "tutorial",
    "demo"
  ],
  "author": "GitHub",
  "license": "CC0-1.0",
  "devDependencies": {
    "electron": "^29.0.0"
  }
}

这个文件可以由npm init自动生成。自动生成的文件需要将修改为

复制代码
  "scripts": {
    "start": "electron ."
  }

然后就可以通过 vscode直接运行electron程序了。

相关推荐
Cacciatore->15 小时前
Electron 快速上手
javascript·arcgis·electron
vvilkim15 小时前
Electron 进程间通信(IPC)深度优化指南
前端·javascript·electron
ZJ_.10 天前
Electron自动更新详解—包教会版
linux·前端·javascript·windows·electron·前端框架·node.js
£小羽毛11 天前
Electron(01)入门与实战:从环境搭建到打包发布
前端·javascript·electron
摘取一颗天上星️11 天前
Electron架构深度解析:用Web技术构建桌面应用的桥梁
前端·架构·electron
waynaqua11 天前
《情感反诈模拟器》爆火,背后的技术解析
electron
SuperherRo12 天前
Web攻防-XSS跨站&浏览器UXSS&突变MXSS&Vue&React&Electron框架&JQuery库&写法和版本
vue.js·electron·jquery·react·xss·mxss·uxss
£小羽毛13 天前
Electron (02)集成 SpringBoot:服务与桌面程序协同启动方案
java·spring boot·electron
我是来人间凑数的13 天前
electron 配置特定文件右键打开
前端·javascript·electron
集成显卡14 天前
图片压缩工具 | Electron应用配合 commander 提供命令行调用功能
前端·javascript·electron·人机交互·命令行·cmd