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

庫倪庫倪

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


某日,一友人因把文件上傳到 Dropbox 而引發眾怒。

然而,百度雲也越來越不好用了。


故之,我隨意吐槽之。

某日把七牛做一個右鍵服務而方便之。

於是乎,週六深夜見平日寫小程序已悶死,就想起答應友人的事情了。

選用 electron-vue 作為基礎框架開發。

雖然 nodejs 也就是學了 5 日,ES6 也才接觸 7 日,Electron 更不用提了,第一次用。VUE 也是第一次用。


之前只有 jQuery 和 angularjs \ CSS3 \ HTML \ PHP \ SQL 這些基礎而已。

設計定稿

作為一個設計師,怎麼也要樣子好看,所以就以設計稿起步為先。我把主界面畫了出來,確定好 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,還算能接受。


界面


動畫效果

youtu.be/Pc-vmGwy8gQ

發佈版下載

qoli/QiNA
文章被以下专栏收录
14 条评论
推荐阅读