首页 > 编程语言 >node 建立一个electron的hello world 的工程 有窗体const { app, BrowserWindow } = require('electron')

node 建立一个electron的hello world 的工程 有窗体const { app, BrowserWindow } = require('electron')

时间:2024-04-07 17:11:45浏览次数:31  
标签:node const app Electron js electron World Hello

 

要创建一个 Electron 的 "Hello World" 工程,可以按照以下步骤进行:

  1. 首先,确保你已经安装了 Node.js。

  2. 使用命令行工具进入你要创建项目的目录。

  3. 运行以下命令来初始化一个新的 Node.js 项目:

    bash|
  • npm init -y
    

    这将创建一个默认的 package.json 文件。

  • 确保你已经在项目目录下安装了 Electron 模块。运行以下命令来安装 Electron:

    bash|
  • npm install electron
    
  • 在你的项目目录下创建一个新的 JavaScript 文件,例如 main.js

  • main.js 文件中添加以下代码:

    javascript|
  • const { app, BrowserWindow } = require('electron');
    
    function createWindow() {
      const win = new BrowserWindow({
        width: 800,
        height: 600,
        webPreferences: {
          nodeIntegration: true
        }
      });
    
      win.loadFile('index.html');
    }
    
    app.whenReady().then(() => {
      createWindow();
    
      app.on('activate', function () {
        if (BrowserWindow.getAllWindows().length === 0) createWindow();
      });
    });
    
    app.on('window-all-closed', function () {
      if (process.platform !== 'darwin') app.quit();
    });
    

    这段代码创建了一个 Electron 窗口,并加载了一个名为 index.html 的文件。

  • 在你的项目目录下创建一个新的 HTML 文件,例如 index.html。在这个文件中,可以添加一些简单的 HTML 内容。

    html|
  • <!DOCTYPE html>
    <html>
    <head>
      <title>Hello World</title>
    </head>
    <body>
      <h1>Hello World</h1>
    </body>
    </html>
    
  • 现在,在命令行中运行以下命令来启动 Electron 应用程序:

    bash|
  1. npx electron .
    

    这将启动 Electron 应用程序并打开一个窗口,其中显示了 "Hello World"。

这样,你就成功创建了一个简单的 Electron "Hello World" 应用程序。可以根据需要修改 main.jsindex.html 文件来扩展应用程序的功能和界面

标签:node,const,app,Electron,js,electron,World,Hello
From: https://www.cnblogs.com/hshy/p/18119455

相关文章

  • NodeJs进阶开发、性能优化指南
    相信对于前端同学而言,我们去开发一个自己的简单后端程序可以借助很多的nodeJs的框架去进行快速搭建,但是从前端面向后端之后,我们会在很多方面会稍显的有些陌生,比如性能分析,性能测试,内存管理,内存查看,使用C++插件,子进程,多线程,Cluster模块,进程守护管理等等NodeJs后端的知识,在这里为大......
  • node.js常用指令
    1、node:启动Node.jsREPL(交互式解释器)。node2、node[文件名]:执行指定的JavaScript文件。nodeapp.js3、npminit:初始化一个新的Node.js项目,生成package.json文件。此命令会创建一个package.json文件,其中包含项目的名称、版本、描述等信息,并且可以选择添加一些默......
  • 基于 bindview.js + node + mysql 的简易记账系统
    该项目前端是基于bindview.js和bootcss,后端的基于node.js使用了express框架,数据库使用的mysql8 bindview: bronze-ding/bindview:Bindview.js,是一个使用虚拟DOM来创建真实DOM并提供了数据响应式的Javascript工具库(github.com)功能包括:增加,删除,修改,查询登录......
  • 如何在 Node.js 中使用 bcrypt 对密码进行哈希处理
    在网页开发领域中,安全性至关重要,特别是涉及到用户凭据如密码时。在网页开发中至关重要的一个安全程序是密码哈希处理。密码哈希处理确保明文密码在数据库受到攻击时也难以被攻击者找到。但并非所有的哈希方法都是一样的,这就是bcrypt突出之处所在。Node.js是一个流行的用于开......
  • Node.js毕业设计基于的动物救助系统(Express+附源码)
    本系统(程序+源码)带文档lw万字以上  文末可获取本课题的源码和程序系统程序文件列表系统的选题背景和意义选题背景:在现代社会中,动物保护已经成为了一个全球性的议题。随着人类社会的发展,动物的生存环境受到了严重的威胁,许多动物面临着生存危机。因此,建立一个有效的动物救......
  • Node.js毕业设计基于的动漫视频管理分析系统的设计与实现(Express+附源码)
    本系统(程序+源码)带文档lw万字以上  文末可获取本课题的源码和程序系统程序文件列表系统的选题背景和意义选题背景:在当今数字化时代,动漫产业作为文化产业的重要组成部分,受到了广大年轻人的热爱和追捧。随着互联网的普及,越来越多的人选择在线观看动漫视频,这为动漫视频管理......
  • (免费赠源码)计算机毕设题目:基于微信小程序的旅游服务系统 77397(开题答辩+程序定制+全套
    springboot旅游服务系统小程序摘 要随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱,旅游服务系统小程序管理系统被用户普遍使用,为方便用户能够可以随时进行旅游服务系统小......
  • Java;springboot;MYSQL+基于springBoot的大学生就业管理85553(免费领源码)计算机毕业设计
    大学生就业管理系统的设计与实现摘 要信息化社会内需要与之针对性的信息获取途径,但是途径的扩展基本上为人们所努力的方向,由于站在的角度存在偏差,人们经常能够获得不同类型信息,这也是技术最为难以攻克的课题。针对学生就业管理等问题,对学生就业管理进行研究分析,然后开发设......
  • Java/Mysql数据库+django学生就业管理系统 24237(免费领源码)计算机毕业设计项目推荐上
    学生就业管理系统摘 要随着社会的快速发展和人们生活水平的不断提高,旅游已逐渐成为人们生活的重要组成部分,用户能够获取旅游信息的渠道也随信息技术的广泛应用而增加。大量未经过滤的信息在展示给用户的同时,也淹没了用户真正感兴趣的信息。为了方便用户快速定位自己感兴趣......
  • Java/Mysql数据库+springboot物流信息管理系统 23895(免费领源码)计算机毕业设计项目推
    本科毕业论文论文题目:物流信息管理系统的设计与实现院(系)名 称:专  业  名 称:学 生 姓  名:指导教师(校内):指导教师(企业):2023年4月 摘要科技进步的飞速发展引起人们日常生活的巨大变化,电子信息技术的飞速发展使得电子信......