Electron配置以及常见API方法

前言

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

安装以及配置

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

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

进程结合实现

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

  • 渲染进程

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

  • 主进程

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

调试

渲染进程调试

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

![IMAGE](quiver-image-url/151FD521B96CF70CEEB1E56C4AB3D14B.jpg =239x186)

主进程调试

这边小编用的vscode,首先配置一下debug中的launch.json文件 ![IMAGE](quiver-image-url/D20FD15A02A3C804E75B8F5570C9E4AF.jpg =303x243)

{
    "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...

原文链接:juejin.im

上一篇:一个白学家眼里的 WebAssembly
下一篇:Angular与Vue生命周期

相关推荐

  • 高阶组件 + New Context API = ?

    1. 前言 继上次小试牛刀(https://github.com/SmallStoneSK/Blog/issues/6)尝到高价组件的甜头之后,现已深陷其中无法自拔。。。

    2 年前
  • 面试必备! HTML常见面试题汇总

    基本按所有面经出现的频率来进行汇总 一、 script标签为什么要放在body标签的底部,【defer async】 因为浏览器在渲染html的时候,从上到下依次执行,遇到js文件就会停止当前页面的渲...

    18 天前
  • 零基础-5小时开发一个electron应用-[实践]

    (一、背景 "一、背景")一、背景 (三、技能升级 "三、技能升级")三、技能升级 ​ 明明可以用颜值取胜,非要靠才华?不对,明明可以用代码搞定,非要搞设计?步入正题,正好最近对electro...

    3 年前
  • 重构 - 设计API的扩展机制

    1.前言 上篇文章,主要介绍了重构的一些概念和一些简单的实例。这一次,详细的说下项目中的一个重构场景给API设计扩展机制。目的就是为了方便以后能灵活应对需求的改变。

    2 年前
  • 重新开坑,在 react 中使用 composition API

    emmm大家好,那个,虽然最近新型肺炎,搞的人心惶惶,没啥动力写码 其实我也没啥可写的了,但是闲着也是闲着,然后记起来 smox 弃坑了还有一堆星星,想着怎么重新开坑 背景 smox 弃坑,不是我任性...

    6 个月前
  • 配置|electron+vue+ts+sqlite配置

    从编程模型的角度来说,使用声明式语言声明样式和布局,使用功能完备的编程语言编写业务逻辑,算是GUI程序的一种最好的实践了。 最近要写一个个人项目,于是我自然想到使用前端来写界面。

    2 年前
  • 配置electron中puppeteer executablePath的正确姿势

    TL; NR 轻量, remote调用(使用本地chrome) = 将chromium整合进安装包(需要asar打包时排除chromium), macOS下验证失败 = 这个问题在...

    2 年前
  • 那些不常见,但却非常实用的js知识(整理不易)

    一、window window 对象表示一个包含 DOM 文档的窗口,其 document 属性指向窗口中载入的 DOM 文档 。 1、window 属性和方法 在有标签页功能的浏览器中,每个标签都拥...

    5 天前
  • 那些不常见,但却非常实用的css属性(整理不易)

    1、webkitlineclamp 可以把 块容器 中的内容限制为指定的行数。并且在超过行数后,在最后一行显示"..." 这是正常的展示 image(/public/upload/170c7c4a...

    1 个月前
  • 那些不常见,但却非常实用的 css 属性

    作者:寒水寺一禅https://segmentfault.com/a/11900000228515431、webkitlineclamp可以把 块容器 中的内容限制为指定的行数。

    5 天前

官方社区

扫码加入 JavaScript 社区