Electron桌面软件学习笔记

文章目录

  • 一、electron是什么?
  • 二、使用步骤
    • 1.创建一个入口main文件:main.js
    • 2.安装electron
    • 3.Main.js文件
    • 4.执行文件的2种办法
    • 简单的小示例


# 前言 提示:这里可以添加本文要记录的大概内容: 例如:随着人工智能的不断发展,机器学习这门技术也越来越重要,很多人都开启了学习机器学习,本文就介绍了机器学习的基础内容。

提示:以下是本篇文章正文内容,下面案例可供参考

一、electron是什么?

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

二、使用步骤

1.创建一个入口main文件:main.js

2.安装electron

代码如下(示例):

npm init -y  初始化配置文件  ——》 package.json
npm i electron -D

3.Main.js文件

创建应用 ——》创建窗口 ——》加载内容——》打开调试工具

4.执行文件的2种办法

  1. 直接执行:electron main.js
  2. 默认执行:electron .
  3. 添加脚本: ‘start’: ‘electron main.js’ ——》 npm run start
    Electron桌面软件学习笔记_第1张图片

简单的小示例

  1. 创建入口文件main.js

  2. 初始化配置文件 npm init -y

  3. 安装electron

    npm i electron -D
    
  4. 引入模块

    // 引入模块
    // app模块: 控制应用的生命周期
    // BrowserWindow: 创建一个浏览器窗口
    const { app,BrowserWindow} = require('electron')
    

    5.创建窗口

    // path是node内置模块 目的:拼接路径
    const path = require('path')
    
    // 1.初始化应用之后,会触发监听ready事件
    app.on('ready', createWindow)
    
    let window;
    // 创建窗口
    function createWindow() {
      // 创建窗口
      window = new BrowserWindow({
        width:300,
        height:300,
        movable: true, //可移动
        resizable: true
      });
      // 加载内容
      // 加载远程
      // window.loadURL('http://www.baidu.com')
      // 加载本地内容
      // __dirname:找到当前js文件所在的文件夹路劲
      // path.join(绝对路径,相对路径) 如果是mac系统的话,需要file:// ,例如path.join('file://',__dirname,'./index.html')
      window.loadURL(path.join(__dirname,'./index.html'))
    }
    

你可能感兴趣的:(笔记,前端,html,css)