最近老師突然給了一個(gè)小項(xiàng)目携冤，讓寫(xiě)一個(gè)照片墻卵皂，可以編譯成.exe安裝到電腦里面秩铆，因?yàn)槲覍?duì)C#這種桌面端語(yǔ)言完全不懂，也不感興趣灯变。并且之前聽(tīng)說(shuō)過(guò)electron殴玛，所以就借著這個(gè)機(jī)會(huì)嘗試一下，學(xué)習(xí)一下添祸。
效果如下所示：
主要是可以上傳圖片滚粟，刪除圖片，新建文件夾刃泌，刪除文件夾凡壤，以及圖片的拖拽放大等效果。項(xiàng)目地址：https://github.com/FFGF/photo-wall
遇到的坑
一直基本上使用的淘寶鏡像cnpm耙替，結(jié)果報(bào)了一個(gè)奇怪的bug亚侠，無(wú)法進(jìn)行cnpm run build，網(wǎng)上查閱之后俗扇，修改成了npm install, npm run build硝烂。就OK了，原因不清楚铜幽。
里面的拖拽使用了插件vue-grid-layout,安裝的最新版滞谢，結(jié)果一直報(bào)錯(cuò)串稀，開(kāi)發(fā)photo-wall用的vue-electron框架，這個(gè)框架很久沒(méi)更新了狮杨，還是用vuecli2構(gòu)建的母截，而我用的拖拽插件vue-grid-layout已經(jīng)使用vuecli3重新構(gòu)建過(guò)了，可能是不匹配禾酱，導(dǎo)致bug了微酬，后來(lái)把vue-grid-layout版本降低了，才沒(méi)有了bug颤陶。如果再使用vue和electron開(kāi)發(fā)颗管，推薦使用vue-cli-plugin-electron-builder，這個(gè)使用vuecli3構(gòu)建的滓走，我下面寫(xiě)了一個(gè)YouTube教程的網(wǎng)址垦江。
還遇到一個(gè)奇怪的問(wèn)題，就是圖片會(huì)自動(dòng)旋轉(zhuǎn)搅方，后來(lái)查閱資料才知道比吭，iPhone豎著拍攝的照片會(huì)有這種問(wèn)題。因?yàn)榫鸵粡堈掌涛校褂脀indows自帶的畫(huà)圖另存為一下就行了衩藤。如果這種圖片很多，或者圖片未知的建議編寫(xiě)代碼完善涛漂。iOS手機(jī)豎著拍的照片經(jīng)過(guò)前端處理之后被旋轉(zhuǎn)了90°的原因以及解決方案
學(xué)習(xí)過(guò)程
主要是網(wǎng)上找的一些教程資源和開(kāi)源項(xiàng)目進(jìn)行參考赏表。列舉一下我學(xué)習(xí)過(guò)程中查找的比較好的資料。
- 官方文檔匈仗，大部分的API都在這瓢剿，還是中文的。https://electronjs.org/
- PicGo開(kāi)源圖床悠轩，文檔寫(xiě)的很好 https://molunerfinn.com/electron-vue-1/
- 老外寫(xiě)的间狂，很詳細(xì)的一個(gè)小例子 https://medium.com/developers-writing/building-a-desktop-application-with-electron-204203eeb658
- 一些比較酷的electron項(xiàng)目https://github.com/sindresorhus/awesome-electron
- YouTube上面一個(gè)一小時(shí)的electron入門(mén)視頻 https://www.youtube.com/watch?v=2RxHQoiDctI&t=18s
- 老外用vue寫(xiě)的一個(gè)markdown，很詳細(xì)火架。 https://blog.sourcerer.io/creating-a-markdown-editor-previewer-in-electron-and-vue-js-32a084e7b8fe
以上這些基本上都比較老鉴象，我比較喜歡vue，所以推薦最新的vuecli3構(gòu)建的electron項(xiàng)目距潘，視頻為https://www.youtube.com/watch?v=Fl7---SEORQ炼列。這個(gè)開(kāi)源的插件地址為https://github.com/nklayman/vue-cli-plugin-electron-builder
,github介紹顯示這個(gè)插件作者才16歲。音比。。
