当前位置:迪客赚 > 正文

Electron快速入门

作者:迪客赚 发布时间:2022-07-05 15:38:09

本指南将会通过使用Electron创建一个极简的 Hello World 应用一步步的带你了解,该应用与electron/electron-quick-start类似。通过这个教程,你的app将会打开一个浏览器窗口,来展示包含当前正在运行的 Chromium, Node.js与 Electronweb等版本信息的web界面

mkdir my-electron-app && cd my-electron-app
npm init
{
  "name": "my-electron-app",
  "version": "1.0.0",
  "description": "Hello World!",
  "main": "main.js",
  "author": "cr",
  "license": "MIT"
}
npm install --save-dev electron
npm start

image.png

main.js

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

function createWindow () {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js')
    }
  })

  win.loadFile('index.html')
}

app.whenReady().then(() => {
  createWindow()

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

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

preload.js

window.addEventListener('DOMContentLoaded', () => {
  const replaceText = (selector, text) => {
    const element = document.getElementById(selector)
    if (element) element.innerText = text
  }

  for (const type of ['chrome', 'node', 'electron']) {
    replaceText(`${type}-version`, process.versions[type])
  }
})

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';" />
</head>
<body>
    <h1>Hello World!</h1>
    <p>
        We are using Node.js <span id="node-version"></span>,
        Chromium <span id="chrome-version"></span>,
        and Electron <span id="electron-version"></span>.
    </p>
</body>
</html>

执行打包

image.png

来源:(QQ/微信:313919848),转载请保留出处和链接!如有侵权或出处有误请联系网站客服,我们会第一时间为你处理。

本文链接: https://www.dikezhuan.com/post/91951.html

最新评论

欢迎您发表评论:

请登录之后再进行评论

登录
表情推荐
  • 哥哥抱抱
  • 哥哥是不是不要我了
  • 哥哥是糖哥哥是药哥哥是我的羽绒外套
  • 哥哥认真的样子好f帅
  • 哥哥面前条弯弯的河妹妹胸前荡起层层的波
  • 哥好歹是跟着康熙爷南征北战会怕你这傻逼吗
  • 哥就是帅
  • 哥就是帅哥就是酷哥就是风中匹狼
  • 哥就是帅哥就是风中的匹狼
  • 哥就是帅就是酷哥就是风中匹狼
  • 哥就是装逼大神装逼大礼最帅最屌
  • 哥就是风中的匹马