資訊專欄INFORMATION COLUMN
摘要：本來寫這個項目時就沒打算來自己實現富文本編輯器，本著能用開源就用開源的原則，在項目里測試了一些開源的編輯器，發現或多或少都有些問題，后來一琢磨，反正這個項目的富文本編輯器需求不復雜，就自己實現一個好了。
斷斷續續寫了個把月，終于在昨天完成了第一版…筆落寫作
一款幫助網絡寫手更方便地進行小說創作的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編程）
其他問題后續會繼續補充，歡迎持續關注！
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/95013.html
摘要：前言本項目旨在從零到壹，制作一款界面精美的聊天軟件。因為本人是開發，設計功底欠缺，所以軟件設計的有點丑，如果有大神有更好的，歡迎。 Hola 前言 本項目旨在從零到壹，制作一款界面精美的聊天軟件。 Github 地址因為已工作，所以可能沒有多少時間來繼續跟進這個項目了，項目可優化的點已在下文列出，歡迎大家 Fork 或 Star。 ps: 征 logo 一枚。因為本人是開發，設計功底...
摘要：三配置環節目的一是為之后的環節初始化工作流參數，二是準備好應用文件夾內容即要打包的目標文件夾做的事解析命令行參數，初始化工作參數，填充配置文件，把配置文件和相關依賴文件導入到文件夾內合適的 首發于酷家樂前端博客，作者@摘星（segmentfault @StinsonZhao） 我們能從很多地方學習到怎么起一個 Electron 項目，有些還會介紹怎么打包或構建你的代碼，但距離「真正地...
摘要：工欲善其事，必先利其器，買了一款之后，就要選用一款好用的工具遠程連接登錄你的服務器了。鑒于目前已經是年了，系統自帶的終端也是可以連接的工欲善其事，必先利其器，買了一款VPS之后，就要選用一款好用的SSH工具遠程連接登錄你的服務器了。當然SSH工具有很多，你可以選用自己覺得的順手的，雖然FinalShell和MobaXterm也非常好用，但是感覺JAVA寫的東西，啟動總是慢半拍。 此外，...
摘要：有部分前端人員使用的是盜版的。非編程相關其它一些我使用的，但與編程關系不大的正版工具。尊重別人，更是尊重自己做為一個程序員，使用正版，我認為這不是自做清高的事情，這是對自己職業的一種基本尊重。 ...
閱讀 2536·2023-04-25 19:47
閱讀 3383·2019-08-29 17:18
閱讀 856·2019-08-29 15:26
閱讀 3360·2019-08-29 14:17
閱讀 1115·2019-08-26 13:49
閱讀 3339·2019-08-26 13:22
閱讀 3023·2019-08-26 10:44
閱讀 2693·2019-08-23 16:51
