开发了一款写作软件(OSX,Windows),附带Electron开发指南

断断续续写了个把月,终于在昨天完成了第一版…

笔落写作


一款帮助网络写手更方便地进行小说创作的PC软件,目前支持 OSX/Windows

名字灵感来自于杜甫的一首诗,前两句是:

《寄李十二白二十韵》

昔年有狂客,号尔谪仙人。

笔落惊风雨,诗成泣鬼神。

对于名字,要感谢下@蓝色

预览的话,可以去官网

作为我的第一款商业性(虽然才卖出去一个,还是朋友捧场…)产品,我投入了很多精力。而且,重要的还在后面,那就是运营

怎么让得让更多的人知道并且去使用它觉告诉我,这将是比写代码还要难的事情…

Electron 开(cai)发(keng)指南


主要用到了Electron-Vue这个框架,让我不用花时间去琢磨配置Webpack和Electron,上来就直接开发。感谢开源社区!

歪个楼:我对Wepback的看法就是,笼统的了解下运行原理就行了,现成并且配置好的Webpack模板直接用,遇到特殊需求,查文档,查Google知道怎么改即可。

开发要求你比较熟悉Vue和Node,这里不会讲基础的东西,讲基础知识的除了官方文档,网上有更多相关文章可供选择。

细数踩过的坑:

首先,我遇到了:dev模式没问题,打包后空白页的问题/strong>

如果你刚刚生成项目,什么都没有动的话,那就可能是Webpack在打包时,把Vue当成了外部文件没有打包进去。

代码在:

注释掉即可

然后,又遇到了多窗口的需求:

开始没思路,因为多窗口和一般前端开发时遇到的多路由,多Tab还不是一回事儿。后来经人指点,才明白其实多窗口挺简单的…

我们先观察生成的代码模板中,主窗口是怎么生成的:

那么,我们依葫芦画瓢,第二个窗口就可以这么写

PS: 这里提醒下vue-router不要设置成history模式。原因在文档里看到过,忘了,想知道就去查文档 :p

多窗口下的Vuex异常:

开发多窗口时并没有意识到vuex存在问题,后面发现数据怎么都对不上,然后排查问题时发现,两个窗口的state(状态)并不同步,即:

当你在打开窗口B时,此时两个窗口的Vuex数据时一致的,但一旦你的B窗口的数据状态发生变化,其并不能反映到窗口A里。为什么不行,其实也很好理解。

歪个楼:说下我对Vuex实现原理的理解。以前刚开始学习Vue还没有学Vuex时,当时我解决多组件(非父子)之间的通讯方式除了利用父组件做中间人(event bus)外,还试过维护一个全局JSON(比如共用一个store.js),然后其他组件都能访问及操作。后来学了Vuex,发现它的工作方式和我想的差不多。(当然,我并没有去看源码,它真正的实现方式是什么。但直觉告诉我应该是这样没错了!)

让我反问一句:为什么两个窗口之间的数据能一直同步/p>

解决方法: 我结合了Electron文档中提到的两种方式:和

PS: 经人点拨,ipc通讯的实现利用了浏览器的接口(话说这个API,之前还真没听过说…)

在Vue中自己实现富文本编辑器:输入框的双向绑定和自动聚焦(auto focus)

还有个不算是Electron,只能说是Vue方面的问题。

本来写这个项目时就没打算来自己实现富文本编辑器,本着能用开源就用开源的原则,在项目里测试了一些开源的编辑器,发现或多或少都有些问题,后来一琢磨,反正这个项目的富文本编辑器需求不复杂,就自己实现一个好了。

编辑器的输入框,我使用的HTML属性来实现。

编辑器组件的双向绑定和自动聚焦的细节参考这篇文章

此外,还有些坑不知道什么原因造成的:


用户数据的本地存储我用了lowdb:

本质就是通过 的 模块来操作本地 文件,只不过它比我们自己实现的要优雅,可靠多了

然后有个需求是,当触发某种条件时,保存对应的变量:

此时,如果用户点击了Button A,不仅 数据会更新,数据也会更新,反之同样。

这不是的问题,因为我单独测试过,点击Button A并不会导致其他set函数调用!

所以这应该算是一个奇怪的问题吧。

利用ipcRenderer监听通信时,如果在listener内使用了异步:

另外: 打包软件时也遇到了很多问题,但最终都通过Google解决掉了,所以这里不复述了(所谓面向Google编程

其他问题后续会继续补充,欢迎持续关注!

相关资源:富头像上传编辑器v1.4_fullavatareditor-其它代码类资源-CSDN文库

来源:weixin_34408717

声明:本站部分文章及图片转载于互联网,内容版权归原作者所有,如本站任何资料有侵权请您尽早请联系jinwei@zod.com.cn进行处理,非常感谢!

上一篇 2018年4月12日
下一篇 2018年4月12日

相关推荐