Electron開發初體驗

平時總會寫markdown，markdown整體語法用起來很方便，但依然有晦澀的地方，比如**。markdown的**語法寫起來很容易出錯，而且每行每列單元格裡的內容長短不一編輯器裡就很容易亂掉，所以我在寫**時候都是借助tables generator來寫的，但是這個**不能儲存多個模板，每次寫不同的**都要把列數，表頭資訊來回改，很麻煩，於是打算自己照著table generator寫乙個簡單的，能儲存表頭資訊的東西出來。先看一哈大致的樣子：

在這個"不用腳手架不舒服" + "不用框架不舒服"的時代，搭建工程當然是選擇一款靠譜的腳手架了，開發環境 + 打包構建都能通過命令列搞定，極大程度地節省了時間，感謝開源貢獻者吧~這裡我選擇了electron-vue這個模板，基於vue-cli的，初始化專案很簡單，直接執行:

vue init simulatedgreg/electron-vue my-project

然後根據提示輸入完專案名，專案描述，依賴和構建工具(electron-builder或者electron-packager)後，乙個專案就搭建完成了，進入目錄執行：

yarn && yarn dev

然後專案就以開發模式執行起來了

後續的開發工作，如果你的應用對於系統級別的api需求不大，事實上和開發網頁的體驗並沒有什麼區別。比如我要完成的這個小工具就和開發網頁的體驗差不多。

實現的思路比較簡單：為**的每乙個單元格設定contenteditable，這樣整個**的內容都是可以隨意編輯的，然後再通過mutationobserver監聽**內容的變化，構造出正確的資料結構即可。

然後在渲染完成後使用mutationobserver監聽變化：

mounted ()

這裡的mutationobserver的配置是作用分別是：

核心概念主要就用到了這兩個概念，樣式上選擇了*****css，簡單的功能搭配簡潔的風格。

**資訊寫好之後，最後的功能就是生成對應的markdown內容然後複製到貼上板了。electron提供了clipboard api，直接呼叫clipboard.writetext就能把內容寫入貼上板：

import  from 'electron'
let text = '***'
clipboard.writetext(text)

let mynotification = new notification('table generator', )
settimeout(() => , 2000)

實際效果為乙個兩秒後自動消失的提示框：

這裡要實現的效果是通過自定義的快捷鍵刪除左側模板列表中的模板，但是快捷鍵註冊只能在主程序通過globalshortcut註冊，而對於刪除行為的響應(二次確認的彈窗)是在渲染程序，所以設計到了主程序和渲染程序的通訊。

渲染程序是主程序中建立的乙個browserwindow例項，例項的webcontents屬性是對渲染程序的引用，所以主程序可以直接通過webcontents傳送事件：

// 建立的渲染程序
mainwindow = new browserwindow()
// 註冊快捷鍵
globalshortcut.register('cmd+d', () => )

而在對應的render程序，可以通過ipcrenderer監聽訊息：

ipcrenderer.on('del-tpl', () => )

事實上通過一些簡單的配置，就可以讓你的應用體驗更好：

本次初步的嘗試並沒有用到太多系統級別的api，基本和開發web頁面體驗一樣，文中提到的api和優化點都是文件上可以找到的，本次實踐只是對electron的一次涉獵，後續可以考慮將各種操作和提示都遷移到原生的api，或者再加入其它功能，不過用來生成markdown內容「初心」已經達到了~

原始碼在gayhub上，有興趣的同學也可以自己安裝依賴構建體驗一哈，順便點個star~最後，我們在招前端開發，歡迎投遞簡歷至[email protected]!

Electron開發初體驗

Electron初體驗前端桌面應用開發

React開發初體驗

Symbol 開發初體驗 3

Electron開發初體驗

Electron初體驗 前端桌面應用開發

React開發初體驗

Symbol 開發初體驗 3

相關推薦

Electron初體驗前端桌面應用開發