https://www.elliot98.top/tags/electron/Recent content in Electron on Lutong's HomepageHugozh-cnMon, 25 Mar 2019 17:46:13 +0800https://www.elliot98.top/post/tech/electron%E5%AE%9E%E7%8E%B0markdown%E7%AC%94%E8%AE%B0%E8%BD%AF%E4%BB%B6/Mon, 25 Mar 2019 17:46:13 +0800https://www.elliot98.top/post/tech/electron%E5%AE%9E%E7%8E%B0markdown%E7%AC%94%E8%AE%B0%E8%BD%AF%E4%BB%B6/<h1 id="关于这个markdown笔记软件一总体的思路和介绍">关于这个markdown笔记软件（一）——总体的思路和介绍</h1> <p><img src="http://img.blog.csdn.net/20180104141011065?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvRXJ0dWls/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt=""></p> <p><img src="http://img.blog.csdn.net/20180104152440832?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvRXJ0dWls/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt=""></p> <h2 id="项目源码">项目源码</h2> <p><a href="https://github.com/andytt/ErtuilEditor">https://github.com/andytt/ErtuilEditor</a></p> <h2 id="目录">目录</h2> <p>[<a href="https://blog.csdn.net/ertuil/article/details/78970359">关于这个markdown笔记软件（一）——总体的思路和介绍</a>](https://blog.csdn.net/ertuil/article/details/78970359)</p> <p>[<a href="https://blog.csdn.net/ertuil/article/details/78970413">关于这个markdown笔记软件（二）——模型层设计</a>](https://blog.csdn.net/ertuil/article/details/78970413)</p> <p>[<a href="https://blog.csdn.net/ertuil/article/details/78970951">关于这个markdown笔记软件（三）——视图层设计</a>](https://blog.csdn.net/ertuil/article/details/78970951)</p> <p>[<a href="https://blog.csdn.net/ertuil/article/details/78971385">关于这个markdown笔记软件（四）——md的渲染和生成</a>](https://blog.csdn.net/ertuil/article/details/78971385)</p> <p>[<a href="http://blog.csdn.net/ertuil/article/details/78972309">关于这个markdown笔记软件（五）——electron库</a>](https://blog.csdn.net/ertuil/article/details/78972309)</p> <p>[<a href="https://blog.csdn.net/ertuil/article/details/78973199">关于这个markdown笔记软件（六）——应用逻辑、electron对话框</a>](https://blog.csdn.net/ertuil/article/details/78973199)</p> <p>[<a href="https://blog.csdn.net/Ertuil/article/details/78973564">关于这个markdown笔记软件（七）——其他细节、总结</a>](https://blog.csdn.net/Ertuil/article/details/78973564)</p> <h2 id="介绍">介绍</h2> <p>一直想写一个类似 <strong>为知笔记</strong>、<strong>蚂蚁笔记</strong>之类的用来记笔记的软件。想来需要有这些需求：</p> <ul> <li> <p>要支持markdown。</p> </li> <li> <p>markdown要能够支持代码高亮和latex数学公式。</p> </li> <li> <p>界面至少要过得去、不能太丑。</p> </li> <li> <p>能够保存并管理图片、链接等资源。</p> </li> <li> <p>能够自动保存，能够调整样式。</p> </li> <li> <p>有标签的功能，方便整理。</p> </li> <li> <p>最好能够跨平台、有云功能（下一版本实现）。</p> </li> </ul> <h2 id="todo-list">Todo List</h2> <p>下一版本可能会有如下优化：</p> <p>1. 优化程序逻辑、减少重复的代码。各部分进一步解耦。</p> <p>2. 加入对右键的支持操作</p> <p>3. 加入用户和云备份的操作</p> <p>4. 优化用户界面和操作逻辑、提供设置</p> <h2 id="平台">平台</h2> <p>考虑的平台有以下三个：</p> <ol> <li>C++和qt库编写，需要自己造轮子、开发周期太长，调试麻烦。</li> <li>python+wxpython、pyqt等GUI库。python下有已经比较完备等markdown库，也能够跨平台，可以直接使用很方便。不过考虑这些库默认界面其实不大好看。（迷）</li> <li>使用node.js中的nw.js 或者electron库来写。</li> </ol> <p>最终选择了第三种方案，前端界面就是html+Javascript+css的网页框架，使用bootstrap框架的话就能够实现还不错的界面效果。程序逻辑自然就是使用Javascript来写，node.js也有不错的性能、markdown库也有，实现起来不用太麻烦！</p> <p>然而问题是：<strong>本人对前端技术并不了解</strong>，于是只能经常区“段错误”、“栈溢出”等网站求助。</p> <p>另一个问题就是electron和nw.js的官网的文档其实不是很全，特别是中文文档基本没有，于是踩了不少坑。</p> <h2 id="nwjs-vs-electron">nw.js VS electron</h2> <p>node.js有两个类似的库，都能够用web技术来构建本地程序，两个都有不少大项目在用：</p> <ul> <li> <p>nw.js：Leanote、mongo的软件、Whatsapp等等……</p> </li> <li> <p>electron：github、VScode、Wordpress、atom等都用的这个框架</p> </li> </ul> <p>看起来好像electron的文档更多、看起来也更好，于是选择了使用这个框架。</p> <h2 id="架构">架构</h2> <p>选定了方案之后就要开始选择软件的架构。</p> <p>View层：视图层就是html文件，利用bootstrap框架，有着不少很好看的样式、不需要自己绘制图标、定制样式了，也有不少动态效果。</p> <p>Model层：其实有几个想法。第一个就是直接使用json文件，但是需要自己造轮子，谈不上多麻烦，但是还是不大乐意。第二个方案就是使用数据库了，最好是本地数据库sqlite3，轻量级，就一个文件，也很好用。然而，这是一个坑，electron对sqlite3不兼容，报错（为此浪费了我 大半天的事件），索性放弃。</p> <p>正当我打算动手造轮子的时候，发现了node.js的一个很神奇的库lowdb。说是一个数据库，其实管理的就是一个json文件，使用起来看起来非常方便，CRUD有非常好的支持，稍微封装一下就好。</p> <p>Control层：其实没什么好说的，就是JavaScript实现查询数据库、对DOM操作操作，就成了。</p> <h3 id="其实当初选用nodejs也是想学一下javascript好在语言方面与c和python都挺像看看文档差不多就能摸索摸索了">其实当初选用node.js也是想学一下JavaScript，好在语言方面与C++和python都挺像，看看文档，差不多就能摸索摸索了。</h3>