Electron 开发笔记

1、创建electron项目

在windows下面使用electron创建项目非常简单，首先下载electron解压之后在resources文件夹下面创建一个app目录

进入该目录执行npm init，执行npm init之后默认的启动文件就是index.js。启动electron.exe之后electron就会自动去执行index.js 这个时候就可以在index.js 里面创建浏览器窗口要求electron去加载一个网页，不过这里如果加载本地网页的话貌似必须使用全路径，而不能使用相对路径

index.js

const {load}=require("./electron/window.js")
const {currentPath}=require("./electron/path.js")

/*打开入口页面*/
load(currentPath)

./electron/windows.js

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

var mainWindow = null

// Quit when all windows are closed.
app.on('window-all-closed', () => {
    app.quit()
})
exports.load=(Url)=>{
    app.on('ready', () => {
        mainWindow = new BrowserWindow({
            width: 800,
            height: 600,
            frame: false,
            autoHideMenuBar: true,
            backgroundColor: '#FFFFFF',
            useContentSize: true
        })
        mainWindow.setFullScreen(true);
        mainWindow.loadURL(Url)
        mainWindow.focus()
    })

}

./electron/path.js

/*获得入口页面全路径*/
exports.currentPath=(()=>{
    var path=process.execPath;
    var currentPath="";

    ((a)=>{a.pop();return a})(path.split("\\")).forEach((x,i)=>{
        currentPath+=x+"\\"
    })
    currentPath+="resources\\app\\web\\index.html"
    return currentPath;
})()

electron官方打开网页窗口的demo比较复杂，我对他进行了简化，不过该demo只支持windows环境

2、使用electron创建无框架窗口

使用electron打开网页窗口的时候，这个窗口是带标题栏和边框的，如果要创建更美观的页面我们一般是需要创建一个无标题栏和边框的浏览器窗口。

默认带标题栏和边框的浏览器窗口：

更具electron文档的说明在调用 new BrowserWindow的时候添加参数可以创建无框架窗口

mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    frame: false,
    autoHideMenuBar: true,
    backgroundColor: '#FFFFFF',
    useContentSize: true
})

调用如下代码，成功创建一个无界面窗口，不过这样一个窗口是不能拖动的，想要这个网页可拖动的话方案就是创建一个可点击区域，其实就是创建一个矩形加入样式

-webkit-app-region: drag;

我在页面中创建了一个简单的标题栏

<div style="height: 50px;width: 100%; background: red;-webkit-app-region: drag;">
    丑陋的标题栏
</div>

效果如下：

这个时候拖动整个窗口中红色的部分就可多动整个浏览器窗口，而拖动白色的部分则无法拖动窗口，而且双击红色部分整个浏览器窗口会被最大化

3、创建全屏窗口

不过我们计划开发的应用是一个全屏程序，查找了下文档发现有

win.setFullScreen(flag)

这个函数可以设置窗口为全屏模式

代码：

mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    frame: false,
    autoHideMenuBar: true,
    backgroundColor: '#FFFFFF',
    useContentSize: true
})
mainWindow.setFullScreen(true);
mainWindow.loadURL(Url)
mainWindow.focus()

窗口创建完成之后立即开启全屏模式，并且覆盖windows系统的任务栏