作為一個設計師,我寫了一個七牛上傳的 App

其實也就是前端的工作居多。

某日,一友人因把文件上傳到 Dropbox 而引發眾怒。
然而,百度雲也越來越不好用了。

故之,我隨意吐槽之。
某日把七牛做一個右鍵服務而方便之。

DATE-2017-1-24-5-51

於是乎,週六深夜見平日寫小程序已悶死,就想起答應友人的事情了。
選用 electron-vue 作為基礎框架開發。
雖然 nodejs 也就是學了 5 日,ES6 也才接觸 7 日,Electron 更不用提了,第一次用。VUE 也是第一次用。
之前只有 jQuery 和 angularjs \ CSS3 \ HTML \ PHP \ SQL 這些基礎而已。

設計定稿

作為一個設計師,怎麼也要樣子好看,所以就以設計稿起步為先。

DATE-2017-1-24

我把主界面畫了出來,確定好 UI 風格了。

代碼編寫

代碼是開始在週日凌晨 1 點多。
我選用了 electron-vue 作為解決方案。

不過,由於 VUE 不熟悉,也碰到了一些坑。

例如:
1. 不知道如何引用文件(感覺以前的前端技能被殘廢了一樣)
2. 寫完 CSS 才發現,A 頁面的 CSS 會干擾 B 頁面的 CSS(我還以為和小程序、React那樣)
3. VUE 的路由我理解了好長時間才明白。

我以前一直寫 jQuery,異步和 DOM 管理沒什麼問題。可是遇到 VUE,我真的覺得腦子的思維要轉變了哦。
特別是路由,這個明明不就是後端的事情嗎?怎麼前端模板也有路由概念,我折騰了有 1 小時,才發現原來所謂路由不是跳轉 GET/POST 的意思,而是切換顯示的頁面。

Google 時候一直出現的 SPA 這個詞,其實我也沒理解。直到我剛才專門 Google 才知道了。大哭。

Electron 的坑

這貨坑也不少。

例如:
1. 複製粘貼在 Build 后完全用不了。
2. 一開始抓頭在思考怎麼做 GET 和 POST……
3. 背景模糊玻璃效果,還沒能實現,不過在 demo 的確能做到。
4. 打包后,竟然找不到 modules……

七牛的坑

七牛這個坑實在太大了。官方的 NODEJS SDK 雖然在 npm run dev 能用,在打包后,會開多個窗口,也上傳不了文件。

開發

總之而言,在我 App 編寫 6 個小時候之後,終於基本可以面世了。以 Electron 的方案來開發 App 的確比傳統要舒服和快,而且動畫效果寫起來不吃力(畢竟強大的 CSS3 動畫真厲害),所以我在 App 添加了比較多的動畫效果。

Electron 打包的確很大,也無解。經過 ZIP 壓縮后有 40 多MB,還算能接受。

後續想法

還有一些想加入來的東西還沒加,例如拖入文件上傳,以及顯示上傳時候的進度和網速。我相信顯示上傳進度應該沒可能了,但是網速我應該去 Google 找找解決方案。Electron 如果有更多原生插件就好了。

界面

螢幕快照 2017-01-24 上午5.54.22

DATE

動畫效果

就留給你們下載試試看吧。

發佈版下載

https://github.com/qoli/QiNA/releases/

更新日誌

2017年01月26日
添加
  • 文件拖放上傳加入。
修正
  • 因代碼錯誤而無法點擊的中央大圓圈。
  • 分離部分 css。
2017年01月26日.之前

0.0.3 版本.發佈