使用electron+vue開發一個跨平臺todolist(便籤)桌面應用

2020-12-09 紙鶴視界

# 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

一個使用 electron + vue + electron-builder 開發的跨平臺 todo-list 桌面應用

相關技術

electron 9.x

vue 2.x

vue-cli-plugin-electron-builder

electron-builder

lowdb

exceljs

dayjs

Vue.Draggable

......

功能預覽

步驟

npm installnpm run electron:servenpm 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 的實現細節，歡迎關注。

GitHub：https://github.com/xiajingren/xhznl-todo-list

相關焦點

  • Electron 7.0.0 發布,跨平臺桌面應用開發工具
    Electron 7.0.0 穩定版正式發布了，Electron 是 GitHub 開發的跨平臺桌面應用開發工具，支持使用 Web 技術開發桌面應用，其基於 C++ 開發，GUI 核心來自於 Chromium，而 JavaScript
  • Electron實戰
    二、 桌面應用程式的歷史桌面應用程式，又稱為 GUI 程序。從古到今，開發桌面應用程式有很多種技術，每種技術的優劣，大家可能耳熟能詳了：VB上古程式設計師的開發工具，曾經全球第一的開發語言，拖拽式的圖形化開發讓它成為極佳的桌面開發工具。
  • 用electron加Vuejs開發桌面程序
    electron是一個js的桌面程序框架，有很多程序基於它開發，比如VsCode,Atom等。而Vue.js是我們國人開發的著名js框架。用這兩個結合開發就是強強聯手，只要會網頁開發就能寫桌面程序，感覺不要太好首先我們需要先安裝nodejs+npm, 因為太慢，就需要用國內的鏡像伺服器了，比如阿里的然後執行以下命令建一個基於vue的electron項目，項目名要替換成你的目錄最後就會看到一個程序啟動
  • 能嵌入桌面的跨平臺ToDoList,便籤
    我一直在尋找好用的便籤記錄工具，用來簡單的記錄待辦事項。不同於錘子便籤這一類的，事實上，錘子便籤更適合記錄想法，記錄大段文字。什麼是好用的便籤工具？我試過很多，比如爛筆頭、水滴清單、簡記，還有比較知名的番茄ToDo。它們都很不錯，可以完成我的記錄要求，但是說不上，真正的喜歡。基本要求是希望它簡潔，簡單，省事，最好能夠多平臺同步。
  • 5個開發桌面應用程式的JavaScript框架
    5個開發桌面應用程式的JavaScript框架 很久以前，開發客戶端桌面程序需要我們掌握各種複雜的技術，不過現在，我們只需要使用js就可以開發出桌面應用程式，下面我們盤點5個開發桌面應用程式的框架。
  • 翻譯 | 《JavaScript Everywhere》第18章 帶Electron的桌面應用程式(^_^)
    但是，多年來，創建這些應用程式的能力一直非常缺乏。值得慶幸的是，今天，我們能夠使用網絡技術來構建功能全面的桌面應用程式，而且學習曲線很小。我們正在構建什麼在接下來的幾章中，我們將為Notedly的社交筆記應用程式構建一個桌面客戶端。我們的目標是使用JavaScript和Web技術來開發桌面應用程式，用戶可以下載並安裝在計算機上。
  • Electron 10.0.0 發布,跨平臺桌面應用開發工具
    無框架窗口應用程式在設置其窗口樣式時可能必須考慮此更改。Features 添加了contents.getBackgroundThrottling()method 和contents.backgroundThrottling屬性。
  • 微軟GitHub項目Electron 11.0.0跨平臺框架發布 其本身是基於C++開發
    Electron 是 GitHub 發布的跨平臺桌面應用開發工具，支持 Web 技術開發桌面應用，其本身是基於 C++ 開發的，GUI 核心來自於 Chrome，而 JavaScript 引擎使用 v8。
  • 【譯】探索更輕量的Electron替代品來託管Blazor桌面應用程式
    這篇文章發布後還有一篇後續，是介紹一個在本文提到的跨平臺 webview 概念的落地項目 WebWindow ，我也會接著翻譯過來。我們能否以更少的資源消耗，獲得 Electron 的利用 web 技術構建的桌面應用程式的優勢?
  • 手摸手Electron + Vue實戰教程(一)
    一個由淺入深（或者說從入門到放棄）的套路，一步步帶你敲代碼實現一個小項目，希望能給大家帶來一點點啟發。2 項目搭建網上有個比較火的腳手架electron-vue，github 上 12.2k 的 star，大家應該都聽說過或者使用過，但現在我們不使用它，electron-vue是vue-cli2.0的版本，現在都已經出道 4.0 了，再者electron-vue已經很久沒有更新，我們可以使用 vue 最新的腳手架加上插件vue-cli-plugin-electron-builder
  • Windows 10中桌面便籤的使用
    桌面便籤工具用來記錄一些臨時的細碎事務提醒，或者是記錄一些瞬間的想法，很有用。
  • Electron 調用 原生代碼的正確打開方式,不是ffi!
    electron 很不錯，可以實現跨平臺應用的開發，但是如果需要跟硬體交互就顯得欠缺了，好在 electron 實際上是 node js + html + css，而 nodejs 想要調用本地代碼還是可以實現的。我也是基於這個想法去做的，但是遇到了一堆的問題。
  • 史上最全:Vue 相關開源項目庫匯總
    :)本文包含UI組件、開發框架、實用庫、服務端、輔助工具、應用實例、Demo示例等七個方面的項目匯總。vue2-editor ★155 - HTML編輯器vue-charts ★152 - 輕鬆渲染一個圖表vue-data-grid ★151 - VueJS複雜桌面交互示例vuwe ★150 - 基於微信WeUI所開發的專用於Vue2的組件庫vue-progressive-image ★148 - Vue的漸進圖像加載插件
  • 使用Web前端技術開發桌面應用---Electron Remote模塊的使用
    當我們知道了Electron有主進程和渲染進程後，我們還要知道一件事，就是Electron的API方法和模塊也是分為可以在主進程和渲染進程中使用那如果我們想在渲染進程中使用主進程中的模塊方法時，可以使用Electron Remote解決在渲染和主進程間的通訊。這節我們就實現一個通過Web中的按鈕打開新窗口。
  • 2021年,最適合移動和桌面應用的JavaScript框架是什麼?
    儘管JavaScript主導著web開發領域，但是在移動和桌面應用開發領域，它不得不屈居於Java、C#和C++之下。然而，很多人可能沒注意到JavaScript對移動和桌面應用開發也產生了影響。本文就將討論一些主要的JavaScript框架，以及它們在移動和桌面應用開發領域的優缺點。
  • 用PHP開發原生桌面應用程式
    我們在 《【開源彈】HTML5利器大閱兵，助力HTML5開發》中，介紹了幾種用HTML5、JavaScript等技術來開發桌面應用的方案，如將NodeJS與WebKit技術融合可以編寫跨平臺應用的 Node-WebKit，騰訊Web團隊開發的HTML5桌面應用開發引擎 AlloyDesktop等。
  • 使用 Macaca 測試 Electron 桌面 App
    /promise-webdriver 支持的鏈式調用，這裡指的是解析了 host，port兩個參數，並得到了一個driver對象可以鏈式調用各種方法。進入測試用例套件，調用init方法, 該方法在 commands.js ，通過webdriver.js 的 _init 方法發送腳本內傳遞的參數到服務端 3456埠， 執行用例之前我們就啟動的服務端，所以一直有監聽。
  • Electron 3.0.0 發布,升級 Chrome、Node 與 V8
    Electron 3.0.0 發布了，Electron 是 GitHub 發布的跨平臺桌面應用開發工具，支持 Web 技術開發桌面應用
  • 電腦桌面便籤軟體如何做到隨時查看並更改?
    ，我就上前詢問她怎麼回事，聽她一頓哭訴後，原來是因為昨天和領導接見合作商的時候忘記帶電腦了，講解的稿子她都記在電腦便籤裡了，沒電腦看，導致她講解的內容非常不好，被領導批評了一通。看著她鬱鬱寡歡的表情，我就趕緊給她分享了我一直在工作中用的電腦桌面記事本便籤軟體「敬業籤」，用了敬業籤就不用再擔心沒有電腦怎麼看便籤內容了，因為敬業籤是一款多端同步操作便籤，它支持記錄內容跨平臺，Windows電腦﹑安卓手機﹑蘋果iPhone手機﹑蘋果電腦Mac端以及網頁Web端等多個埠雲端同步並提醒，多端共享記錄內容。
  • 如何將記事本放在桌面,桌面添加記事本便籤的方法
    TXT記事本善於記錄純文本，而且格式對於任何應用都很友好，很少有打不開TXT格式的應用。