hmi实现c语言2次开发,自己动手用electron+vue开发博客园文章编辑器客户端【二】...

回顾

咱们聊了我开发的这个程序是什么样子、为什么要开发这个程序

electron的工程结构，他是怎么启动和退出的

以及我们怎么用electron的技术，登录博客园，拿到会话信息；

这篇文章，我们主要讲怎么拿博客园的数据，以及怎么提交数据给博客园；

上几张新图：

宿主画面与webview通信的问题

在nwjs里，宿主页面与做过特殊标记的iframe页面(nwdisable nwfaketop和nwUserAgent)通信，并没有什么特别的地方

就像你在一个普通的页面里访问你自己的iframe子页面一样

var frame = document.getElementById('[yourFrameId]').contentWindow;

可以通过上面的代码，轻而易举的得到iframe页面的window对象；

注意：被标记了nwfaketop的子页面里的代码是访问不到父页面的window对象的；

然而在electron里，宿主页面要想跟webview页面通信的话，事情就复杂的多了

你要给webview页面配置preload属性，

让webview把你一个你自己写的JS文件注入到目标页面里去，如下：

你可以在这个JS文件里访问目标页面上任何东西，就像你自己写了一个JS文件放在目标网站里一样；

不仅如此，你还可以在这个JS文件里访问electron提供的底层API；

然而怎么把访问到的东西呈现在自己的画面上呢

比如，我们在这个JS文件里拿到了博客分类的数据：

var temp = $("#post_categories a[href^='/posts?categoryid=']");

注：博客园是我们的目标网站，目标网站加载了jquery，我们这个注入的js也可以使用jquery的能力

再通过如下代码反馈给我们自己的画面

const {ipcRenderer} = require('electron')

ipcRenderer.sendToHost('messageFromWeb', temp);

ipcRenderer就是electron里的东西了，

看这个API就知道，这是在通过消息的方式通信，

我们需要在自己的画面里监听这个消息

var webViewInstance = document.getElementById('[yourWebViewId]');

webViewInstance.addEventListener("ipc-message", event=>{

console.log(event.args[0]);

}

这里event.args[0]就是注入JS里传过来的temp对象，也就是博客分类的数据了

接下来，就想怎么呈现就怎么呈现。

如果想把自己画面里的数据传递给注入的JS代码

需要在自己画面发送消息，代码如下：

var webViewInstance = document.getElementById('[yourWebViewId]');

webViewInstance.send("messageFromHost","hookSaveArticle",{data:'your article data'});

在注入的JS代码里，可以通过下面的代码来获取宿主页面发送过来的消息：

const {ipcRenderer} = require('electron')

ipcRenderer.on('messageFromHost', (event, action, obj)=>{

console.log(action);  //print hookSaveArticle

console.log(obj);  //print {data:'your article data'}

})

以上，

我们现在可以自由的在目标页面和宿主页面互相通信，传递数据了；

但是！

File类型和Blob类型的数据不能这样传递，这是官网文档里并没有说明的，是我自己踩坑踩出来的

那么这样的数据该怎么发送呢？

我是先在发送方转成base64，再在接收方转回来达到目的的

虽然有点脱了裤子放屁，但是聊胜于无呀！

发送方的代码如下：

window.editorUpload = function(file) {

var reader = newFileReader();

reader.readAsDataURL(file);

reader.onload = function() {

webViewInstance.send("messageFromHost","hookUploadPic", {base64:reader.result,

name:file.name});

};

}

接收方的代码如下：

functiondataURLtoFile(dataurl, filename) {

var arr = dataurl.split(','),

mime = arr[0].match(/:(.*?);/)[1],

bstr = atob(arr[1]),

n = bstr.length,

u8arr = newUint8Array(n);

while(n--) { u8arr[n] = bstr.charCodeAt(n); }

return newFile([u8arr], filename, {type: mime});

}

ipcRenderer.on('messageFromHost', (event, action, param)=>{

var file = dataURLtoFile(param.base64, param.name);

})

与编辑器相关的问题

我们用的是NEditor编辑器，前身是百度的UEditor编辑器，不过百度的UEditor已经不再维护了

然而，就算NEditor编辑器，我也修改了里面很多东西

上传文件，我们上一个章节说过了，不得不修改，

因为我们要把用户贴过来的图片发送给钩子JS，而不是直接upload到自己的服务器上；

我大概在neditor.all.js的26616行，加了一行自己的代码，大家可以去看我的源码

以后打算让这个编辑器方便的兼容base64，这样就不用事先把图片传博客园服务器上去了，不知道这个思路靠谱不靠谱；

另外，因为编辑器相关的前端文件都是静态资源，我就把他们放到static目录下去了

这样只要在主页直接把这些静态资源加载过来就可以了

其他的一些样式文件，ueditor自己会自动加载，路径也不会有什么问题

多标签页的问题

在我上一个版本的程序里，一次只能编辑一篇文章

有人反映说，这样不是很方便，于是这个版本做了多标签页的功能；

首先，我用一个数组存储每个标签页的基础数据

tabs: [{text:"文章列表",

url:"https://i.cnblogs.com/posts",

isHomePage:true,

pageType:'list',

data:null

}],

vue的模板代码里呈现这个数组的数据：

程序刚启动的时候，就这么一个标签页，当用户点了文章列表的某条文章的时候，执行下面的方法

articleClick(url, text) {

var obj = {url,text,"pageType":"editor",data:null};

this.tabs.push(tab);

this.webViewInstance.loadURL(url);

}

这样就多了一个标签页；

因为我们这个程序，只有两种类型的画面，不是文章列表，就是编辑文章(添加文章和编辑文章是同样的画面)

所以，虽然是多个标签页，也不过是在这两种画面间切换

vue的模板代码如下

根据当前tab页的类型，切换画面；

每次新tab页的加入，我们就迫使webViewInstanceload一下tab对应的url，以拿到目标页的数据；

每次tab页的切换，我们就从tab数组元素里拿data数据，其实就相当于我们缓存的数据(并没有存成本地文件或本地数据库呢)；

由于UEditor不是一个VUE组件，所以我们在切换页面，新加页面的时候，要通过UEditor的API获取数据，重置数据，代码如下：

UE.instants.ueditorInstant0.getContent();

UE.instants.ueditorInstant0.setContent(content);

总结

写到这里，发现并没有什么特殊的东西需要在博客里解释了

还有不明白的地方的读者，自己去看源码吧!

谢谢大家的支持；

接下来我打算为这个程序加入下面这些功能：

删除文章

编辑分类

支持CSDN博客

支持开源中国博客

支持简书

支持知乎

......

请大家多多关注：https://github.com/xland/xiangxuema

原文出处：https://www.cnblogs.com/liulun/p/10123545.html