# # 1 最近一直在使用electron開發桌面應用，對於一個web開發者來說，html+javascript+css的開發體驗讓我非常舒服。之前我一直簡單的以為electron只是張網頁加個殼，和那些號稱跨平臺的執行在手機上的webapp是一個套路。直到我真的需要開發一個跨平臺桌面應用的時候，我又認真的嘗試了一下electron，我開始意識到：這才是我理想中的跨平臺桌面應用開發的最終形態，它簡直太優秀了。 # # 2 在使用electron期間，我順便寫了一個簡單的todolist（便籤）應用，用於學習和嘗試；專案地址：https://github.com/xiajingren/xhznl-todo-list 介面參考了小黃條便籤。它目前的功能還非常簡單，但是包含了很多我使用electron時遇到問題，這也是electron新手都很可能遇到的，也算是一個技術總結吧；比如： - electron無邊框透明視窗/拖拽/置頂/閃爍問題 - electron軟體開機自啟動 - electron軟體單例項執行 - electron視窗的滑鼠穿透/部分穿透 - electron軟體打包 - electron軟體自動更新（GitHub） - electron中使用本地資料庫 - electron中資料匯出為excel檔案 - 等等...... 以下是專案README： # # 3 ## **xhznl-todo-list** :sparkles:一個使用 electron + vue + electron-builder 開發的跨平臺 todo-list 桌面應用 ## 相關技術 [electron 9.x](https://github.com/electron/electron) [vue 2.x](https://github.com/vuejs/vue) [vue-cli-plugin-electron-builder](https://github.com/nklayman/vue-cli-plugin-electron-builder) [electron-builder](https://github.com/electron-userland/electron-builder) [lowdb](https://github.com/typicode/lowdb) [exceljs](https://github.com/exceljs/exceljs) [dayjs](https://github.com/iamkun/dayjs) [Vue.Draggable](https://github.com/SortableJS/Vue.Draggable) ...... ## 功能預覽       ## 步驟 ``` npm install npm run electron:serve npm run electron:build ``` 下載 releases：https://github.com/xiajingren/xhznl-todo-list/releases ## 規劃 - [x] todo/done 基本功能 - [x] 本地資料庫儲存 - [x] 軟體自動更新 - [x] 資料匯出為 excel - [x] 開機啟動 - [x] 滑鼠穿透 - [ ] 視窗貼邊自動收起 - [ ] ...... # # 4 在使用electron期間確實也遇到很多坑，其中大部分都是來自於electron編譯nodejs模組。後續我可能整理一個關於electron的系列分享，介紹 [xhznl-todo-list](https://github.com/xiajingren/xhznl-todo-list) 的實現細節，歡迎關注。 GitHub：https://github.com/xiajingren/xhznl-todo-list