窗口间通信的问题

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(界面截屏也在这里)

支持平台:win x64、mac x64、linux x64(打包编译脚本都在)

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

有什么问题,请不吝提交issue,有issue必回!

electron开发客户端注意事项(兼开源个人知识管理工具“想学吗”)的更多相关文章

  1. 看github上有18万star的第一开源项目如何教你学前端编程的

    作为 Github | star 第一开源项目,已经超过18万 star:比之前最火的bootstrap的10万star还要多出8w,freeCodeCamp 越来越受关注,建站两年时间不到已经近40 ...

  2. 使用electron开发一个h5的客户端应用创建http服务模拟后台接口mock

    使用electron开发一个h5的客户端应用创建http服务模拟后端接口mock 在上一篇<electron快速开始>里讲述了如何快速的开始一个electron的应用程序,既然electr ...

  3. 《连载 | 物联网框架ServerSuperIO教程》- 8.单例通讯模式开发及注意事项

    1.C#跨平台物联网通讯框架ServerSuperIO(SSIO)介绍 <连载 | 物联网框架ServerSuperIO教程>1.4种通讯模式机制. <连载 | 物联网框架Serve ...

  4. Vue 全家桶 + Electron 开发的一个跨三端的应用

    代码地址如下:http://www.demodashi.com/demo/11738.html GitHub Repo:vue-objccn Follow: halfrost · GitHub 利用 ...

  5. 《连载 | 物联网框架ServerSuperIO教程》- 5.轮询通讯模式开发及注意事项。附:网友制作的类库说明(CHM)

    1.C#跨平台物联网通讯框架ServerSuperIO(SSIO)介绍 <连载 | 物联网框架ServerSuperIO教程>1.4种通讯模式机制. <连载 | 物联网框架Serve ...

  6. 《连载 | 物联网框架ServerSuperIO教程》- 6.并发通讯模式开发及注意事项

    1.C#跨平台物联网通讯框架ServerSuperIO(SSIO)介绍 <连载 | 物联网框架ServerSuperIO教程>1.4种通讯模式机制. <连载 | 物联网框架Serve ...

  7. 《连载 | 物联网框架ServerSuperIO教程》- 7.自控通讯模式开发及注意事项

    1.C#跨平台物联网通讯框架ServerSuperIO(SSIO)介绍 <连载 | 物联网框架ServerSuperIO教程>1.4种通讯模式机制. <连载 | 物联网框架Serve ...

  8. Android开发周报:Flyme OS开源、经典开源项目解析

    Android开发周报:Flyme OS开源.经典开源项目解析 新闻 <魅族Flyme OS源码上线Github> :近日魅族正式发布了MX5,并且在发布会上,魅族还宣布Flyme OS开 ...

  9. 桌面应用之electron开发与转换

    桌面应用之electron开发与转换 一,介绍与需求 1.1,介绍 1. Electron简介 Electron是用HTML,CSS和JavaScript来构建跨平台桌面应用程序的一个开源库. Ele ...

随机推荐

  1. BZOJ_4636_蒟蒻的数列_线段树+动态开点

    BZOJ_4636_蒟蒻的数列_线段树+动态开点 Description 蒟蒻DCrusher不仅喜欢玩扑克,还喜欢研究数列 题目描述 DCrusher有一个数列,初始值均为0,他进行N次操作,每次将 ...

  2. Jmeter----A接口response中body的某一个参数传递给B接口request的body中使用(参数的传递)

    示例:将接口"获取待办列表"response中body的id值传递给接口"删除待办"request的body中使用: 操作步骤如下: 第一步:给"获取 ...

  3. springcloud学习资料汇总

    收集Spring Cloud相关的学习资料 学习Spring Cloud首先需要了解Spring Boot,不了解Spring Boot的同学戳这里Spring Boot学习资料汇总 重点推荐:Spr ...

  4. ToB蓝海的台阶-PaaS,SaaS技术详解

    前言 随着大量SaaS公司进入市场,我们看到颠覆性的软件服务以各种方式进入企业流程-从营销工具到支付系统.随着SaaS帮助优化业务流程,实现更流畅和自动化的运营,风险投资公司首先潜入池中寻找最优秀和最 ...

  5. volitale、synchronized、RetreenLock区别

    synchronized和RetreenLock锁区别 1.synchronized是java关键字,RetreenLock是个java类 2.synchronized无法获取锁状态,Lock可以判断 ...

  6. 原生JS封装 toast 弹层,自动关闭

    由于公司业务需求,要一个公共toast ,下面是自己封装的一个. css: .toast { text-align: center; min-height: 70px; width: 220px; c ...

  7. windows粘贴板操作-自己的应用和windows右键互动

    一.粘贴板操作函数 BOOL OpenClipboard(HWND hWnd);参数 hWnd 是打开剪贴板的窗口句柄,成功返回TRUE,失败返回FALSE BOOL CloseClipboard() ...

  8. 面试题-浅谈JavaScript中的This指向问题

    各位小伙伴在面试中被面试官问道this指向问题一定不少吧,同时还被问道apply,call和bind的用法区别,现在,就来简单的聊一聊this到底指向何方. 1.基本概念 MDN的官方解释:与其他语言 ...

  9. HBase的下载、安装与配置

    声明:作者原创,转载注明出处. 作者:帅气陈吃苹果 (一)安装 下载.解压: wget http://mirror.bit.edu.cn/apache/hbase/1.3.1/hbase-1.3.1- ...

  10. 程序猿必知必会Linux命令之awk

    前言 对于一名专业的程序员来说,Linux相关知识是必须要掌握的,其中对于文本的处理更是我们常见的操作,比如格式化输出我们需要的数据,这些数据可能会来源于文本文件或管道符,或者统计文本里面我们需要的数 ...