当初的冲动最近一直在学习Electron来开发桌面应用。目的是做一个桌面编辑器。虽然我一直在用Typore这个神器，但是无奈Typore太国际化了，在国内又不水土不服，不能满足我的一些需求。比如要上传本地图片到云端（mac版可以用iPic），但是无法帮我把本地图片和文章发布到博客园、CSDN、SegmentFault、掘金等国内知名博客平台，或者使用一些免费或付费图床，借助iPic等工具，一键上传图片至云端。我个人试过七牛云的免费10G存储空间，不过说实话，这些免费空间肯定是为了你最后成为付费用户的。各种限制，各种投诉，在网上很容易找到。免费图床，比如新浪微博等，还是比较不错的图床工具。比起网上一些不知道是什么公司甚至是个人的免费图床，相对来说新浪应该更靠谱一些。可以保证图片的存活时间。我个人使用过一些免费的图片床网站。记得印象最深的就是服务器出问题了。通知张贴在网站上。虽然新浪的大业务不是因为关了就关了，图片也比较稳定可靠，但是新浪的图片服务器会检测访问源的referer，防止外部网站引用，导致403访问。一句话总结，不如文章一键发图到博客平台。拼凑起来～心理上的挣扎是这个动力的原点，但还是难以下定决心。我个人是一名Java工程师。虽然做过Andorid和HTML前端，但是因为对前端深感不爽，果断放弃了。对于桌面程序开发，连Swing都不会。构建Markdown编辑器有点困难，更不用说添加这些自定义功能了。犹豫了一下，还是决定试一试。所以我研究了一些编写跨平台的方法。先试试Swing，但是Swing并不容易实现一些我期望的功能。可以改成JavaFX，不过说实话，写起来很累，太繁琐，所以放弃了。最后看看electron，就是这样，HTML+Js+Css，听上去很简单，事实证明测试和打包都很方便。做出决定后，Electron的系统学习就开始了。迈出第一步第一步是安装Electron的本地开发环境，这是大多数应用程序开发的第一步。您需要在本地计算机上安装Node.js。Electron还依赖于Node.js环境。严格来说，Electron将Chromium和Node.js结合到同一个运行环境中，并为Mac打包。Windows和Linux系统下的应用程序可以达到这个目的。关于Electron的具体发展过程，这里就不赘述了。可以在开发中使用Web前端开发的思想。除了处理多个窗口之间的交互，你还得了解Eelctron的进程机制。主进程和渲染进程Electron运行package.json主脚本的进程称为主进程。在主进程中运行的脚本通过创建网页来呈现用户界面。一个Electron应用程序总是只有一个主进程。由于Electron使用Chromium来显示网页，所以也使用了Chromium的多进程架构。Electron中的每个网页都在自己的渲染器进程中运行。在普通浏览器中，网页通常运行在沙盒环境中，无法访问操作系统的原生资源。然而，在Node.jsAPI的支持下，Electron的用户可以在页面上与操作系统进行一些低级的交互。主进程和渲染进程的区别主进程使用BrowserWindow实例创建页面。每个BrowserWindow实例都在自己的渲染器进程中运行页面。当一个BrowserWindow实例被销毁时，相应的渲染进程也将被终止。主进程管理着所有网页及其对应的渲染进程。每个渲染器进程都是独立的，只关心它运行的网页。不允许在页面中调用GUI相关的原生API，因为在网页中操作原生GUI资源是非常危险的，容易造成资源泄露。如果要在网页中使用GUI操作，相应的渲染进程必须与主进程通信，请求主进程执行相关的GUI操作。主进程与渲染进程通信，那么进程之间如何通信呢？Electron为主进程（mainprocess）和渲染进程（rendererprocesses）之间的通信提供了多种实现方式。例如，您可以使用ipcRenderer和ipcMain模块发送消息，并使用remote模块。RPC通信。你也可以使用Electron中的IPC机制。在主进程中将数据存储在一个全局变量中，然后在多个渲染进程中使用远程模块访问它。//在主进程中global.sharedObject={someProperty:'defaultvalue'}//在第一页require('electron').remote.getGlobal('sharedObject').someProperty='newvalue'//在第一页两个页面中console.log(require('electron').remote.getGlobal('sharedObject').someProperty)使用了Electron的APIElectron在主进程和渲染进程中提供了大量的API来帮助开发桌面应用。在主In进程和渲染进程中，可以通过require将其包含在模块中，以获取Electron的APIconstelelectron=require('electron')所有Electron的API都分配给一个进程类型。许多API只能在主进程或渲染器进程中使用，但其中一些API可以同时在两个进程中使用。每个API的文档将说明您可以在哪些进程中使用该API。Electron中的窗口是使用BrowserWindow类型创建的实例，只能在主进程中使用。//这样写在主进程中会有用，但是在渲染进程中会提示'undefined'const{BrowserWindow}=require('electron')constwin=newBrowserWindow()因为允许进程间通信，所以渲染进程可以调用主进程执行任务。Electron通过remote模块暴露了一些通常只能在主进程中使用的API。为了在渲染过程中创建一个BrowserWindow的实例，我们通常使用remote模块作为中间件：//这在渲染过程中写的时候有效，但是在主过程中是'undefined'const{remote}=require('electron')const{BrowserWindow}=remoteconstwin=newBrowserWindow()使用Node.jsAPIElectron在主进程和渲染进程中将所有接口暴露给Node.js。这里有两个重要的定义：1）所有可以在Node.js中使用的API也可以在Electron中使用。在Electron中调用以下代码很有用：constfs=require('fs')constroot=fs.readdirSync('/')//这将打印出磁盘根级别的所有文件//包含两者'/'和'C:\'。console.log(root)正如您可能已经猜到的那样，如果您尝试加载远程内容，这会带来重要的安全隐患。您可以在我们的安全文档中找到有关加载远程内容的更多信息和指南。2)您可以在您的应用程序中使用Node.js模块。选择你最喜欢的npm模块。npm提供了世界上最大的开源代码存储库，其中包含维护良好、经过测试的代码，提供给服务器应用程序的功能也提供给Electron。例如，要在您的应用程序中使用官方AWSSDK，您需要先安装其依赖项：npminstall--saveaws-sdk，然后在您的Electron应用程序中通过require导入并使用该模块，就像构建Node.js一样。jsapplication://ready-to-useS3clientmoduleconstS3=require('aws-sdk/clients/s3')有一个很重要的注意事项：原生的Node.js模块（即源码之前需要编译它可以使用模块使用）需要编译才能与Electron一起工作。绝大多数Node.js模块都不是原生的，650,000个模块中只有400个是原生的。当然，如果你真的需要原生模块，你可以查看如何为Electron重新编译原生模块（很简单）。最终产品定型，终于搞清楚了Electron的应用架构，接下来就是进入产品开发阶段了。幸运的是，ELectron的UI完全由CSS+HTML组成。这部分可用的框架太多了。界面UI的搭建我选择了老牌??知名的BootStarp框架，还引用了JS框架JQuery。我选择了electron-store作为本地存储文件。至于最关键的Markdown语法分析，我对比了主流的分析框架，最终选择了markdown-it。贴出效果图：我给这款软件取名为JustWrite，意思是现在写作也是在督促自己。毕竟，犹豫就等于没有。现在软件的功能包括一键发布本地文章和本地图片到博客园、CSDN、SegmentFault、掘金、开源中国等平台。我也打算把它打造成一款体验不错的Markdown写作软件。您现在阅读的这篇文章是我使用JustWrite编写的。我使用的字体是我个人最喜欢的小圆字体。此外，还有六种不同风格的字体可以切换。字体大小也可以动态放大或缩小，也可以关闭右边的预览专注于书写，如下图：这些截图是我截图后使用快捷键Ctrl+V粘贴的,图片会自动放到当前md文件所在目录下的图片文件夹中。JustWrite从构思到实践的心路历程大致如上。这次JustWrite的开发也让我过了一个产品经理的瘾，基本满足了我的日常需求。如果大家有更好的想法和想法，也可以告诉我，说不定第二天就能实现。Github：https://github.com/yueshutong/JustWrite
