创建第一个electron项目

这篇具有很好参考价值的文章主要介绍了创建第一个electron项目。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

安装

  • 创建package.json
npm init
  • 创建electron
 npm install --save-dev electron
  • 创建程序主入口文件 main.js,electron分为主进程和渲染进程,main,js也可以理解为electron项目的主进程,在主进程中是node环境不可以写操作dom方法,在渲染进程中是浏览器环境 可以写操作dom的一些方法
  • 使用nodemon快速启动项目
npm install -g nodemon 
  • package.json文件里面的配置 我这里的版本是28,后续博客关于electron的项目也是这个版本
{
    "name": "my-electron-app",
    "version": "1.0.0",
    "description": "Hello World!",
    "main": "main.js",
    "author": "Jane Doe",
    "license": "MIT",
    "scripts": {
        "start": "nodemon --exec electron ."
    },
    "devDependencies": {
        "electron": "^28.1.0"
    }
}
  • main.js 基本配置
//BrowserWindow 窗口模块
const { app, BrowserWindow } = require("electron");
const path = require("path");
const createWindow = () => {
    // Create the browser window.
    const mainWindow = new BrowserWindow({
        width: 600,
        height: 600,
        webPreferences: {
            preload: path.join(__dirname, "preload.js"),
        },
        frame: false, //隐藏标题栏
    });
    //每次启动弹出调试框
    mainWindow.webContents.toggleDevTools();
    // 加载页面文件
    mainWindow.loadFile(path.resolve(__dirname, "index.html"));
    // 加载外部链接
    // mainWindow.loadURL('https://www.bilibili.com/video/BV1XA411m7Rz?p=7&vd_source=3f2d70e03f43eedd302d3543ad8099b2')
    // 打开开发工具
    // mainWindow.webContents.openDevTools()
};
  1. 在main.js 中加载了index.html页面,也可以使用在线的url,为了方便开发进行调试可以使用mainWindow.webContents.openDevTools()这个方法打开调试器 这样就不用每次手动去点开了

index页面配置

<!--index.html-->

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">
    <title>你好!</title>
</head>

<body>
    <h1>1121asdasdasdasd 3!</h1>
    我们正在使用 Node.js <span id="node-version"></span>, Chromium <span id="chrome-version"></span>, 和 Electron <span id="electron-version"></span>.

    <!-- 您也可以此进程中运行其他文件 -->
  	        <script src="./renderer.js"></script>
</body>

</html>

启动项目

npm start

文章来源地址https://www.toymoban.com/news/detail-771860.html

到了这里,关于创建第一个electron项目的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • web前端项目使用electron打包成跨平台桌面端程序(Windows)

    Electron是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架。 嵌入 Chromium 和 Node.js 到 二进制的 Electron 允许您保持一个 JavaScript 代码代码库并创建 在Windows上运行的跨平台应用 macOS和Linux——不需要本地开发 经验。 在使用Electron进行开发之前,您需要安装 Node.js。 我们建

    2024年02月16日
    浏览(83)
  • 使用 JavaScript 创建一个简单的计算器

    介绍: JavaScript 是一种广泛应用于网页开发的脚本语言,它具有灵活、动态和强大的特性。本文将演示如何使用 JavaScript 创建一个简单的计算器,并实现基本的加减乘除操作。 正文: javascript 解释: 以上代码是一个简单的 HTML 页面,其中包括两个输入框和四个按钮,用于实

    2024年02月03日
    浏览(58)
  • 使用 JavaScript 创建一个兔年春节倒数计时器

    💂 个人网站:【 海拥】【神级代码资源网站】【办公神器】 🤟 基于Web端打造的:👉轻量化工具创作平台 💅 想寻找共同学习交流的小伙伴,请点击【全栈技术交流群】 给大家安利一个免费且实用的轻量化工具创作平台,👉点击跳转到网站。 我们可以通过多种方式构建

    2024年01月23日
    浏览(74)
  • 【JavaScript】3.1 项目实践:制作一个简单的网页应用

    在此章节中,我们将学习如何使用JavaScript创建一个简单的网页应用。这将是一个待办事项列表应用,用户可以添加新的待办事项,标记已完成的事项,以及删除事项。通过这个项目,我们将学习如何使用JavaScript操作DOM,处理事件,以及使用localStorage进行数据存储。 我们的待

    2024年02月05日
    浏览(45)
  • 如何用Hbuilder创建一个微信小程序的前端界面

    目录 1.下载Hbuuilder软件https://www.dcloud.io/hbuilderx.html 2.打开软件 3.选择默认模板 4.创建项目成功 5.获取APPid 6.立即注册小程序 7.注册完成之后,登录小程序 8.复制Appid到微信小程序发行 9.在目录manifest.json配置中,配置Uni-app的(AppID) 10.点击发行 11.下载微信开发者工具 12.假如遇到报

    2024年04月17日
    浏览(93)
  • 项目创建第一天 搭建前端环境

    提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 提示:这里可以添加本文要记录的大概内容: 前端环境 Hbuider x + elementui 转发 nginx 后台环境 springcloud 提示:以下是本篇文章正文内容,下面案例可供参考 示例:构建代码的土壤 导入 安装路由 在根目录

    2024年02月03日
    浏览(53)
  • 创建第一个 Flink 项目

    Flink 执行环境主要分为本地环境和集群环境,本地环境主要为了方便用户编写和调试代码使用,而集群环境则被用于正式环境中,可以借助 Hadoop Yarn 、 k8s 或 Mesos 等不同的资源管理器部署自己的应用。 环境依赖: 【1】 JDK 环境: Flink 核心模块均使用 Java开发,所以运行环境

    2024年02月05日
    浏览(36)
  • 创建第一个SpringBoot项目

    ✅作者简介:大家好,我是Leo,热爱Java后端开发者,一个想要与大家共同进步的男人😉😉 🍎个人主页:Leo的博客 💞当前专栏: 循序渐进学SpringBoot ✨特色专栏: MySQL学习 🥭本文内容:创建第一个SpringBoot项目 📚个人知识库: Leo知识库,欢迎大家访问 大家好,我是Leo哥🫣

    2024年02月04日
    浏览(39)
  • Gitlab创建一个空项目

    1. 创建项目   Project slug是访问地址的后缀,跟前边的ProjectUrl拼在一起,就是此项目的首页地址; Visibility Level选择默认私有即可,选择内部或者公开,就会暴露代码。 勾选Readme选项,这样项目内默认会带一个Readme文件。 2. 邀请成员 Maintainer权限可以邀请成员,直接在“GitL

    2024年02月11日
    浏览(39)
  • 创建一个django项目详细说明

    1.首先安装django   pip install django 2.创建django项目 输入命令后自动生成相关文件 manage.py文件:这是管理Django项目的重要命令行工具,它主要用于启动项目、创建应用和完成数据库的迁移等。 settings.py文件:这是Django项目的配置文件,包含了项目的基本信息、静态文件路径、模

    2024年02月16日
    浏览(47)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包