返回 登录
4

动手实操 | 作为一名美女设计师,她用 6 小时写了个上传七牛云的桌面客户端

在这个项目上,也就是前端的工作居多。
某日,一友人因把文件上传到 Dropbox 而引发众怒。同时,百度网盘也越来越不好用了。我随意吐槽之。
于是乎,就有了这个项目。

某个周六深夜,写小程序已闷死,突然想起答应友人的事情了。

经过初步调查,选用 Electron-vue 作为基础框架开发。在我这个刚学 nodejs,更不懂 electron,也就只是有一定的前后端经验的人,或许这是一个挑战。

设计定稿

作为一个设计师,怎么也要样子好看,所以就以设计稿起步为先。


我把主界面画了出来,确定好 UI 风格了。

VUE 

代码是开始在周日凌晨 1 点多。我选用了 Electron-vue 作为解决方案。

不过,由于 VUE 不熟悉,也碰到了一些坑。

例如:
- 不知道如何引用文件(感觉以前的前端技能被残废了一样)
- 写完 CSS 才发现,A 页面的 CSS 会干扰 B 页面的 CSS(我还以为和小程序、React 那样)
- VUE 的路由我理解了好长时间才明白。

我以前一直写 jQuery,异步和 DOM 管理没什么问题。可是遇到 VUE,我真的觉得脑子的思維要转变了哦。特別是路由,这个明明不就是后端的事情吗?怎么前端模板也有路由概念,我折腾了有 1 小時,才发现原来所谓路由不是跳转 GET/POST 的意思,而是切换显示的页面。怪不得 Google 的时候一直出现的 SPA 这个词,其实我也没理解。直到我刚才专门 Google 才知道了。大哭(其实我以为 SPA 真的是 SPA 嘛~)。

Electron 

这货坑也不少。

例如:
- 复制粘贴在 Build 后完全用不了。
- 一开始抓头在思考怎么做 GET 和 POST……
- 背景模糊玻璃效果,还没能实现,不过在 demo 的确能做到。
- 打包后,竟然找不到 modules……

七牛

官方的 Node.JS SDK 在 npm run dev 能用,但是打包 App 后有一定问题,这个还是要好好调查。

开发

总而言之,在我 App 编写 6 个小时候之后,终于基本可以面世了。以 Electron 的方案来开发 App 的确比传统要舒服和快,而且动画效果写起来不吃力(毕竟强大的 CSS3 动画真厉害),所以我在 App 添加了比较多的动画效果。

Electron 打包的确很大,也无解。经过 ZIP 压缩后有 40 多MB,还算能接受。

界面效果




推荐阅读:
动手实操:如何用七牛云 API 实现相片地图?


报名方式:有更多有趣的作品分享给大家?扫描上方二维码和美女队长接头,即可成为【动手实操】系列玩家。

评论