窗口间通信的问题
electron 窗口通信比 nwjs 要麻烦的多
electron 分主进程和渲染进程, 渲染进程又分主窗口的渲染进程和子窗口的渲染进程
主窗口的渲染进程给子窗口的渲染进程发消息
- subWin.webContents.on('dom-ready', () => {
- subWin.webContents.send('message', {
- title: self.$root.a[self.$root.aIndex].title,
- content: Windows.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: Windows.location.href
- });
- }.bind(this), 800)
- }.bind(this), 800)
注意, 如果要黏贴两个地方, 最好间隔个几百毫秒
要不然网页还没反应过来, 你就 focus 另一个地方了, 会导致黏贴不成功.
开源说明
源码地址: https://github.com/xland/xiangxuema (界面截屏也在这里)
支持平台: win x64,Mac x64,Linux x64(打包编译脚本都在)
编译好的应用程序, 我放到了阿里云的 CDN 里, 下载速度超赞, 大家可以下载来用用看
有什么问题, 请不吝提交 issue, 有 issue 必回!
来源: https://www.cnblogs.com/liulun/p/10416321.html