electron草稿笔记

1. Electron简介：Electron 是由 Github 开发，是一个用 HTML，CSS 和 JavaScript 来构建跨平台桌面应用程序的一个 开源库。

原理：Electron 通过将 Chromium 和 Node.js 合并到同一个运行时环境中，并 将其打包为 Mac，Windows 和 Linux 系统下的应用来实现这一目的。

现状：目前 Electron 已成为开源开发者、初创企业和老牌公司常用的开发工具。

核心理念：保持 Electron 的体积小 和 可持续性开发。

学习electron的基础：电脑需要安装 nodejs，电脑上面需要安装 git，需要有 Html css js 以及 nodejs 基础。

2. Electron的安装搭建：

    2.1 全局安装electron：npm install -g electron。

    2.2 克隆仓库electron-quick-start项目：

# 克隆示例项目的仓库 
git clone https://github.com/electron/electron-quick-start
# 进入这个仓库 
cd electron-quick-start
# 安装依赖并运行 
npm install && npm start

     2.3 手动创建项目：

          （1）、新建一个项目目录 例如：electrondemo01

          （2）、在 electrondemo01 目录下面新建三个文件: index.html、main.js 、package.json

          （3）、index.html 里面用 css 进行布局（以前怎么写现在还是怎么写）

          （4）、在 main.js 中写如下代码：

var electron =require('electron');
//electron 对象的引用 
const app=electron.app;
//BrowserWindow 类的引用 
const BrowserWindow=electron.BrowserWindow;

let mainWindow=null;
//监听应用准备完成的事件 


function createWindow(){
    mainWindow=new BrowserWindow(
        {
            width: 800,
            height: 600,
            frame: false,   //默认为true，设置为false表示不显示窗口的头部导航栏（最大，最小，关闭栏）
        }
    ); 
    
    mainWindow.loadFile('index.html');  //入口加载文件，mainWindow.loadURL(`file://${__dirname}/index.html`)
    mainWindow.webContents.openDevTools();  //开启调试
    mainWindow.on('closed', function () { 
        mainWindow = null;
    })
}
app.on('ready',createWindow)
//监听所有窗口关闭的事件 
app.on('window-all-closed', function () {
    if (process.platform !== 'darwin') { //mac上需要单独处理 窗口关闭
        app.quit();
    }
})

app.on('activate', () => {
// 对于 OS X 系统，当 dock 图标被点击后会重新创建一个 app 窗口，并且不会有其他
// 窗口打开
    if (mainWindow === null) {
        createWindow();
    }
})

          （5）、运行：

electron.   //注意后面的点

     2.4 electron-forge 搭建一个 electron 项目：

npm install -g electron-forge 
electron-forge init my-new-app 
cd my-new-app 
npm st