初识electron

最新推荐文章于 2024-10-10 09:56:47 发布

上分的菜鸡

最新推荐文章于 2024-10-10 09:56:47 发布

阅读量114

点赞数

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

本文链接：https://blog.csdn.net/weixin_36352085/article/details/115118955

版权

html 同时被 3 个专栏收录

3 篇文章 0 订阅

订阅专栏

3 篇文章 0 订阅

订阅专栏

electron

1 篇文章 0 订阅

订阅专栏

这里写自定义目录标题

初识electron
- 关于安装
- 第一个项目

初识electron

关于安装

// 1.下载node.js，选择最新稳定版即可
// 2.在cmd中输入以下代码查看是否安装成功
node -v
npm -v
// 3.设置淘宝镜像
npm config set registry https://registry.npm.taobao.org
// 4.创建项目，并初始化
mkdir my-electron-app
cd my-electron-app
npm init -y
// 这一步比较久，要是没成功再次执行即可
npm i --save-dev electron

以上我们就安装好了electron
接着创建空的index.html,main.js,preload.js三个文件
目录结构应该是这个样子
在这里插入图片描述

第一个项目

现在开始写第一个入门项目

// main.js
// 是项目入口
const { app, BrowserWindow } = require('electron')
const path = require('path')
// 这是创建窗口的方法
function createWindow () {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      // 预加载的js
      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()
  }
})

然后是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 style="background: white;">
    <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>

最后是preload.js

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

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

启动时修改package.json配置

{
  "name": "my-electron-app",
  "version": "1.0.0",
  "description": "",
  // 修改一:讲index.js改为main.js
  "main": "main.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    // 修改二:添加启动方式
    "start": "electron ."
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "electron": "^12.0.1"
  }
}