原始沖動(dòng)

最近一直在學(xué)習(xí) Electron 開(kāi)發(fā)桌面應(yīng)用程序，目的是想做一個(gè)桌面編輯器，雖然一直在使用Typore這款神器，但無(wú)奈Typore太過(guò)國(guó)際化，在國(guó)內(nèi)水土不服，無(wú)法滿足我的一些需求。

[[283616]]

比如實(shí)現(xiàn)本地圖片上傳到云端(mac版可以借助iPic)，無(wú)法幫我把本地圖片和文章一起發(fā)布到博客園、CSDN、SegmentFault、掘金等國(guó)內(nèi)知名博客平臺(tái)，要么使用一些免費(fèi)或付費(fèi)的圖床，借助類似iPic的工具，把圖片一鍵上傳到云端。

我個(gè)人也嘗試過(guò)七牛云的免費(fèi)10G存儲(chǔ)空間，但是說(shuō)實(shí)話，這些免費(fèi)的空間到最后一定是為了讓你成為付費(fèi)用戶，各種限制各種吐槽在網(wǎng)上很容易可以搜索到。

免費(fèi)的圖床如新浪微博等，還算是比較好的圖床工具，相比一些網(wǎng)絡(luò)上的壓根不知道啥公司甚至是歸屬個(gè)人的免費(fèi)圖床，新浪應(yīng)該是比較靠譜的，相對(duì)來(lái)說(shuō)可以保證圖片的存活時(shí)間，我個(gè)人用過(guò)一些免費(fèi)的圖床網(wǎng)站，記得印象深刻的就是服務(wù)器出問(wèn)題，網(wǎng)站掛個(gè)公告，曾經(jīng)的圖片再去訪問(wèn)就是默認(rèn)的404。

雖然新浪家大業(yè)大不是說(shuō)倒閉就倒閉的，圖片相對(duì)穩(wěn)定可靠，不過(guò)新浪的圖片服務(wù)器會(huì)檢測(cè)訪問(wèn)來(lái)源Referer來(lái)防止外部網(wǎng)站引用，造成訪問(wèn)403。

總結(jié)起來(lái)就是一句話，圖片還是隨著文章一鍵發(fā)布到博客平臺(tái)比較好。要丟一起丟～

心理掙扎

緣起這個(gè)動(dòng)機(jī)，但是下定決心依舊是困難重重。

我個(gè)人是一個(gè)Java工程師，雖說(shuō)搞過(guò)Andorid、HTML前端，但對(duì)前端深感不適的我果斷放棄了。對(duì)于桌面程序開(kāi)發(fā)，我連Swing都不會(huì)，造一個(gè)Markdown編輯器有點(diǎn)難，何況還要加上這些定制功能。

猶猶豫豫，還是決定去嘗試一下。于是調(diào)研寫(xiě)跨平臺(tái)的一些途徑。

先嘗試Swing，不過(guò)Swing不好實(shí)現(xiàn)我期望的一些功能，改成JavaFX倒是可以，不過(guò)說(shuō)實(shí)話，寫(xiě)起來(lái)很累，太過(guò)繁瑣，就放棄了。最后把目光瞄向electron，就它了，HTML+Js+Css，聽(tīng)起來(lái)就很簡(jiǎn)單，事實(shí)證明，無(wú)論是測(cè)試還是打包都很方便。

決定之后，便開(kāi)始進(jìn)行 Electron 的系統(tǒng)學(xué)習(xí)。

邁出第一步

第一步就是安裝 Electron 的本地開(kāi)發(fā)環(huán)境，這也是大多數(shù)應(yīng)用開(kāi)發(fā)的第一步。

你需要安裝 Node.js 在你的本地電腦，Electron 也是依賴于 Node.js 的環(huán)境，嚴(yán)格來(lái)說(shuō)， Electron 通過(guò)將 Chromium 和 Node.js 合并到同一個(gè)運(yùn)行時(shí)環(huán)境中，并將其打包為Mac，Windows和Linux系統(tǒng)下的應(yīng)用來(lái)實(shí)現(xiàn)這一目的。

關(guān)于 Electron 的具體開(kāi)發(fā)流程，這里不再贅述，你完全可以在開(kāi)發(fā)中使用Web前端開(kāi)發(fā)的思維，除了在處理多個(gè)窗口之間交互的時(shí)候，就不得不了解Eelctron的進(jìn)程機(jī)制。

主進(jìn)程和渲染進(jìn)程

Electron 運(yùn)行 package.json 的 main 腳本的進(jìn)程被稱為主進(jìn)程。在主進(jìn)程中運(yùn)行的腳本通過(guò)創(chuàng)建web頁(yè)面來(lái)展示用戶界面。一個(gè) Electron 應(yīng)用總是有且只有一個(gè)主進(jìn)程。

由于 Electron 使用了 Chromium 來(lái)展示 web 頁(yè)面，所以 Chromium 的多進(jìn)程架構(gòu)也被使用到。每個(gè) Electron 中的 web 頁(yè)面運(yùn)行在它自己的渲染進(jìn)程中。

在普通的瀏覽器中，web頁(yè)面通常在沙盒環(huán)境中運(yùn)行，并且無(wú)法訪問(wèn)操作系統(tǒng)的原生資源。然而 Electron 的用戶在 Node.js 的 API 支持下可以在頁(yè)面中和操作系統(tǒng)進(jìn)行一些底層交互。

主進(jìn)程與渲染進(jìn)程的區(qū)別

主進(jìn)程使用 BrowserWindow 實(shí)例創(chuàng)建頁(yè)面。每個(gè) BrowserWindow 實(shí)例都在自己的渲染進(jìn)程里運(yùn)行頁(yè)面。當(dāng)一個(gè) BrowserWindow 實(shí)例被銷毀后，相應(yīng)的渲染進(jìn)程也會(huì)被終止。

主進(jìn)程管理所有的web頁(yè)面和它們對(duì)應(yīng)的渲染進(jìn)程。每個(gè)渲染進(jìn)程都是獨(dú)立的，它只關(guān)心它所運(yùn)行的 web 頁(yè)面。

在頁(yè)面中調(diào)用與 GUI 相關(guān)的原生 API 是不被允許的，因?yàn)樵?web 頁(yè)面里操作原生的 GUI 資源是非常危險(xiǎn)的，而且容易造成資源泄露。如果你想在 web 頁(yè)面里使用 GUI 操作，其對(duì)應(yīng)的渲染進(jìn)程必須與主進(jìn)程進(jìn)行通訊，請(qǐng)求主進(jìn)程進(jìn)行相關(guān)的 GUI 操作。

主進(jìn)程與渲染進(jìn)程通信

那么進(jìn)程間如何通訊?

Electron為主進(jìn)程( main process)和渲染器進(jìn)程(renderer processes)通信提供了多種實(shí)現(xiàn)方式，如可以使用ipcRenderer 和 ipcMain模塊發(fā)送消息，使用 remote模塊進(jìn)行RPC方式通信。

你還可以用 Electron 內(nèi)的 IPC 機(jī)制實(shí)現(xiàn)。將數(shù)據(jù)存在主進(jìn)程的某個(gè)全局變量中，然后在多個(gè)渲染進(jìn)程中使用 remote 模塊來(lái)訪問(wèn)它。

// 在主進(jìn)程中 
global.sharedObject = { 
  someProperty: 'default value' 
} 
// 在第一個(gè)頁(yè)面中 
require('electron').remote.getGlobal('sharedObject').someProperty = 'new value' 
// 在第二個(gè)頁(yè)面中 
console.log(require('electron').remote.getGlobal('sharedObject').someProperty) 

使用Electron的API

Electron在主進(jìn)程和渲染進(jìn)程中提供了大量API去幫助開(kāi)發(fā)桌面應(yīng)用程序， 在主進(jìn)程和渲染進(jìn)程中，你可以通過(guò)require的方式將其包含在模塊中以此，獲取Electron的API

const electron = require('electron') 

所有Electron的API都被指派給一種進(jìn)程類型。許多API只能被用于主進(jìn)程或渲染進(jìn)程中，但其中一些API可以同時(shí)在上述兩種進(jìn)程中使用。每一個(gè)API的文檔都將聲明你可以在哪種進(jìn)程中使用該API。

Electron中的窗口是使用BrowserWindow類型創(chuàng)建的一個(gè)實(shí)例， 它只能在主進(jìn)程中使用。

// 這樣寫(xiě)在主進(jìn)程會(huì)有用，但是在渲染進(jìn)程中會(huì)提示'未定義' 
const { BrowserWindow } = require('electron') 
 
const win = new BrowserWindow() 

因?yàn)檫M(jìn)程之間的通信是被允許的, 所以渲染進(jìn)程可以調(diào)用主進(jìn)程來(lái)執(zhí)行任務(wù)。Electron通過(guò)remote模塊暴露一些通常只能在主進(jìn)程中獲取到的API。為了在渲染進(jìn)程中創(chuàng)建一個(gè)BrowserWindow的實(shí)例，我們通常使用remote模塊為中間件：

// 這樣寫(xiě)在渲染進(jìn)程中時(shí)行得通的，但是在主進(jìn)程中是'未定義' 
const { remote } = require('electron') 
const { BrowserWindow } = remote 
 
const win = new BrowserWindow() 

使用Node.js的API

Electron同時(shí)在主進(jìn)程和渲染進(jìn)程中對(duì)Node.js 暴露了所有的接口。這里有兩個(gè)重要的定義：

1)所有在Node.js可以使用的API，在Electron中同樣可以使用。在Electron中調(diào)用如下代碼是有用的：

const fs = require('fs') 
 
const root = fs.readdirSync('/') 
 
// 這會(huì)打印出磁盤根級(jí)別的所有文件 
// 同時(shí)包含'/'和'C:\'。 
console.log(root) 

正如您可能已經(jīng)猜到的那樣，如果您嘗試加載遠(yuǎn)程內(nèi)容， 這會(huì)帶來(lái)重要的安全隱患。您可以在我們的 安全文檔 中找到更多有關(guān)加載遠(yuǎn)程內(nèi)容的信息和指南。

2)你可以在你的應(yīng)用程序中使用Node.js的模塊。選擇您最喜歡的 npm 模塊。npm 提供了目前世界上最大的開(kāi)源代碼庫(kù)，那里包含良好的維護(hù)、經(jīng)過(guò)測(cè)試的代碼，提供給服務(wù)器應(yīng)用程序的特色功能也提供給Electron。

例如，在你的應(yīng)用程序中要使用官方的AWS SDK，你需要首先安裝它的依賴：

npm install --save aws-sdk 

然后在你的Electron應(yīng)用中，通過(guò)require引入并使用該模塊，就像構(gòu)建Node.js應(yīng)用程序那樣：

// 準(zhǔn)備好被使用的S3 client模塊 
const S3 = require('aws-sdk/clients/s3') 

有一個(gè)非常重要的提示: 原生Node.js模塊 (即指，需要編譯源碼過(guò)后才能被使用的模塊) 需要在編譯后才能和Electron一起使用。

絕大多數(shù)的Node.js模塊都不是原生的， 在650000個(gè)模塊中只有400是原生的。當(dāng)然了，如果你的確需要原生模塊，可以查詢?nèi)绾沃匦聻镋lectron編譯原生模塊(很簡(jiǎn)單)。

最終產(chǎn)品殺青落地

終于搞明白了 Electron 的應(yīng)用架構(gòu)，那么接著就要進(jìn)入產(chǎn)品的開(kāi)發(fā)階段。比較慶幸的是，ELectron 的UI完全由CSS+HTML組成，這部分可用的框架太多了，我選擇了又老又知名的 BootStarp 框架搭建界面UI，還引用了JS框架JQuery。選擇了 electron-store 作為本地存儲(chǔ)文件，至于最關(guān)鍵的Markdown語(yǔ)法解析，對(duì)比了一番主流解析框架，最終選擇了 markdown-it。貼一下效果圖：

這款軟件我給他起名為 JustWrite，意思就是現(xiàn)在就寫(xiě)，也是在督促自己吧，畢竟猶豫徘徊，等于白來(lái)。

現(xiàn)在軟件的功能除了包含一鍵發(fā)布本地文章加本地圖片到博客園、CSDN、SegmentFault、掘金、開(kāi)源中國(guó)等平臺(tái)，我還打算將他打造為一個(gè)體驗(yàn)不錯(cuò)的Markdown寫(xiě)作軟件?，F(xiàn)在你閱讀的這篇文章，就是我使用 JustWrite 書(shū)寫(xiě)的，使用的字體是我個(gè)人喜歡的幼圓體，除此之外，還有六款風(fēng)格迥異的字體可以切換使用。字號(hào)也是可以動(dòng)態(tài)放大或者縮小，還可以關(guān)閉右側(cè)預(yù)覽，專注于寫(xiě)作，如下圖所示：

這些截圖是我截屏后使用快捷鍵Ctrl+V一鍵粘貼的，圖片會(huì)自動(dòng)放到當(dāng)前md文件所在目錄下的picture文件夾內(nèi)。

關(guān)于 JustWrite 從構(gòu)思到實(shí)踐的心路歷程大致就以上這些了，這次開(kāi)發(fā) JustWrite 也讓我過(guò)了一把產(chǎn)品經(jīng)理的癮，基本已經(jīng)滿足了我的日常需求。如果你有更好的想法和創(chuàng)意也可以告訴我，說(shuō)不定第二天就會(huì)實(shí)現(xiàn)了。

Github：https://github.com/yueshutong/JustWrite