摘要：本来写这个项目时就没打算来自己实现富文本编辑器，本着能用开源就用开源的原则，在项目里测试了一些开源的编辑器，发现或多或少都有些问题，后来一琢磨，反正这个项目的富文本编辑器需求不复杂，就自己实现一个好了。
断断续续写了个把月，终于在昨天完成了第一版…笔落写作
一款帮助网络写手更方便地进行小说创作的PC软件，目前支持 OSX/Windows
名字灵感来自于杜甫的一首诗，前两句是：
《寄李十二白二十韵》昔年有狂客，号尔谪仙人。
笔落惊风雨，诗成泣鬼神。
对于名字，要感谢下@蓝色
预览的话，可以去官网看
作为我的第一款商业性（虽然才卖出去一个，还是朋友捧场…）产品，我投入了很多精力。而且，重要的还在后面，那就是运营。
怎么让得让更多的人知道并且去使用它？直觉告诉我，这将是比写代码还要难的事情...
Electron 开(cai)发(keng)指南主要用到了Electron-Vue这个框架，让我不用花时间去琢磨配置Webpack和Electron，上来就直接开发。感谢开源社区！
歪个楼：我对Wepback的看法就是，笼统的了解下运行原理就行了，现成并且配置好的Webpack模板直接用，遇到特殊需求，查文档，查Google知道怎么改即可。
开发要求你比较熟悉Vue和Node，这里不会讲基础的东西，讲基础知识的除了官方文档，网上有更多相关文章可供选择。
细数踩过的坑：首先，我遇到了：dev模式没问题，打包后空白页的问题？
如果你刚刚生成项目，什么都没有动的话，那就可能是Webpack在打包时，把Vue当成了外部文件没有打包进去。
代码在：webpack.renderer.config.js
注释掉...Object.keys(dependencies || {}).filter(d => !whiteListedModules.includes(d))即可
然后，又遇到了多窗口的需求：
开始没思路，因为多窗口和一般前端开发时遇到的多路由，多Tab还不是一回事儿。后来经人指点，才明白其实多窗口挺简单的...
我们先观察生成的代码模板中，主窗口是怎么生成的：
let mainWindow; //主窗口变量
const winURL =
process.env.NODE_ENV === "development" ?
`http://localhost:9080` :
`file://${__dirname}/index.html` // 设置URL或者文件,毕竟Electron App其实运行在Chromium中
mainWindow = new BrowserWindow(options) // new 一个窗体对象，同时传一些参数
mainWindow.loadURL(winURL) // 加载URL，加载之后，窗口就会被显示出来。
那么，我们依葫芦画瓢，第二个窗口就可以这么写
let secondWindow;
const modalPath = process.env.NODE_ENV === "development" ?
"http://localhost:9080/#/showOutline" :
`file://${__dirname}/index.html#showOutline` // 的确比较简单...
secondWindow = new BrowserWindow(options)
secondWindow.loadURL(modalPath)
PS: 这里提醒下vue-router不要设置成history模式。原因在文档里看到过，忘了，想知道就去查文档 :p
多窗口下的Vuex异常：
开发多窗口时并没有意识到vuex存在问题，后面发现数据怎么都对不上，然后排查问题时发现，两个窗口的state(状态)并不同步，即：
当你在打开窗口B时，此时两个窗口的Vuex数据时一致的，但一旦你的B窗口的数据状态发生变化，其并不能反映到窗口A里。为什么不行，其实也很好理解。
歪个楼：说下我对Vuex实现原理的理解。以前刚开始学习Vue还没有学Vuex时，当时我解决多组件（非父子）之间的通讯方式除了利用父组件做中间人（event bus）外，还试过维护一个全局JSON（比如共用一个store.js），然后其他组件都能访问及操作。后来学了Vuex，发现它的工作方式和我想的差不多。（当然，我并没有去看源码，它真正的实现方式是什么。但直觉告诉我应该是这样没错了！）
让我反问一句：为什么两个窗口之间的数据能一直同步？
解决方法： 我结合了Electron文档中提到的两种方式：ipc通讯和在主进程维护全局变量
PS: 经人点拨，ipc通讯的实现利用了浏览器的postMessage接口（话说这个API，之前还真没听过说...）
在Vue中自己实现富文本编辑器：输入框的双向绑定和自动聚焦（auto focus）
还有个不算是Electron，只能说是Vue方面的问题。本来写这个项目时就没打算来自己实现富文本编辑器，本着能用开源就用开源的原则，在项目里测试了一些开源的编辑器，发现或多或少都有些问题，后来一琢磨，反正这个项目的富文本编辑器需求不复杂，就自己实现一个好了。
编辑器的输入框，我使用的HTML属性contenteditable来实现。
编辑器组件的双向绑定和自动聚焦的细节参考这篇文章
此外，还有些坑不知道什么原因造成的：用户数据的本地存储我用了lowdb：
本质就是通过node的fs模块来操作本地JSON文件，只不过它比我们自己实现的要优雅，可靠多了
然后有个需求是，当触发某种条件时，保存对应的变量：
// 当用户点击Button A
db.set("a",111).write();
// 当用户点击Button B
db.set("b",222).write();
此时，如果用户点击了Button A，不仅a 数据会更新，b数据也会更新，反之同样。
这不是lowdb的问题，因为我多带带测试过，点击Button A并不会导致其他set函数调用！
所以这应该算是一个奇怪的问题吧。
利用ipcRenderer监听通信时，如果在listener内使用了异步：
ipcRenderer.on("delete", () => {
// 异步这里特指setTimeout
setTimeout(() => {
// 不知为何,_this.remove会调用多次（但发现ipcMian.send只被调用了一次！）
_this.remove(this.nodeWasRightClicked, this.dataWasRightClicked);
}, 0);
});
另外： 打包软件时也遇到了很多问题，但最终都通过Google解决掉了，所以这里不复述了（所谓面向Google编程）
其他问题后续会继续补充，欢迎持续关注！
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/57653.html
摘要：本来写这个项目时就没打算来自己实现富文本编辑器，本着能用开源就用开源的原则，在项目里测试了一些开源的编辑器，发现或多或少都有些问题，后来一琢磨，反正这个项目的富文本编辑器需求不复杂，就自己实现一个好了。 断断续续写了个把月，终于在昨天完成了第一版… 笔落写作 一款帮助网络写手更方便地进行小说创作的PC软件，目前支持 OSX/Windows 名字灵感来自于杜甫的一首诗，前两句是： 《寄...
摘要：前言本项目旨在从零到壹，制作一款界面精美的聊天软件。因为本人是开发，设计功底欠缺，所以软件设计的有点丑，如果有大神有更好的，欢迎。 Hola 前言 本项目旨在从零到壹，制作一款界面精美的聊天软件。 Github 地址因为已工作，所以可能没有多少时间来继续跟进这个项目了，项目可优化的点已在下文列出，欢迎大家 Fork 或 Star。 ps: 征 logo 一枚。因为本人是开发，设计功底...
摘要：三配置环节目的一是为之后的环节初始化工作流参数，二是准备好应用文件夹内容即要打包的目标文件夹做的事解析命令行参数，初始化工作参数，填充配置文件，把配置文件和相关依赖文件导入到文件夹内合适的 首发于酷家乐前端博客，作者@摘星（segmentfault @StinsonZhao） 我们能从很多地方学习到怎么起一个 Electron 项目，有些还会介绍怎么打包或构建你的代码，但距离「真正地...
摘要：工欲善其事，必先利其器，买了一款之后，就要选用一款好用的工具远程连接登录你的服务器了。鉴于目前已经是年了，系统自带的终端也是可以连接的工欲善其事，必先利其器，买了一款VPS之后，就要选用一款好用的SSH工具远程连接登录你的服务器了。当然SSH工具有很多，你可以选用自己觉得的顺手的，虽然FinalShell和MobaXterm也非常好用，但是感觉JAVA写的东西，启动总是慢半拍。 此外，...
摘要：有部分前端人员使用的是盗版的。非编程相关其它一些我使用的，但与编程关系不大的正版工具。尊重别人，更是尊重自己做为一个程序员，使用正版，我认为这不是自做清高的事情，这是对自己职业的一种基本尊重。 ...
阅读 2835·2021-10-12 10:11
阅读 1220·2021-09-22 15:43
阅读 1967·2019-08-30 15:54
阅读 940·2019-08-30 10:51
阅读 1946·2019-08-29 18:35
阅读 304·2019-08-26 11:58
阅读 2340·2019-08-26 11:38
阅读 2303·2019-08-23 18:35
