随笔：Electron （一）

上下博客 2021-06-17

271

设计同事向我推荐了一个浏览器：xxx浏览器。让他比较心仪的功能是浏览器有一些设计网址，便于寻找“灵感”。聊完后觉得浏览器的这个书签功能还是挺有意思的，就想着做一个类似的。本来打算使用C++来做，不过还是打算试一试跨平台的开发框架，例如：Electronjs。使用这款框架的原因是因为官网一句话：Black Lives Matter. Support the Equal Justice Initiative and read our statement here.（黑人的命也是命。支持平等正义倡议，并在这里宣读我们的声明。）

程序的设想非常简单仅仅只是能够自动更新谷歌浏览器的书签内容就可以了。所以画了一个简单的界面：①：判断系统 ②：自启动 ③：修改标签

原以为对于第一项是非常简单的，但是在使用process的时候发现渲染进程拿到的信息和主进程是有区别的。在渲染进程里进行获取系统信息发现一只是browser也就是浏览器，在主进程中获取的话反而是win32是我想要的值，所以想着主进程提交给渲染进程，为了防止时机的问题采用渲染进行通知主进程，主进程返回给消息与渲染进程。

对于让渲染进程使用相关API还要进行一番设置，因为高版本关闭了部分Api的权限，为了所谓的安全。

async function createWindow() {
  // Create the browser window.
  const win = new BrowserWindow({
    width: 400,
    height: 480,
    title: 'GoogleBookMark',
    webPreferences: {
      contextIsolation: false,
      nodeIntegration: true,
      enableRemoteModule: true
    }
  })

通过上述设置，就能够使用相关API。但是对于具体的实现方式本着探究的目的大致浏览了一下源码，总结如下两种图。

其中mergeBrowserWindowOptions会合并创建窗口传递的参数

  new BrowserWindow({
    width: 400,
    height: 480,
    webPreferences: {
     /** 一些参数配置 */
    }
  })

对于其中的参数合并例如：nodeIntegration 流程大致如下

现在我们可以进行一些操作了，官网提供的有IPC方式，所以也主推这种实现。当然还有一些其它方式比如：挂载Global、本地缓存等待。为了快速不耽误时间，就采用官网的方式。

主进程

ipcMain.on('a-message', function (event, arg) {
  switch (arg) {
    case 'getPlatform':
      event.returnValue = process.platform
      break;
    case 'getAppDataPath':
      event.returnValue = app.getPath('appData')
      break;
  }
});

渲染进程

require("electron")
        .ipcRenderer
    .sendSync("a-message", "getPlatform")

数据库

文章转载自上下博客，如果涉嫌侵权，请发送邮件至：contact@modb.pro进行举报，并提供相关证据，一经查实，墨天轮将立刻删除相关内容。

随笔：Electron （一）

评论