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

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

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

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

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

設計定稿

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

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

代碼編寫

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

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

例如：

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

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

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

Electron 的坑

這貨坑也不少。

例如：

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

七牛的坑

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

開發

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

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

後續想法

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

界面

動畫效果

留給你們自己體驗看吧。

https://github.com/qoli/QiNA

appstore001

2017-02-03 17:42:41 +08:00

真希望有一个平台，把每一个 SDK 或 API 都写一个 DEMO ，每一种语言都写一个，只要那种语言有人需要用这个 SDK ，官方就有义务提供一个这样的平台，我是这样觉的。官方懒不来写或写不了，那就有必要奖励现金或物质给提供该语言的开发者。
这就像是安卓系统一样，总是需要多种语言包的，中文，英文，日文等。假如 GOOGLE 霸道的说，只用一个英文版不就足够了，英文是全球通用语言？可现实中却是相反的，中国政府都规定，想要在中国销售外国产品，必须提供中文标识，中文说明书等。

我前几天在研究一个别人写的易语言的七牛分块上传，一个包 4M ，分多次上传，多个包再合并成一个大文件，一看代码一大片，看晕。还有前几天在玩百度语音识别 RST API ，就是 json 格式上传一个 WAV 录音，然后返回识别出来的文字，也花了一天时间，有时研究一些新东西挺费时间，也挺痛苦的，碰到问题没地方求助，自已胡乱测试，中间走了 N 多的弯路。