electron开发客户端注意事项（兼开源个人知识管理工具“想学吗”） - 好文

窗口间通信的问题

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另一个地方了，会导致黏贴不成功。

开源说明

源码地址：https://github.com/xland/xiangxuema <https://github.com/xland/xiangxuema>
（界面截屏也在这里）

支持平台：win x64、mac x64、linux x64（打包编译脚本都在）

编译好的应用程序，我放到了阿里云的CDN里，下载速度超赞，大家可以下载来用用看

有什么问题，请不吝提交issue，有issue必回！

热门工具换一换