Electron配置以及常见API方法

前言

近期有一个Electron的相关需求小编在这边系统的学习一下，然后这篇文章就是简单记录一下配置以及一些简单的api方法

安装以及配置

Electron给小编的感觉就是实现桌面化网页的一个工具，通俗粗暴来说，把浏览器内核拿过来渲染页面，引擎拿过来实现js，那么优点很明显他是能跨平台的。

我们通过官网教程下载即可，导入Electron时一定记得用淘宝镜像下载。小编自己被整了一波的。官网地址

进程结合实现

Electron分为渲染进程和主进程，我们反过来看一下Electron的工程目录其实很容易理解这点。

• 渲染进程

  我们所看到的程序页面就是由Electron的渲染进程实现描绘。包括html、css、以及渲染形式的js

• 主进程

  package.json中所配置的main所对应文件被称为主进程，创建web页面展示用户界面。

调试

渲染进程调试

启动项目后我们在这里可以调出渲染进程控制台(就是浏览器控制台) 快捷键：alt+command(control)+i


主进程调试

这边小编用的vscode，首先配置一下debug中的launch.json文件 

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "Launch Program",
            "cwd": "${workspaceRoot}",
            "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron",
            "windows": {
                "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron.cmd"
            },
            "args": ["."],
            "outputCapture": "std",
        }
    ]
}

配置好后我们就可以直接设置断点然后调试相关文件

常用的api事件

网页化程序我们很容易就想到，常用api当然是程序(app)，以及网页(BrowserWindow对象)，可以根据我们所拷贝的快速启动程序对照着看一下，每种事件都对应了各自的几种生命周期，

app常用事件

• ready 当完成初始化时触发

• window-all-closed 所有窗口关闭

• before-quit 开始关闭窗口之前触发(点叉叉的时候)

• will-quit 窗口关闭应用程序将退出时触发(点叉叉之后)

• quit 程序关闭后

我们看一下Electron实例结合说明一下,我们可以在每一步里面加上console去感受一下声明周期是在哪个节点所实现的拿app的ready事件举例，具体方法实现我们先不管。

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

let mainWindow

function createWindow () {
    mainWindow = new BrowserWindow({
        width: 800,
        height: 600,
        webPreferences: {
            preload: path.join(__dirname, 'preload.js')
        }
    })
    mainWindow.loadFile('index.html')
    mainWindow.on('closed', function () {
            mainWindow = null
    })
}

// app.on('ready', createWindow)
app.on('ready', () => {
    console.log('course is ready')
    creatWindow();
})

app.on('window-all-closed', function () {
    if (process.platform !== 'darwin') app.quit()
})

app.on('activate', function () {
    if (mainWindow === null) createWindow()
})

常见操作对象

File对象

进行文件操作时我们还是可以通过node提供的fs对象进行操作，那么Electron为文件对象提供了一个path属性 我们看一下下面这个例子

这边我们默认页面定义了一个空白区域供我们拖拽文件，文件拖拽进去我们可以实现对文件详细信息的读取

这边实现了对拖拽进来的文件的绝对路径显示以及文件信息的显示

  let fs = require('fs')
  document.addEventListener('drop', (e) => {
    // 取消默认事件
    e.preventDefault();
    // 读取拖拽过来的文件(一个或多个)赋到file数组中去
    const file = e.dataTransfer.files;
    if(file.length > 1) {
      alert('一次只能拖拽一个文件')
    }
    else {
      // 获取文件绝对路径，后续就可以通过path去对文件进行操作
      const path = file[0].path;
      console.log('path:',path);
      const content = fs.readFilefs.readFileSync(path);
      console.log(content);
    }
  });
  document.addEventListener('dragover', (e) => {
    // 拖拽开的默认事件同样也要取消一下
    e.preventDefault();
  });

window.open函数

页面跳转函数，跳转到一个新的窗口，我们通过给标签附上相关事件可以实现

// link假设为标签按钮
let subWin;
link.addEventListener('click', () => {
    subWin = window.open('https://www.taobao.com');
})

BrowserWindowProProxy 对象

对于上面的代码跳转的子窗口对象也有相应的事件，我们最开始将定义一个对象将子窗口事件赋值到定义的对象上。

// 关闭窗口的实例属性
subWin.close();

ending...