自己动手用electron+vue开发博客园文章编辑器客户端【一】

缘起

之前我用nwjs做过一个博客园文章编辑器的客户端

发了好几个版本,最后一个版本到5.0.0了

其实第一个版本已经很好了,不知足,后来自己又做了兼容markdown的,结果用来用去,发现不是自己想要的

也一直没动手做新的,写博客的频率也降下去了。


最近搞了个APP(还没上线),打算把心得写到博客里,发现没有趁手的编辑器

于是动手重新搞这个东西

这次用Vue+electron来搞,算是技术的主流了

先把搞这个东西的心得写出来,希望大家不吝赐教。

界面

截几个图给大家看看,

列表界面:

自己动手用electron+vue开发博客园文章编辑器客户端【一】_第1张图片

文章编辑的界面:

自己动手用electron+vue开发博客园文章编辑器客户端【一】_第2张图片

功能

  • 博客登录(引入博客园的登录画面,使用官方提供的登录机制)

  • 文章列表(可以检索到你博客园内所有的随笔文章,支持分页,支持文章分类)

  • 修改文章(你博客园内所有的历史随笔文章,都可以用此工具编辑修改)

  • 新增文章(从无到有撰写一篇新的随笔文章,支持保存为草稿)

  • 截图工具截图后直接黏贴到编辑器中(QQ截图、微信截图,直接黏贴到编辑器中)

  • 图片拖拽到编辑器中自动上传

  • 插入公式、插入地图、插入表情、插入表格、插入音乐、插入代码...一应俱全;

  • 纯客户端,直接与博客园服务端通信(没有任何自建服务,不采集用户任何信息)

  • 新版本升级提醒功能;

  • 开源,开源地址:https://gitee.com/xland/cnblogs

  • 操作系统兼容苹果和windows,下载地址:https://gitee.com/xland/cnblogs/releases

搭建环境

这个程序用到了electron和vue

链接这两个东西的桥梁是electron-vue

建议大家给个star,有这么个工具真的能省很多力气(有钱的捧个?场,没钱的捧个✨场)

用npm工具初始化环境的命令为:

npm install -g vue-cli
vue init simulatedgreg/electron-vue cnblogs51
cd cnblogs51
npm install
npm run dev

几行命令执行完,一个默认的模板画面就启动起来了;


我们简单介绍一下electron-vue

我们知道vue有hot-reload的能力,

就是你改了什么代码,马上能在界面上表现出来,非常有利于调试;

electron-vue也有这个能力

为了做到这一点,他在你的开发机上起了http的服务;

然而你发布出来的程序,启动的时候,并没有在客户机上也开一个http的服务;

也就是说,开发机上调试程序,界面访问的是http://..........

客户机上,运行程序界面加载的事:file://.........

工程简述

他src目录下,有两个子目录,一个是main;一个是renderer

之所以这样分目录,跟electron的工作原理有关系

electron与nwjs不同,

nwjs把nodejs里的v8和chrome浏览器里的v8整合到一起了,可以直接在网页JS里访问nodejs的库

electron并没有这么做,它分两个主要进程,一个主进程,一个渲染进程;

对应起来就是刚才说的main目录和renderer目录

main目录放主进程相关的东西

renderer目录放界面相关的东西


如果你开发过vue的程序,你不会对renderer目录下的东西陌生,就是一个纯粹的vue项目应有的东西

main目录下,一个index.js,一个index.dev.js

如果你的程序处于调试状态,那么这两个文件都会起作用(通过npm run dev命令启动的程序);

如果你的程序处于发布状态,那么只有index.js文件起作用(通过npm run build命令编译打包后被安装的程序);


如果你看了package.json文件

会发现如下配置:

"main":"./dist/electron/main.js"

这是electron程序启动的入口,

这里的main.js就是index.js和index.dev.js合并打包出来的

注:nwjs入口程序是一个.html的文件;electron的入口程序是一个.js的文件

electron通过js入口程序加载画面

在咱们这个工程下,他加载的事src目录下的index.ejs画面

这其实也是vue程序的宿主页面


根目录下,还有一个build子目录,

如果没有,你执行一下npm run build命令就有了,

你产品开发完,打包出来的东西,就放在这个目录下;

这个目录下,有一个icons的子目录

打包的时候,从这个子目录里取图标,

打包出来的可执行文件的图标,就是从这里得来的;


还有一个非常重要的目录是根目录下的static目录

前面我们说了electron-vue开发环境和生产环境的不同;

在这个目录里放的,就是一些静态的资源

无论是开发环境,还是生产环境,

你只需要通过下面这样的路径访问方式,就能加载到相应的资源

src="static/your/path/file.js"

程序的启动与关闭

electron程序的入口是一个js文件

在js文件里打开一个窗口,让这个窗口加载指定的画面

functioncreateWindow () {
    mainWindow = newBrowserWindow({
        height:800,
        useContentSize:true,
        width:1200})
    mainWindow.loadURL(winURL)
    mainWindow.on('closed', ()=>{mainWindow =null})
}
app.on('ready', createWindow);

app在ready的时候,创建了一个窗口,并加载了一个路径

app和窗口都是通过下面的代码得来的:

import{ app, BrowserWindow } from 'electron'

路径是通过下面的代码得来的:

constwinURL = process.env.NODE_ENV === 'development'?
    `http://localhost:9080`:
    `file://${__dirname}/index.html`

electron允许打开子窗口,也允许开多标签页

在苹果端,当所有窗口都关闭后,就要退出程序,代码如下:

app.on('window-all-closed', ()=>{
    if(process.platform !== 'darwin') {
        app.quit();
    }
})

绕不开的博客园登录

其实并不是绕不开,而是绕开的成本太高了,不值得。

就像我们做IT系统,永远没有一个系统是绝对安全的,

如果破坏一个系统的成本足够高,那么我们就认为这个系统是足够安全的;


我们想自己写画面,在自己的画面上显示博客分类、文章列表;

在自己的画面上新建、编辑、保存文章;

这就涉及到跨域的问题

一开始我考虑,自己写模拟登录的代码,登录成功之后自己保存会话信息;

后来发现博客园还有这个东西

自己动手用electron+vue开发博客园文章编辑器客户端【一】_第3张图片

要想绕开这个东西,成本一下子高很多

因为这个东西的目的,就是为了防止被绕开的

(其实我有思路,但并未做尝试)


后来想到,就算绕开又如何呢?

难道我去把博客园的服务端接口都分析一遍

真的用自己的代码,访问博客园的接口吗?

我为什么不通过一个隐藏的iframe,来控制博客园的界面

通过它获取我想呈现在自己界面上的数据;

也通过它,提交我自己界面上的用户数据;

这样就只要用博客园前端页面内置的jquery获取文章数据;

然后再用jquery操作提交、草稿按钮就可以了。


在nwjs环境里,我们真的就是用的一个iframe,代码如下:

var iframeTag = 'nwUserAgent="Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/53.0.2785.104 Safari/537.36 Core/1.53.3538.400 QQBrowser/9.6.12501.400"';
var articleDiv = '';

这里涉及到三个特殊的属性

  • nwdisable:

是为了防止这个iframe加载的页面去调用nwjs的一些功能,比如说格盘,因为毕竟我们加载的页面不是我们自己提供的,要为我们用户的安全着想;

  • nwfaketop:

如果没有这个,在iframe页面里调用window.top,就能访问到我们的页面的window对象,很多厂商都是通过这个来判断自己是不是被别人iframe了,有了这个标签,window.top就访问不到我们

  • nwUserAgent:

我们通过这个标签来设置iframe加载页面时使用的user-agent,进一步隐藏自己,不被服务提供方发现;


在electron里,不是直接用iframe,而是用了electron内置的一个webview的标签

(注意:上面这行代码用到了vue的一些特性)

它也有useragent属性,跟nwjs里的nwUserAgent一样

它默认就是不允许被加载页面访问electron的底层API的,

因为根本就不是iframe,所以window.top也访问不到它的宿主页面;


我的目的是让我的用户使用我开发的画面

我的客户在不需要的时候,不需要看到博客园的任何界面

所以这个webview默认是隐藏的;


在用户第一次打开应用的时候,这个webview会直接加载博客园后台的页面:

enterUrl:"https://i.cnblogs.com/posts"

如果你第一次使用这个应用,你本地肯定没有会话信息,所以你访问后台页面,博客园会给你跳转到登录页面;

我们可以在webview的dom-ready事件里监控webview内部的url变化,代码如下:

var self = this;
var frame = this.$refs.frame;
frame.addEventListener("dom-ready",function(e){
    if(frame.src.search('https://passport.cnblogs.com/user/signin') == 0) {
        frame.style.zIndex ="99";
    }else{
        frame.style.zIndex = "1";
        //other code...
    }
});

当url变成登录页面时,我们就让webview显示出来,

这时我们的应用跟一个普通的浏览器没有任何区别,

我们的客户也是在与博客园的登录页面交互,

当用户登录成功之后,url又会变成https://i.cnblogs.com/posts,

此时,我又让webview隐藏起来,把我自己的界面呈现给用户

这个时候用户已经登录成功了

虽然我自己的界面还是没有博客园的会话信息

但是这个webview已经具备了合法的身份

可以随意访问博客园后台的任意API

接下来,我们的界面就会以这个webview为桥梁,与博客园后台服务进行交互。

小结

想通了这些,我发现我手里多了一把锤子?

有很多事情可以做呀

写个自动下单工具、秒杀工具、抢票工具之类的,都是易如反掌;

不会在纠结怎么模拟登陆,就算真要模拟登陆,也不是完全没办法;

因为在这个环境下,目标网站的前端代码,完全暴露在你眼前,随你想怎么控制就怎么控制

具体怎么搞,我们一下篇再说

,有着急的朋友,可以先看我开源出来的代码

不过,我想要做的就是让这个工具兼容更多的博客

现在博客园已经做差不多了,接下来兼容什么呢?CSDN?知乎?简书?segmentfault?欢迎大家留言;

另外,安装程序的下载地址为:https://gitee.com/xland/cnblogs/releases

大家发现什么问题可以直接提issue,如果大家期待什么新功能,也可以提issue(qq群:51021155)

喜欢的朋友,请帮忙点个赞,给个星





你可能感兴趣的:(自己动手用electron+vue开发博客园文章编辑器客户端【一】)