快速用electron生成一個PC端應用

寫在前面的

在使用Electron開發應用的過程中遇到了很多小的bug,這些bug有的解決方案尚且有用,有的bug已經過時了。網上的帖子有很多,質量層次不齊,如何去引入解決問題云云,很多的bug是框架自身的問題甚至還活在issues裏。爲了便於開發electron應用,我整理了三個模板倉庫便於直接應用於開發,因爲本地沒有OSX的環境,所以都是在Win10完成的開發,這也是解決起來最麻煩的。

倉庫地址: Gitee, GitHub

爲什麼是React

針對於Vue的帖子有很多,也很多人使用,我也曾用過。因爲自己學過和用過很多開發語言,而React更適用於我的編程邏輯和習慣,Vue面向設計師我感覺是很合適的(~﹃~)~zZ。

關於EraacEraascEraatc

Eraac全名爲electron-react-antd-antv-cli,另外的兩個st分別代表sqlite3的版本和typescript的版本。EraacEraasc的類型檢查都是用的prop-types,根據react官方的建議和發展趨勢ts版本會越來越流行,js版本降低了開發難度和考慮因素同時存在類型安全的問題,ts版本更適合大型應用的開發。

sqlite3的版本本質就是Eraac引入了sqlites3,但是由於sqlite3並不能直接使用。構建同樣是一個大坑,因此整理爲了一個獨立的倉庫。同時需要說明的是:框架限制了electron的版本更新,因爲electron版本更新也存在不兼容的問題,如果有需要請自行更新!模板的master分支會盡快跟着electron進行更新的兼容性測試,新項目無需擔心。

爲什麼引入了antd和antv

antd是阿里螞蟻提供的可視化開源組件,跟餓了麼提供的element-ui面向vue一樣都是組件。antv是螞蟻提供的數據可視化組件,在一個應用開發中往往數據可視化也能帶來更好的用戶體驗。antv使用的是BizCharts,爲阿里面向react的商業級數據可視化組件,能夠保證足夠的開發質量。

如何快速生成一個electron應用

第一次使用我建議使用Eraac模板,因爲足夠便捷。根據README.md的使用指南,很快就會啓動成功一個electron應用,根據自己的需要可以清掉所有的demo和test文件直接構建。

基本使用

主進程位於: /public/electron.js

渲染進程可以位於任何組件中,只需要使用window.electron即可使用electron提供的所有API。

進階使用

參考REAME.md引用的文檔,配置好package.json.yml文件,遵循使用說明,即可實現直接構建帶有自動升級的PC端應用!

使用demo: EdeverClient

EdeverClient倉庫位於GitHubGitee,它是基於EraacGitee OpenAPI的便於瞭解系列所有框架實時動態的PC端。目前只提供了win x64的版本,因爲沒有Mac,如果能參與構建就很感謝了!

下面是使用界面:

在這裏插入圖片描述

自帶了自動更新,無需再考慮版本更新問題,請在 GitHub 的release中獲取(因爲Gitee限制了附件大小,實在沒有辦法)

這同時是一個demo基於React Hooks開發,倉庫裏的代碼開源,哪裏不會看哪裏比文檔更直觀。

寫在後面的

作者大三,同時也是考研狗,不是科班出身,更新框架可能有時候會慢一點,歡迎使用,歡迎pr,issues,如果能給個star那就是最好的鼓勵了!有任何問題都可以issues。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章