Electron本地环境搭建及初体验

Electron是一个框架，依赖于Node.js，Node.js允许使用JavaScript语言开发服务端程序（web应用）和终端程序（命令行程序），Node.js+JavaScript=PHP。

Node.js: 服务端程序（web、聊天服务器等）和终端程序（命令行程序）。

Electron：桌面应用（跨平台）。

开发Electron桌面应用和开发web应用使用相同的技术-web三剑客：HTML、CSS、JS。

优点：

由于Electron是基于Node.js, 也就是说可以调用大量的Node.js APi

Node.js nodejs.org/en/ Electron www.electronjs.org/

桌面应用可以访问本地资源,各种硬件及OS本身的资源, Docker\touchbar(iMacBook pro)

Electron是Github推出的, Github被微软收购。使用应用有: git desktop\vscode

node -v electron -v 验证是否安装成功

常用事件:

ready
closed: 窗口关闭时触发
window-all-closed: 所有窗口关闭后触发的事件
active: 窗口激活后触发的事件,也就是打开某个窗口聚焦

node环境
npm init -y 初始化项目此时只有package.json文件
type>null index.js
dir /b
安装Electron模块包，安装在开发依赖内

npm install electron --save-dev

6. 安装Electron模块包，可以打包Electron项目，打包成window\Mac\Linux版本

npm install electron-packages --save-dev

修改配置文件，配置启动代码

{
  "name": "demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1",
    "start": "electron ." // 新增启动代码
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "electron": "^21.0.0",
    "electron-packager": "^16.0.0"
  }
}

编辑入口文件index.js

const electron = require('electron');
const {app, BrowserWindow} = electron;
const path = require('path');
const url = require('url');

 let win = null;
 app.on('ready', () => {
     win = new BrowserWindow({
         width: 800,
         height: 600
     });
     win.loadURL("https://baidu.com")
 });

加载了百度网页