创建Electron项目

Sky_Cat

已于 2023-11-02 17:12:28 修改

阅读量650

点赞数

分类专栏： web 文章标签： electron 前端 javascript

于 2022-01-10 11:30:00 首次发布

本文链接：https://blog.csdn.net/Sky_Cat/article/details/122406628

版权

web 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1：执行npm init 命令，生成package.json

{
  "name": "my-electron-app",
  "version": "1.0.0",
  "description": "Hello World!",
  "main": "index.js",
  "author": "Jane Doe",
  "license": "MIT",
  "scripts": {
    "start": "electron ."
  },
  "devDependencies": {
    "electron": "^16.0.6",
    "electron-packager": "^15.4.0"
  },
  "packager": "electron-packager . --platform=darwin --electron-version=1.0.1 --overwrite"
}

或者执行：npm init -y命令

2：安装electron：npm install --save-dev electron，如果安装不了electron依赖，请先安装cnpm

npm install -g cnpm --registry=https://registry.npm.taobao.org

然后执行cnpm install electron

3：新建index.js；

// main.js

// 控制应用生命周期和创建原生浏览器窗口的模组
const { app, BrowserWindow } = require('electron')
const path = require('path')

function createWindow() {
    // 创建浏览器窗口
    const mainWindow = new BrowserWindow({
        width: 800,
        height: 600,
        webPreferences: {
            preload: path.join(__dirname, 'preload.js')
        }
    });

    // 加载 index.html
    mainWindow.loadURL(`${__dirname}/index.html`)

    // 打开开发工具
    // mainWindow.webContents.openDevTools()
}

// 这段程序将会在 Electron 结束初始化
// 和创建浏览器窗口的时候调用
app.on("ready", createWindow);
// 部分 API 在 ready 事件触发后才能使用。
// 除了 macOS 外，当所有窗口都被关闭的时候退出程序。 因此，通常对程序和它们在
// 任务栏上的图标来说，应当保持活跃状态，直到用户使用 Cmd + Q 退出。
app.on('window-all-closed', function () {
    if (process.platform !== 'darwin') app.quit();
})

// 在这个文件中，你可以包含应用程序剩余的所有部分的代码，
// 也可以拆分成几个文件，然后用 require 导入。

4：新建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])
  }
})

5：新建index.html

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">
  <meta http-equiv="X-Content-Security-Policy" content="default-src 'self'; script-src 'self'">
  <title>Hello World!</title>
</head>

<body>
  <h1>Hello World!</h1>
  We are using Node.js <span id="node-version"></span>,
  Chromium <span id="chrome-version"></span>,
  and Electron <span id="electron-version"></span>.
</body>

</html>

6：安装electron-packager， npm install electron-packager -save-dev用于发布；

7：发布应用程序：electron-packager ./ wangjie --platform=win32 --arch=x64 --out=./app --electron-version=1.0.0

Sky_Cat

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
创建Electron项目

1：执行npm init 命令，生成package.json{ "name": "my-electron-app", "version": "1.0.0", "description": "Hello World!", "main": "index.js", "author": "Jane Doe", "license": "MIT", "scripts": { "start": "electron ." }, "devDependencies": {
复制链接

扫一扫

专栏目录