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

--- 本期玩家 ---

 

在这个项目上，也就是前端的工作居多。

某日，一友人因把文件上传到 Dropbox 而引发众怒。同时，百度网盘也越来越不好用了。我随意吐槽之。

于是乎，就有了这个项目。

 

 

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

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

 

设计定稿

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

 

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

 

VUE 

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

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

 

例如：

1. 不知道如何引用文件（感觉以前的前端技能被残废了一样）

2. 写完 CSS 才发现，A 页面的 CSS 会干扰 B 页面的 CSS（我还以为和小程序、React 那样）

3. VUE 的路由我理解了好长时间才明白。

 

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

 

Electron 

这货坑也不少。

例如：

1. 复制粘贴在 Build 后完全用不了。

2. 一开始抓头在思考怎么做 GET 和 POST……

3. 背景模糊玻璃效果，还没能实现，不过在 demo 的确能做到。

4. 打包后，竟然找不到 modules……

 

七牛 

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

开发

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

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

 

界面效果

 

 

动手实操：如何用七牛云 API 实现相片地图？