斷斷續續寫了個把月，終于在昨天完成了第一版…

筆落寫作

一款幫助網絡寫手更方便地進行小說創作的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編程)

其他問題后續會繼續補充，歡迎持續關注！

總結

以上是生活随笔為你收集整理的python自动写作软件_开发了一款写作软件(OSX,Windows)，附带Electron开发指南的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。