electron开发客户端注意事项

liulun

发布于 2019-05-25 15:36:47

2.1K3

发布于 2019-05-25 15:36:47

文章被收录于专栏：liulunliulun

窗口间通信的问题

electron窗口通信比nwjs要麻烦的多

electron分主进程和渲染进程，渲染进程又分主窗口的渲染进程和子窗口的渲染进程

主窗口的渲染进程给子窗口的渲染进程发消息

subWin.webContents.on('dom-ready', () => {
    subWin.webContents.send('message', {
        title: self.$root.a[self.$root.aIndex].title,
        content: window.UE.instants.ueditorInstant0.getContent(),
        id: self.$root.a[self.$root.aIndex].id,
        winId: item.winId,
        siteId: item.id,
        url,
        type
    });
});

子窗口的渲染进程接收消息的代码

ipcRenderer.on('message', (event, article) => {
    console.log(article);
})

注意，应该dom-ready了之后再发，要不然你的子窗口进程有可能接收不到消息

子窗口的渲染进程给主窗口的渲染进程发消息比较麻烦

子窗口要先把消息发送给主进程，再由主进程中转给主窗口

const { ipcRenderer} = require('electron');
ipcRenderer.send('articleRefreshMain', {
            siteId:'cnblogs',
            url: url
        });

主进程接收消息后中转给主窗口渲染进程的代码

import { app, BrowserWindow,ipcMain } from 'electron'
ipcMain.on('articleRefreshMain', (event, message) => {
  mainWindow.webContents.send('contentRefreshRenderer', message);
});

主窗口渲染进程接收消息的代码

ipcRenderer.on('articleRefreshRenderer', (e, message) => {
    self.$root.a[self.$root.aIndex][message.siteId] = {
        url: message.url
    }
    self.$root.needSave.a = true;
});

监听编辑器内图片删除的事件

通过黏贴或者拖拽进编辑器的图片，我把它复制到了文章的目录（用户本地目录）

如果用户在编辑文章的过程中，又删了这个图片，那么我应该在目录中也删除这个图片

这就需要监控文章编辑器的图片变化

我用的是H5的MutationObserver对象，理论上，用这个东西可以监控任何DOM的变化

var editorDocument = document.getElementById("ueditor_0").contentWindow.document;
var observer = new MutationObserver(records => {
    self.$root.needSave.c = true;
    records.forEach((item, index) => {
        if (item.removedNodes.length > 0 && item.removedNodes[0].tagName == "IMG") {
            var path = decodeURI(item.removedNodes[0].src.substr(7));
            fs.unlink(path, err => {
                if (err) console.log(err);
            });
        }
    });
});
observer.observe(editorDocument, {
    childList: true,
    subtree: true
});

electron-vue获取app版本号的hack代码

本来electron获取app版本号很简单，只要如下即可（以下代码运行在main进程中）

import { app, BrowserWindow,ipcMain } from 'electron'
var versionStr = app.getVersion();

getVersion: 如果应用程序的 package. json 文件中找不到版本号, 则返回当前包或者可执行文件的版本（就是electron的版本号）。

因为我用的electron-vue，他又两种模式，生产模式和开发模式

在生产模式下没任何问题

在开发模式下，它其实是起了一个webserver，让electron加载一个localhost的地址

这样做主要是为了使用vue的hotload的优势

但这样的话，electron就找不到 package. json 文件中的版本号了

怎么办呢？

我们在应用启动的时候，先在主进程中把版本号拿出来

if (process.env.NODE_ENV !== 'development') {
  global.__static = require('path').join(__dirname, '/static').replace(/\\/g, '\\\\')
  winURL = `file://${__dirname}/index.html`;
}else{
  app.getVersion = ()=> curVersion;
  winURL = `http://localhost:9080`;
}

注意，我们通过app.getVersion = ()=> curVersion;把getVersion方法给hack了

把文章内容填入特殊的网站编辑器中

在处理文章提交到知乎的过程中

发现知乎用了一个特殊的编辑器，

（一个基于reactjs的编辑器，github上有开源的，忘记地址了）

怎么搞都搞不定，他甚至不支持设置HTML的内容

最后用了electron的操作剪切板的能力才搞定的

先把文章内容放到剪贴板，再focus知乎的编辑器，再执行黏贴事件

代码如下：

const {
    clipboard,
    ipcRenderer,
    remote
} = require('electron');
        var win = remote.BrowserWindow.fromId(this.winId);
        win.focus();
        setTimeout(function () {
            document.getElementsByClassName("WriteIndex-titleInput")[0].children[0].focus();
            clipboard.writeText(this.title);
            win.webContents.paste();
            setTimeout(function () {
                document.getElementsByClassName("public-DraftEditor-content")[0].click();
                clipboard.writeHTML(this.doc.body.innerHTML);
                win.webContents.paste();
                ipcRenderer.send('articleRefreshMain', {
                    siteId: 'zhihu',
                    url: window.location.href
                });
            }.bind(this), 800)
        }.bind(this), 800)

注意，如果要黏贴两个地方，最好间隔个几百毫秒

要不然网页还没反应过来，你就focus另一个地方了，会导致黏贴不成功。