electron的HelloWorld

最新推荐文章于 2024-07-30 18:56:40 发布

任继宏

最新推荐文章于 2024-07-30 18:56:40 发布

阅读量393

点赞数

分类专栏： electron 文章标签： node.js javascript html

本文链接：https://blog.csdn.net/weixin_44077336/article/details/111913403

版权

electron 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

electron的HelloWorld

1.初始化项目

mkdir my-electron-app && cd my-electron-app //创建目录并进入
npm init -y // 初始化package.json
npm i --save-dev electron // 安装electron

2. 创建项目入口文件main.js，并编写如下代码

const { app, BrowserWindow } = require('electron') // 引入app和BrowserWindow模块

function createWindow () { // 声明创建窗口函数
  const win = new BrowserWindow({ // 创建一个窗口，名字为win
    width: 800, // 窗口宽度
    height: 600, // 窗口高度
    webPreferences: { // 配置首选项
      nodeIntegration: true
    }
  })

  win.loadFile('index.html') // 加载index.html文件到win窗口
}

app.whenReady().then(createWindow) // 当app准备好的时候调用createWindow方法创建窗口

app.on('window-all-closed', () => { // 窗口关闭监听
  if (process.platform !== 'darwin') { // 当所有窗口都关闭时尝试退出整个app
    app.quit()
  }
})

app.on('activate', () => { // 只有在程序激活的时候（第一次运行或重启）时才能创建一个新的窗口
  if (BrowserWindow.getAllWindows().length === 0) {
    createWindow()
  }
})

⚠创建完main.js文件后需要注意：

初始化的package.json文件默认程序入口时index.js，需要将其改为main.js
在scripts中配置项目启动命令，通常情况下配置启动命令为start："start": "electron ."

3.创建index.html文件

第二步完成后，已经可以通过npm start运行程序，但是只是一个空窗口，代码中引入的index.html并不存在
在这里插入图片描述
因此我们在项目根目录创建iindex.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 style="background: white;">
  <h1>Hello World!</h1>
  <p>
    We are using node <script>
      document.write(process.versions.node)  // 获取node版本
    </script>,
    Chrome <script>
      document.write(process.versions.chrome) // 获取chrome版本
    </script>,
    and Electron <script>
      document.write(process.versions.electron) // 获取electron版本
    </script>.
  </p>
</body>

</html>