1- Electron 创建项目、初始化项目

Electron官网?Build cross-platform desktop apps with JavaScript, HTML, and CSS | Electron

Electron 初始化

初始化项目 - 构造package.json

npm init -y

安装Electron模块包?

npm i electron -D  //?注意！如果报错查看node包是否太高

配置启动脚本

{
  "main": "main.js",  //配置程序的入口文件，即为主进程
  "scripts": {
    "start": "electron ." //配置项目启动脚本  
  },
}

在终端输入npm run start 启动项目

根目录下创建 mian.js 文件，这是程序的入口文件

const { app, BrowserWindow } = require("electron");

const createWindow = () => {
  const win = new BrowserWindow({
    width: 800, //窗口 宽
    height: 600, //窗口 高
  });
};

app.whenReady().then(createWindow)

将网页镶嵌在应用中

const createWindow = () => {
  const win = new BrowserWindow({
    width: 800, 
    height: 600, 
  });
  win.loadURL("https://www.baidu.com/"); //需要加载的网页
};

本地页面引入项目中

const createWindow = () => {
  const win = new BrowserWindow({
    width: 800, 
    height: 600, 
  });
  win.loadFile('index.html') //引入根目录下的index.html
};

配置热启动?

每次更改项目都要重新启动，真是麻烦死了/(ㄒoㄒ)/~~

npm i nodemon -g 

//package.json 配置启动方式

"scripts": {
    "start": "nodemon --exec electron ."
},

重新启动就可以热启动了，very好用！！！ ps:会跟自动保存有点冲突，尽量不要用自动保存

打开调试窗口

方法1:ctrl+shift+i

方法2：

const createWindow = () => {
  const win = new BrowserWindow({
    width: 800,
    height: 600, 
  });
  win.loadFile('index.html')
  win.webContents.openDevTools() //打开调试工具
};

?关于安全警告?

方法1：在index.html 配置csp（推荐）

<!-- 配置CSP -->
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; img-src 'self' data:; script-src 'self'; style-src 'self' 'unsafe-inline'">

方法2：在main.js中

const createWindow = () => {
  const win = new BrowserWindow({
    width: 800,
    height: 600, 
  });
  win.loadFile('index.html')
  win.webContents.openDevTools() 

  // 暂时关闭安全警告 (所有的警告都被关闭)
  process.env['ELECTRON_DISABLE_SECURITY_WARNINGS'] = 'true'
};