关于Vue与Go桌面管理star应用的理解

关于Vue与Go桌面管理star应用的理解
2018年04月26日 10:56 心空的凝望

关于Vue与Go桌面管理star应用的理解,这个项目在当前或者之后的项目中用到, star了以防自己以后忘记找不到(比如前端经常用到的一堆npm包那种),要对这个项目的源码实现等进行研究细读(比如Vue, React之类的),实用型项目(比如SS, lantern, 还有一些开车项目之类的...)。

其他原因, 比如出于对作者的鼓励, 或者就是跟风大佬star, 或者就是认识的人互粉这样的...至于fork别人的项目, 一般就是你要进行一些对应的修改, 然后将修改PR到原项目中, 才是进行fork的, 这个倒没有必要细究了。我star项目的原因主要是前面三种, 但是star的一多自己也给忘了, 感觉这样不好, 于是想写一个方便自己管理star项目的客户端。

技术选用:

桌面web化的一般可以用electron作为支持, 而前端方面稍微会写一点的就是vue, 那么有一个对应的支持electron-vue, 但是一般我们知道, 与系统API的交互由electron提供的API或者是有node.js去搞, 然后通过ipc之类的进行消息传递, 而由于最近是入门了golang, 所以在想能不能用前端代码去写用户表现, 而用golang作为系统API交互支持, 然后就找到了go-astilectron这个项目。

Go和Javascript可以通过sendMessage和OnMessage等接口进行消息的传递, 接下来是前端的选择, 如下所示, 其中parcel, vuetify, pouchdb都是第一次使用:

Vue全家桶系列: Vue2 + Vue-router + Vuex + Vue-i18n

前端模块打包构建: parcel

UI框架: Vuetify(一款渐进式Material Design框架)

前端数据库: Pouchdb

网络请求: axios

代码高亮和markdown渲染: github-markdown-css(自己造轮子不如用别人的轮子系列)

项目构建:

首先你得安装了Golang, 并且设置好了GOROOT和GOPATH等变量, 如果没有配置过, 那么可以参考build-web-application-with-golang教程配置,如果上面的部分已经配置好了, 那么接下来要安装go-astilectron相关依赖。

第一次使用parcel, 号称零配置构建真不是盖的, 但是在使用的过程还是出现了问题。尚学堂•百战程序员陈老师指出这种方式无论是在autoprefixer还是压缩css的cssnano中都已废除, 会直接将这样的代码删除, 而parcel的build默认采用了cssnano, 不使用它的方法只能是no-minify, 但是这样的话所有的文件都没有压缩, 打包出来的js文件有几m大小(不过还是用file路径, 所以没什么影响)。

go-astilectron加载file path文件进行github oauth, 主要是通过new一个地址为github oauth authorize的window, 然后监听webcontents.will.navigate和webcontents.get.redirect.request这两个事件, 将oauth返回的code去请求token, 再进行消息传递给主窗口, 主窗口再SendMessage给前端token, 就完成了oauth的过程, 然而go-astilectron没有这两个事件的支持, 于是提了个PR添加了这两个事件的支持, 顺带也写了个demo, 不过目前go-astilectron还是有很多未完善的东西, 所以后面会出现什么坑我也不是很清楚(如果遇到坑就补)。

检测离线状态(主要是为了避免离线状态下还request的情况)一开始打算用的navigator.online, 但是这东西返回false的时候没问题, true的时候不一定是能上网的(比如你启用了VMware Network), 于是用go写了个与api.github.com进行tcp连接的dial, 进行离线状态检测, 在mac下无问题, 但是在windows下会出现cannot read Webcontents of undefined的问题, 这个问题还需修正。

财经自媒体联盟更多自媒体作者

新浪首页 语音播报 相关新闻 返回顶部