electron学习笔记（一）

electron简介

Electron是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架。 Electron 将 Chromium 和 Node.js 嵌入到了一个二进制文件中，因此它允许你仅需一个代码仓库，就可以撰写支持 Windows、macOS 和 Linux 的跨平台应用。

环境安装

作为一个开发小白或者是一个零基础的计算机爱好者，你要学习一门编程技术前提是你得有合适的工具。
代码编辑工具： Visual Studio Code也就是大家所说的VSCode，它的体积小而功能较为全面，有丰富的插件仓库。
代码托管保存工具：Git
运行环境：node.js 建议使用nvm 进行node 版本管理

Electron 核心概念

Electron 主进程与渲染进程

作为一个前端开发工程是你的前端运行都是包含：主进程与渲染进程的
主进程：即main.js
|| IPC通信
渲染进程：每一个页面都是具有自己的渲染进程的（Chromium）

编写一个Electron项目

使用npm init初始化项目,你会获得一个package.json的文件，按照指引进行操作即可

{
  "name": "my-electron-app",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "nodemon --exec electron ."
    //此次 `start` 执行脚本需要全局安装nodemon 
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "electron": "^26.2.0"
  }
}

创建主进程main.js

const {app} = require('electron')

const createWindow =()=>{ 
    const win = new BrowserWindow({
        width: 800,
        height: 600,
        webPreferences: {
            nodeIntegration: true,
            contextIsolation: false
        }
    })
	    // win.loadURL('https://www.baidu.com/')
    win.loadFile('index.html')
    // 打开开发者工具
    win.webContents.openDevTools()

    // 暂时关闭安全警告
    // process.env['ELECTRON_DISABLE_SECURITY_WARNINGS'] = 'true'
}
app.whenReady().then(createWindow)