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

缘起

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

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

其实第一个版本已经很好了，不满足，后来本身又作了兼容markdown的，结果用来用去，发现不是本身想要的

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

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

因而动手从新搞这个东西

此次用Vue+electron来搞，算是技术的主流了

先把搞这个东西的心得写出来，但愿你们不吝赐教。

界面

截几个图给你们看看，

列表界面：

文章编辑的界面：

功能

• 博客登陆（引入博客园的登陆画面，使用官方提供的登陆机制）

• 文章列表（能够检索到你博客园内全部的随笔文章，支持分页，支持文章分类）

• 修改文章（你博客园内全部的历史随笔文章，均可以用此工具编辑修改）

• 新增文章（从无到有撰写一篇新的随笔文章，支持保存为草稿）

• 截图工具截图后直接黏贴到编辑器中（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系统，永远没有一个系统是绝对安全的，

若是破坏一个系统的成本足够高，那么咱们就认为这个系统是足够安全的；

咱们想本身写画面，在本身的画面上显示博客分类、文章列表；

在本身的画面上新建、编辑、保存文章；

这就涉及到跨域的问题

一开始我考虑，本身写模拟登陆的代码，登陆成功以后本身保存会话信息；

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

要想绕开这个东西，成本一会儿高不少

由于这个东西的目的，就是为了防止被绕开的

（其实我有思路，但并未作尝试）

后来想到，就算绕开又如何呢？

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

真的用本身的代码，访问博客园的接口吗？

我为何不经过一个隐藏的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 = '<iframe id="articleFrame" src="[your url]" nwdisable nwfaketop '+bky.iframeTag+'></iframe>';

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

• nwdisable：

是为了防止这个iframe加载的页面去调用nwjs的一些功能，好比说格盘，由于毕竟咱们加载的页面不是咱们本身提供的，要为咱们用户的安全着想；

• nwfaketop：

若是没有这个，在iframe页面里调用window.top，就能访问到咱们的页面的window对象，不少厂商都是经过这个来判断本身是否是被别人iframe了，有了这个标签，window.top就访问不到咱们

• nwUserAgent：
  

咱们经过这个标签来设置iframe加载页面时使用的user-agent，进一步隐藏本身，不被服务提供方发现；

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

<webview ref="frame" :preload="preloadJsPath" :src="enterUrl" :useragent="$root.agent"></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）

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