開闢了一款寫作軟件(OSX,Windows)，附帶Electron開闢指南

2023年2月25日 160次阅读 来源: 林水溶

斷斷續續寫了個把月，終究在昨天完成了初版…

筆落寫作

一款協助收集寫手更方便地舉行小說創作的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://segmentfault.com/a/1190000014875164
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞