1-安装electron和基础设置

初始化项目

• npm init -y

安装 electron

• npm i electron -D
• 如果下载不了执行
  • npm config set electron_mirror "npm.taobao.org/mirrors/ele…"

配置命令

• "dev": "electron ." -> main.js

main.js

// 窗口管理 BrowserWindow -> 创建并控制浏览器窗口。
const { BrowserWindow, app } = require("electron");
const path = require('path');

app.whenReady().then(() => {
    // 主进程
    const mainWindow = new BrowserWindow({//配置窗口
        width: 300,
        height: 300,
        alwaysOnTop: true,//z-index在可视的桌面的最上层
        x: 700,//软件位置 x
        y: 100,//软件位置 y
    });

    // 可以加载一个网页 -> 已经又一个网页了想搞一个桌面端软件(嵌入)
    // mainWindow.loadURL("https://baidu.com");

    // 加载文件 -> 分操作系统的了
    // => 启动时打开控制中心
    mainWindow.webContents.toggleDevTools();
    mainWindow.loadFile(path.resolve(__dirname, 'index.html'))
})

• 主进程是nodejs的,不能dom操作
• 其它的js是渲染线程的

nodemon 配置

• 最外层配置 nodemon.json

// => nodemon.json
{
    "ignore": [
        "node_modules",
        "dist"
    ],
    "colours": true,
    "verbose": true,
    "restartable": "rs",
    "watch": [
        "*.*"
    ],
    "ext": "html,js"
}

不同操作系统的处理方式

• 由于ios用户的退出的操作与别的操作系统不一样

// 窗口管理 BrowserWindow -> 创建并控制浏览器窗口。
const { BrowserWindow, app } = require("electron");
const path = require('path');

const createWindow = () => {
    const mainWindow = new BrowserWindow({//配置窗口
        width: 300,
        height: 300,
        alwaysOnTop: true,//z-index在可视的桌面的最上层
        x: 700,//软件位置 x
        y: 100,//软件位置 y
        frame: false,//去掉标题栏 => 但是没有标题栏我们拖不动
        transparent: true,//隐藏白底
    });
    mainWindow.setAspectRatio(1);// 1/1 设置比例 1比1,拖拽才不会变形
    mainWindow.loadFile(path.resolve(__dirname, 'index.html'))
}

app.whenReady().then(() => {
    createWindow();
    
});

// => 监测窗口全退出了
app.on("window-all-closed", () => {
    // 判断是什么操作系统 ios用户操作习惯
    if(process.platform != 'darwin') {//不是苹果系统退出
        app.quit();
    }
});

// 监听窗口唤醒
app.on("activate", () => {
    createWindow();
})

使用样式控制渲染进程

// 窗口管理 BrowserWindow -> 创建并控制浏览器窗口。
const { BrowserWindow, app } = require("electron");
const path = require('path');

const createWindow = () => {
    const mainWindow = new BrowserWindow({//配置窗口
        width: 300,
        height: 300,
        alwaysOnTop: true,//z-index在可视的桌面的最上层
        x: 700,//软件位置 x
        y: 100,//软件位置 y
    });
    mainWindow.loadFile(path.resolve(__dirname, 'index.html'))
}

app.whenReady().then(() => {
    createWindow();  
})
// => 监测窗口全退出了
app.on("window-all-closed", () => {
    // 判断是什么操作系统 ios用户操作习惯
    if(process.platform != 'darwin') {//不是苹果系统退出
        app.quit();
    }
});

// 监听窗口唤醒
app.on("activate", () => {
    createWindow();
})

样式

/* 
    去掉标题栏无法拖动样式 
    叫下面的css
    当点击按住鼠标后可以拖动窗口
*/
html {
    -webkit-app-region: drag;
}

textarea {
    -webkit-app-region: no-drag;
}
body {
    width: 100vw;
    height: 100vh;
}
/* 
electron 中嵌入chrome 浏览器不用担心兼容性
*/