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

[cctrv]

作為一個設計師，我寫了一個七牛上傳的 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 ，還算能接受。

後續想法

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

界面

動畫效果

留給你們自己體驗看吧。

https://github.com/qoli/QiNA

[xiaoxiuaoliang]

楼主发质很不错啊 用的哪款洗发水

[Kei]

MWeb Toolbar 图标的设计者 O_O

[valor]

直接抢了程序猿的饭碗！😄

[niuer]

您好，请问 SDK 方面的有什么需要帮忙的么？

[cctrv]

@lijy91
我在手機回覆先告訴你。
在打包時候把 asrs 關閉了。
打包好了，在 app 目錄複製包目錄回去就好了。

更正確的辦法我也在找。

[cctrv]

@niuer
Node.js SDK.
在 electron 主線程下運作，

```
//构造上传函数
function uploadFile(uptoken, key, localFile) {
var extra = new qiniu.io.PutExtra();
qiniu.io.putFile(uptoken, key, localFile, extra, function(err, ret) {
if(!err) {
// 上传成功， 处理返回值
console.log(ret.hash, ret.key, ret.persistentId);
} else {
// 上传失败， 处理返回代码
console.log(err);
}
});
}

//调用 uploadFile 上传
uploadFile(token, key, filePath);
```

在執行這段代碼時候， electron 的渲染線程會建立新窗口，並且上傳事情不會繼續。

[kingcos]

收藏……回去学习…

[kingcos]

@kingcos 求教设计😂😂

[fatedier]

这个 UI 风格看起来和七牛官方很相符，👍

[spice630]

适合结对编程~~

[sobigfish]

@niuer #24 七牛官方的，不给 lz 个红包感谢下?
-。-

[lijy91]

@cctrv 我修改了一下 electron-vue 里的 electron-packager 的配置，可以将 node_modules 打包进去，你可以参考一下。

步骤 1 ：修改 app/package.json
将 renderer process 用到的包移到 devDependencies 字段下， main process 用到的移到 dependencies 字段下。

```json
{
"name": "daocloud-plus",
"version": "0.0.1",
"description": "An electron-vue project",
"main": "electron.js",
"dependencies": {
"dotenv": "^4.0.0",
"menubar": "^5.2.0",
"shortid": "^2.2.6"
},
"devDependencies": {
"vue": "^2.0.1",
"vue-electron": "^1.0.0",
"vue-i18n": "^4.10.0",
"vue-resource": "^1.0.3",
"vue-router": "^2.0.0",
"vuex": "^2.0.0",
"vuex-router-sync": "^4.1.0"
},
"author": "JianyingLi <[e-mail]>"
}
```

步骤 2 ：修改 config.js 文件
```javascript
'use strict'

const path = require('path')
// 读取 package.json ，用于获取需要忽略的 module
const appManifest = require('./app/package.json')

let config = {
...
building: {
...
ignore: Object.keys((appManifest.devDependencies || {})).map(function (name) {
return '/node_modules/' + name + '($|/)'
}),
...
}
}

config.building.name = config.name

module.exports = config
```

具体可能参考我的项目：

https://github.com/lijy91/daocloud-plus/tree/develop

[app/package.json]( https://github.com/lijy91/daocloud-plus/tree/develop/app/package.json)
[config.js]( https://github.com/lijy91/daocloud-plus/tree/develop/config.js)

[cctrv]

添加了拖動文件上傳功能哦~

[cctrv]

@lijy91
...
我沒有你那麼折騰地處理這個問題。
我只是更新了這句就好了。

CODE:
ignore: "node_modules/(vue)|index.ejs|icons|^\/src$",

[lijy91]

@cctrv 脚手架作者不把 node_modules 打包进去是合理的，这个文件夹用不到的文件实在是太多了，昨天折腾了一下打包上传到 Mac App Store 也是一堆问题。

[cctrv]

@lijy91
vue-electron 的作者最近幾天又把 node_modules 打包進來了。

[cctrv]

@lijy91
vue 系列的包不用打進來，因為 vue 在打包時候會靜態化處理。
但是，你的腳本不能考慮到依賴包的問題。

所以我直接把 vue 系列的包排除就算了。

再說，這堆東西再怎麼大，也不夠 Electron Framework 這貨大。

[G0D]

看起来很赞，要是能有 Windows 版本就好了

[cctrv]

@G0D 可以把源碼下回來，試試打包 Windows 版本。

[lijy91]

@cctrv 我的配置恰恰就是考虑依赖包的问题，会忽略掉 dependencies 以外的其他库的不打包的，在 main process 用到的库才被打包进去，但是我发现其实 /app/node_modules/.npminstall 还是存在了所有的其他库。