最近老师突然给了一个小项目,让写一个照片墙,可以编译成.exe安装到电脑里面,因为我对C#这种桌面端语言完全不懂,也不感兴趣。并且之前听说过electron,所以就借着这个机会尝试一下,学习一下。
效果如下所示:
主要是可以上传图片,删除图片,新建文件夹,删除文件夹,以及图片的拖拽放大等效果。项目地址:https://github.com/FFGF/photo-wall
遇到的坑
一直基本上使用的淘宝镜像cnpm,结果报了一个奇怪的bug,无法进行cnpm run build,网上查阅之后,修改成了npm install, npm run build。就OK了,原因不清楚。
里面的拖拽使用了插件vue-grid-layout,安装的最新版,结果一直报错,开发photo-wall用的vue-electron框架,这个框架很久没更新了,还是用vuecli2构建的,而我用的拖拽插件vue-grid-layout已经使用vuecli3重新构建过了,可能是不匹配,导致bug了,后来把vue-grid-layout版本降低了,才没有了bug。如果再使用vue和electron开发,推荐使用vue-cli-plugin-electron-builder,这个使用vuecli3构建的,我下面写了一个YouTube教程的网址。
还遇到一个奇怪的问题,就是图片会自动旋转,后来查阅资料才知道,iPhone竖着拍摄的照片会有这种问题。因为就一张照片,使用windows自带的画图另存为一下就行了。如果这种图片很多,或者图片未知的建议编写代码完善。iOS手机竖着拍的照片经过前端处理之后被旋转了90°的原因以及解决方案
学习过程
主要是网上找的一些教程资源和开源项目进行参考。列举一下我学习过程中查找的比较好的资料。
- 官方文档,大部分的API都在这,还是中文的。https://electronjs.org/
- PicGo开源图床,文档写的很好 https://molunerfinn.com/electron-vue-1/
- 老外写的,很详细的一个小例子 https://medium.com/developers-writing/building-a-desktop-application-with-electron-204203eeb658
- 一些比较酷的electron项目https://github.com/sindresorhus/awesome-electron
- YouTube上面一个一小时的electron入门视频 https://www.youtube.com/watch?v=2RxHQoiDctI&t=18s
- 老外用vue写的一个markdown,很详细。 https://blog.sourcerer.io/creating-a-markdown-editor-previewer-in-electron-and-vue-js-32a084e7b8fe
以上这些基本上都比较老,我比较喜欢vue,所以推荐最新的vuecli3构建的electron项目,视频为https://www.youtube.com/watch?v=Fl7---SEORQ。这个开源的插件地址为https://github.com/nklayman/vue-cli-plugin-electron-builder
,github介绍显示这个插件作者才16岁。。。