Electron桌面软件学习笔记

---

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

---

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

一、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
   

简单的小示例

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'))
   }
   

---