1 electron的helloworld

最新推荐文章于 2024-07-15 11:08:06 发布

码未央

最新推荐文章于 2024-07-15 11:08:06 发布

阅读量325

点赞数 5

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

本文链接：https://blog.csdn.net/tryto21/article/details/138121897

版权

electron 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

当前系统为win10，安装nodejs最新版20.12.2，注意以下几点：

内网环境不要使用代理，最好直连互联网，不然各种下载不了。
不要换源，不要换什么国内阿里源，也是各种下载不了。
涉及下载安装的命令，如果卡主安装失败就多执行几次

1. 初始化nodejs项目

新建一个目录electron_demo，命令行进入该目录，执行"npm init -y"

PS E:\electron_demo> npm init -y

会创建一个package.json文件（不加-y，可以自己填具体信息），内容如下：

{
  "name": "electron_demo",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "description": ""
}

2. 安装electron依赖

命令行执行"npm install electron"，这个命令我下载失败过多次，多试几次就行了，不要换源，不要用代理。

PS E:\electron_demo> npm install electron
added 77 packages, and audited 78 packages in 12s

21 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

3. 创建index.js和index.html文件

// 引入 Electron 的核心模块 app 和 BrowserWindow，用于创建和管理应用程序窗口
const { app, BrowserWindow } = require('electron');
// 引入 Node.js 内置的 path 模块，用于处理文件路径
const path = require('path');

/**
 * 创建并初始化一个新的浏览器窗口函数
 */
function createWindow() {
    // 创建一个新窗口实例，设置宽高分别为 1200 像素和 600 像素
    const win = new BrowserWindow({
        width: 1200,
        height: 600,
        // 设置 web 页面预加载选项，允许在渲染进程中使用 Node.js API
        webPreferences: {
            nodeIntegration: true
        }
    });

    // 加载应用主界面 HTML 文件
    win.loadFile(path.join(__dirname, 'index.html'));

    // 打开开发者工具以便调试
    win.webContents.openDevTools();
}

// 当 Electron 应用程序准备就绪时，执行创建窗口的操作
app.whenReady().then(createWindow);

// 监听 window-all-closed 事件，在所有窗口都关闭时（非macOS平台）
app.on('window-all-closed', () => {
    // 若当前运行环境不是 macOS，当所有窗口关闭时退出整个应用程序
    if (process.platform !== 'darwin') {
        app.quit();
    }
});

// 在 macOS 上，当 dock 图标被点击并且没有其他打开的窗口时，重新打开一个窗口
app.on('activate', () => {
    // 检查是否有已存在的窗口，如果没有，则新建一个窗口
    if (BrowserWindow.getAllWindows().length === 0) {
        createWindow();
    }
});

<!DOCTYPE html>
<!-- 定义文档类型和编码 -->
<html lang="zh">
<head>
  <!-- 设置网页字符集为UTF-8 -->
  <meta charset="UTF-8">
  <!-- 设置网页标题 -->
  <title>Electron Hello World !</title>
</head>
<body>
  <!-- 创建一个按钮元素 -->
  <button id="myButton">hello</button>
  <!-- 引入外部 JavaScript 文件 index.js -->
  <script src="index.js"></script> <!-- 注意这里应该是src而不是inde -->
  <!-- 内联 JavaScript 代码段，用于处理按钮点击事件 -->
  <script>
    // 获取页面上id为'myButton'的按钮元素
    var button = document.getElementById('myButton');
    // 为按钮添加点击事件监听器
    button.addEventListener('click', function() {
      // 当按钮被点击时，弹出一个警告对话框显示消息
      alert('Hello World ！');
    });
  </script>
</body>
</html>

4. 运行

回到上级目录，命令行执行“npx electron electron_demo”

PS E:\> npx electron electron_demo

在这里插入图片描述

码未央

关注

5
点赞
踩
10

收藏

觉得还不错? 一键收藏
打赏
0
评论
1 electron的helloworld

命令行执行"npm install electron"，这个命令我下载失败过多次，多试几次就行了，不要换源，不要用代理。新建一个目录electron_demo，命令行进入该目录，执行"npm init -y"回到上级目录，命令行执行“npx electron electron_demo”// 获取页面上id为'myButton'的按钮元素。// 当按钮被点击时，弹出一个警告对话框显示消息。// 为按钮添加点击事件监听器。
复制链接

扫一扫