其實也就是前端的工作居多。
某日,一友人因把文件上傳到 Dropbox 而引發眾怒。 然而,百度雲也越來越不好用了。
故之,我隨意吐槽之。 某日把七牛做一個右鍵服務而方便之。
於是乎,週六深夜見平日寫小程序已悶死,就想起答應友人的事情了。 選用 electron-vue 作為基礎框架開發。 雖然 nodejs 也就是學了 5 日, ES6 也才接觸 7 日, Electron 更不用提了,第一次用。 VUE 也是第一次用。 之前只有 jQuery 和 angularjs \ CSS3 \ HTML \ PHP \ SQL 這些基礎而已。
作為一個設計師,怎麼也要樣子好看,所以就以設計稿起步為先。
我把主界面畫了出來,確定好 UI 風格了。
代碼是開始在週日凌晨 1 點多。 我選用了 electron-vue 作為解決方案。
不過,由於 VUE 不熟悉,也碰到了一些坑。
例如:
我以前一直寫 jQuery ,異步和 DOM 管理沒什麼問題。可是遇到 VUE ,我真的覺得腦子的思維要轉變了哦。 特別是路由,這個明明不就是後端的事情嗎?怎麼前端模板也有路由概念,我折騰了有 1 小時,才發現原來所謂路由不是跳轉 GET/POST 的意思,而是切換顯示的頁面。
Google 時候一直出現的 SPA 這個詞,其實我也沒理解。直到我剛才專門 Google 才知道了。大哭。
這貨坑也不少。
例如:
七牛這個坑實在太大了。官方的 NODEJS SDK 雖然在 npm run dev 能用,在打包后,會開多個窗口,也上傳不了文件。
總之而言,在我 App 編寫 6 個小時候之後,終於基本可以面世了。以 Electron 的方案來開發 App 的確比傳統要舒服和快,而且動畫效果寫起來不吃力(畢竟強大的 CSS3 動畫真厲害),所以我在 App 添加了比較多的動畫效果。
Electron 打包的確很大,也無解。經過 ZIP 壓縮后有 40 多 MB ,還算能接受。
還有一些想加入來的東西還沒加,例如拖入文件上傳,以及顯示上傳時候的進度和網速。我相信顯示上傳進度應該沒可能了,但是網速我應該去 Google 找找解決方案。 Electron 如果有更多原生插件就好了。
留給你們自己體驗看吧。
https://ok919op2k.qnssl.com/kapture-2017-01-26-at-4-58-mp4(2017-01-26T04:58:22+08:00).mp4
https://github.com/qoli/QiNA/releases/
0.0.3 版本.發佈
1
hzwei 2017-01-24 06:36:18 +08:00 via Android
好赞啊~
|
2
ETiV 2017-01-24 06:49:03 +08:00 via iPhone
css 那个,你给 style 加个 scoped ,就可以隔离样式的作用域了
|
3
ETiV 2017-01-24 06:51:19 +08:00 via iPhone
上传文件,有个 blueimp 的 jquery file upload 可以直接用。能显示进度的~
|
4
jdlau 2017-01-24 08:35:59 +08:00 1
头像好赞啊!
|
5
appppap 2017-01-24 08:36:11 +08:00 via iPhone
这 UI 很赞啊
|
6
starvedcat 2017-01-24 08:40:26 +08:00
taiwan no.1
|
7
neoz 2017-01-24 08:50:40 +08:00 via iPhone
UI 大赞!感谢分享
|
8
designer 2017-01-24 09:06:39 +08:00 via iPhone
支持!
|
9
AlwaysBee 2017-01-24 09:08:01 +08:00
不错,之前也尝试用 Electron ,无奈体积太大了
|
10
viko16 2017-01-24 09:19:12 +08:00 via Android
夭寿啦,设计师要来抢饭碗啦!!(笑
|
11
ninjadq 2017-01-24 09:31:51 +08:00
楼主这么好看,做的什么都棒。不过实事求是的说,设计好赞呀!!!!
|
12
Ellison 2017-01-24 09:32:08 +08:00
虽然很久没刷 G+,但是看到头像就认出来了...
|
13
cheetah 2017-01-24 11:01:34 +08:00
好看
|
14
HCCG 2017-01-24 11:33:00 +08:00
牛逼
|
15
songz 2017-01-24 11:51:08 +08:00
楼主写开发教程吧~
|
16
HLT 2017-01-24 11:51:51 +08:00
so cool
|
17
WittBulter 2017-01-24 11:55:56 +08:00
我也写了一个,自动递归文件夹下所有项目,上传至七牛,也支持阿里 cdn ,命令行的。。。
还没发布,懒得写了。。。 https://github.com/WittBulter/static-deploy 顺便, electron 显示进度条监听上传事件即可,进度条 mac 和 windows 都有默认,调用就行了,上传完了 mac 需要再弹一下下面的 dock 什么的,找不到 module 可能是你 html 的 base 设置错了导致的。 |
18
lijy91 2017-01-24 12:02:35 +08:00
我想问的是你是怎么解决打包找不到 modules 的问题,我最近也正在用 electron-vue 这个脚手架,也是卡在这个问题。
|
19
SuperMild 2017-01-24 12:19:44 +08:00
LZ 微博很多美照啊,出品也棒
|
20
wjswxp 2017-01-24 13:00:22 +08:00
赞一个!
|
21
xiaoxiuaoliang 2017-01-24 14:10:25 +08:00
楼主发质很不错啊 用的哪款洗发水
|
22
Kei 2017-01-24 15:40:42 +08:00
MWeb Toolbar 图标的设计者 O_O
|
23
valor 2017-01-24 16:03:08 +08:00
直接抢了程序猿的饭碗!😄
|
24
niuer 2017-01-24 16:59:32 +08:00
您好,请问 SDK 方面的有什么需要帮忙的么?
|
25
cctrv OP |
26
cctrv OP @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 的渲染線程會建立新窗口,並且上傳事情不會繼續。 |
27
kingcos 2017-01-24 17:45:30 +08:00 via iPhone
收藏……回去学习…
|
29
fatedier 2017-01-24 17:54:44 +08:00
这个 UI 风格看起来和七牛官方很相符,👍
|
30
spice630 2017-01-24 18:11:14 +08:00
适合结对编程~~
|
32
lijy91 2017-01-24 23:35:32 +08:00 1
@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 <[email protected]>" } ``` 步骤 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) |
33
cctrv OP 添加了拖動文件上傳功能哦~
|
34
cctrv OP |
35
lijy91 2017-01-26 10:08:34 +08:00 via iPhone
@cctrv 脚手架作者不把 node_modules 打包进去是合理的,这个文件夹用不到的文件实在是太多了,昨天折腾了一下打包上传到 Mac App Store 也是一堆问题。
|
37
cctrv OP @lijy91
vue 系列的包不用打進來,因為 vue 在打包時候會靜態化處理。 但是,你的腳本不能考慮到依賴包的問題。 所以我直接把 vue 系列的包排除就算了。 再說,這堆東西再怎麼大,也不夠 Electron Framework 這貨大。 |
38
G0D 2017-01-26 11:28:43 +08:00
看起来很赞,要是能有 Windows 版本就好了
|
40
lijy91 2017-01-26 12:48:57 +08:00
@cctrv 我的配置恰恰就是考虑依赖包的问题,会忽略掉 dependencies 以外的其他库的不打包的,在 main process 用到的库才被打包进去,但是我发现其实 /app/node_modules/.npminstall 还是存在了所有的其他库。
|
41
frozenthrone 2017-01-26 13:50:13 +08:00
好 6 的妹子
|
42
goldenlove 2017-01-26 14:37:48 +08:00
前来膜拜妹纸.... 居然繁体系统?港台朋友?
|
44
cctrv OP @lijy91 不過現在 electron-vue 的作者弄壞了架手架。要等一段時間看看他,他更新了目錄結構。
|
46
283810867 2017-01-27 08:38:23 +08:00 via iPhone
赞赞赞赞
|
47
meathill 2017-01-27 15:34:26 +08:00
感谢楼主,我也卡在七牛上传那里,折腾好几天了,这下能过个好年了
|
48
cctrv OP |
49
echopan 2017-01-27 19:12:38 +08:00
我原来见过你啊
|
50
meathill 2017-01-27 23:19:27 +08:00
@cctrv 啊,不好意思,不是你的作品。我做了个静态网站工具,用到七牛和 Electron ,上传文件的时候就会启动新应用,查了很久,看到你的项目才算解决问题。
|
51
dreammes 2017-01-28 14:12:16 +08:00 via iPhone
UI 漂亮
|
52
cctrv OP |
53
cctrv OP |
54
youranus 2017-01-31 16:17:57 +08:00 via iPhone
作为一个美工渣我…
|
55
appstore001 2017-02-03 17:42:41 +08:00
真希望有一个平台,把每一个 SDK 或 API 都写一个 DEMO ,每一种语言都写一个,只要那种语言有人需要用这个 SDK ,官方就有义务提供一个这样的平台,我是这样觉的。官方懒不来写或写不了,那就有必要奖励现金或物质给提供该语言的开发者。
这就像是安卓系统一样,总是需要多种语言包的,中文,英文,日文等。假如 GOOGLE 霸道的说,只用一个英文版不就足够了,英文是全球通用语言?可现实中却是相反的,中国政府都规定,想要在中国销售外国产品,必须提供中文标识,中文说明书等。 我前几天在研究一个别人写的易语言的七牛分块上传,一个包 4M ,分多次上传,多个包再合并成一个大文件,一看代码一大片,看晕。还有前几天在玩百度语音识别 RST API ,就是 json 格式上传一个 WAV 录音,然后返回识别出来的文字,也花了一天时间,有时研究一些新东西挺费时间,也挺痛苦的,碰到问题没地方求助,自已胡乱测试,中间走了 N 多的弯路。 |
56
keelii 2017-02-04 11:44:00 +08:00
很漂亮, electron 就适合做这种小应用~
|
57
cctrv OP 一年了……
終於更新了。 2018 年 09 月 28 日 · 0.0.5 版本 添加 - 顯示上傳進度 修正 - 從 qn 庫轉移為 七牛官方 SDK - 修正 npm run dev 問題 - 符合 eslint - 修正 Mac 圖標陰影(設計稿不見了,所以簡單做了一個) |
58
xbdsky 2018-09-30 10:53:08 +08:00
原来你就是作者啊。哈哈
|