V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
cctrv
V2EX  ›  分享创造

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

  •  5
     
  •   cctrv · 2017-01-24 06:16:52 +08:00 · 8045 次点击
    这是一个创建于 2842 天前的主题,其中的信息可能已经有所发展或是发生改变。

    作為一個設計師,我寫了一個七牛上傳的 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

    第 1 条附言  ·  2017-01-26 05:14:27 +08:00

    視頻預覽地址:

    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/

    更新日誌

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

    0.0.3 版本.發佈

    58 条回复    2018-09-30 10:53:08 +08:00
    hzwei
        1
    hzwei  
       2017-01-24 06:36:18 +08:00 via Android
    好赞啊~
    ETiV
        2
    ETiV  
       2017-01-24 06:49:03 +08:00 via iPhone
    css 那个,你给 style 加个 scoped ,就可以隔离样式的作用域了
    ETiV
        3
    ETiV  
       2017-01-24 06:51:19 +08:00 via iPhone
    上传文件,有个 blueimp 的 jquery file upload 可以直接用。能显示进度的~
    jdlau
        4
    jdlau  
       2017-01-24 08:35:59 +08:00   ❤️ 1
    头像好赞啊!
    appppap
        5
    appppap  
       2017-01-24 08:36:11 +08:00 via iPhone
    这 UI 很赞啊
    starvedcat
        6
    starvedcat  
       2017-01-24 08:40:26 +08:00
    taiwan no.1
    neoz
        7
    neoz  
       2017-01-24 08:50:40 +08:00 via iPhone
    UI 大赞!感谢分享
    designer
        8
    designer  
       2017-01-24 09:06:39 +08:00 via iPhone
    支持!
    AlwaysBee
        9
    AlwaysBee  
       2017-01-24 09:08:01 +08:00
    不错,之前也尝试用 Electron ,无奈体积太大了
    viko16
        10
    viko16  
       2017-01-24 09:19:12 +08:00 via Android
    夭寿啦,设计师要来抢饭碗啦!!(笑
    ninjadq
        11
    ninjadq  
       2017-01-24 09:31:51 +08:00
    楼主这么好看,做的什么都棒。不过实事求是的说,设计好赞呀!!!!
    Ellison
        12
    Ellison  
       2017-01-24 09:32:08 +08:00
    虽然很久没刷 G+,但是看到头像就认出来了...
    cheetah
        13
    cheetah  
       2017-01-24 11:01:34 +08:00
    好看
    HCCG
        14
    HCCG  
       2017-01-24 11:33:00 +08:00
    牛逼
    songz
        15
    songz  
       2017-01-24 11:51:08 +08:00
    楼主写开发教程吧~
    HLT
        16
    HLT  
       2017-01-24 11:51:51 +08:00
    so cool
    WittBulter
        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 设置错了导致的。
    lijy91
        18
    lijy91  
       2017-01-24 12:02:35 +08:00
    我想问的是你是怎么解决打包找不到 modules 的问题,我最近也正在用 electron-vue 这个脚手架,也是卡在这个问题。
    SuperMild
        19
    SuperMild  
       2017-01-24 12:19:44 +08:00
    LZ 微博很多美照啊,出品也棒
    wjswxp
        20
    wjswxp  
       2017-01-24 13:00:22 +08:00
    赞一个!
    xiaoxiuaoliang
        21
    xiaoxiuaoliang  
       2017-01-24 14:10:25 +08:00
    楼主发质很不错啊 用的哪款洗发水
    Kei
        22
    Kei  
       2017-01-24 15:40:42 +08:00
    MWeb Toolbar 图标的设计者 O_O
    valor
        23
    valor  
       2017-01-24 16:03:08 +08:00
    直接抢了程序猿的饭碗!😄
    niuer
        24
    niuer  
       2017-01-24 16:59:32 +08:00
    您好,请问 SDK 方面的有什么需要帮忙的么?
    cctrv
        25
    cctrv  
    OP
       2017-01-24 17:18:18 +08:00 via iPhone
    @lijy91
    我在手機回覆先告訴你。
    在打包時候把 asrs 關閉了。
    打包好了,在 app 目錄複製包目錄回去就好了。

    更正確的辦法我也在找。
    cctrv
        26
    cctrv  
    OP
       2017-01-24 17:29:22 +08:00
    @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
        27
    kingcos  
       2017-01-24 17:45:30 +08:00 via iPhone
    收藏……回去学习…
    kingcos
        28
    kingcos  
       2017-01-24 17:46:01 +08:00 via iPhone
    @kingcos 求教设计😂😂
    fatedier
        29
    fatedier  
       2017-01-24 17:54:44 +08:00
    这个 UI 风格看起来和七牛官方很相符,👍
    spice630
        30
    spice630  
       2017-01-24 18:11:14 +08:00
    适合结对编程~~
    sobigfish
        31
    sobigfish  
       2017-01-24 23:12:25 +08:00
    @niuer #24 七牛官方的,不给 lz 个红包感谢下?
    -。-
    lijy91
        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)
    cctrv
        33
    cctrv  
    OP
       2017-01-26 05:14:48 +08:00
    添加了拖動文件上傳功能哦~
    cctrv
        34
    cctrv  
    OP
       2017-01-26 07:46:34 +08:00
    @lijy91
    ...
    我沒有你那麼折騰地處理這個問題。
    我只是更新了這句就好了。

    CODE:
    ignore: "node_modules/(vue)|index.ejs|icons|^\/src$",
    lijy91
        35
    lijy91  
       2017-01-26 10:08:34 +08:00 via iPhone
    @cctrv 脚手架作者不把 node_modules 打包进去是合理的,这个文件夹用不到的文件实在是太多了,昨天折腾了一下打包上传到 Mac App Store 也是一堆问题。
    cctrv
        36
    cctrv  
    OP
       2017-01-26 10:44:14 +08:00
    @lijy91
    vue-electron 的作者最近幾天又把 node_modules 打包進來了。
    cctrv
        37
    cctrv  
    OP
       2017-01-26 10:48:46 +08:00
    @lijy91
    vue 系列的包不用打進來,因為 vue 在打包時候會靜態化處理。
    但是,你的腳本不能考慮到依賴包的問題。

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

    再說,這堆東西再怎麼大,也不夠 Electron Framework 這貨大。
    G0D
        38
    G0D  
       2017-01-26 11:28:43 +08:00
    看起来很赞,要是能有 Windows 版本就好了
    cctrv
        39
    cctrv  
    OP
       2017-01-26 11:47:54 +08:00 via iPhone
    @G0D 可以把源碼下回來,試試打包 Windows 版本。
    lijy91
        40
    lijy91  
       2017-01-26 12:48:57 +08:00
    @cctrv 我的配置恰恰就是考虑依赖包的问题,会忽略掉 dependencies 以外的其他库的不打包的,在 main process 用到的库才被打包进去,但是我发现其实 /app/node_modules/.npminstall 还是存在了所有的其他库。
    frozenthrone
        41
    frozenthrone  
       2017-01-26 13:50:13 +08:00
    好 6 的妹子
    goldenlove
        42
    goldenlove  
       2017-01-26 14:37:48 +08:00
    前来膜拜妹纸.... 居然繁体系统?港台朋友?
    cctrv
        43
    cctrv  
    OP
       2017-01-26 17:21:11 +08:00 via iPhone
    @lijy91 反正用我那段就對了。簡單直接又方便。
    還能開 asra 。
    cctrv
        44
    cctrv  
    OP
       2017-01-26 17:24:18 +08:00 via iPhone
    @lijy91 不過現在 electron-vue 的作者弄壞了架手架。要等一段時間看看他,他更新了目錄結構。
    lijy91
        45
    lijy91  
       2017-01-26 23:59:44 +08:00 via iPhone
    @cctrv 我也看到了 dev 分支的新目录结构
    283810867
        46
    283810867  
       2017-01-27 08:38:23 +08:00 via iPhone
    赞赞赞赞
    meathill
        47
    meathill  
       2017-01-27 15:34:26 +08:00
    感谢楼主,我也卡在七牛上传那里,折腾好几天了,这下能过个好年了
    cctrv
        48
    cctrv  
    OP
       2017-01-27 19:02:49 +08:00 via iPhone   ❤️ 1
    @meathill

    這個不是用來把 CDN 用的喔,這個是用來分享單個文件的。

    你 CDN 的話最好用 七牛 那個 shell 同步工具配置一下。
    接著在 nginx 配置一下就可以了。
    echopan
        49
    echopan  
       2017-01-27 19:12:38 +08:00
    我原来见过你啊
    meathill
        50
    meathill  
       2017-01-27 23:19:27 +08:00
    @cctrv 啊,不好意思,不是你的作品。我做了个静态网站工具,用到七牛和 Electron ,上传文件的时候就会启动新应用,查了很久,看到你的项目才算解决问题。
    dreammes
        51
    dreammes  
       2017-01-28 14:12:16 +08:00 via iPhone
    UI 漂亮
    cctrv
        52
    cctrv  
    OP
       2017-01-28 18:47:25 +08:00 via iPhone
    @meathill
    哈哈哈。學會哪裡都寫 Log 的習慣就很快排查到原因了。
    不過七牛這個 bug 我也覺得很坑人,我一開始也以為是 electron 的 bug 。
    cctrv
        53
    cctrv  
    OP
       2017-01-30 05:07:28 +08:00 via iPhone
    @WittBulter 你說的方案可能無法完成。
    七牛上傳我是調用了別人的庫。

    不過還是要等我過完節回北京試試才知道。
    youranus
        54
    youranus  
       2017-01-31 16:17:57 +08:00 via iPhone
    作为一个美工渣我…
    appstore001
        55
    appstore001  
       2017-02-03 17:42:41 +08:00
    真希望有一个平台,把每一个 SDK 或 API 都写一个 DEMO ,每一种语言都写一个,只要那种语言有人需要用这个 SDK ,官方就有义务提供一个这样的平台,我是这样觉的。官方懒不来写或写不了,那就有必要奖励现金或物质给提供该语言的开发者。
    这就像是安卓系统一样,总是需要多种语言包的,中文,英文,日文等。假如 GOOGLE 霸道的说,只用一个英文版不就足够了,英文是全球通用语言?可现实中却是相反的,中国政府都规定,想要在中国销售外国产品,必须提供中文标识,中文说明书等。

    我前几天在研究一个别人写的易语言的七牛分块上传,一个包 4M ,分多次上传,多个包再合并成一个大文件,一看代码一大片,看晕。还有前几天在玩百度语音识别 RST API ,就是 json 格式上传一个 WAV 录音,然后返回识别出来的文字,也花了一天时间,有时研究一些新东西挺费时间,也挺痛苦的,碰到问题没地方求助,自已胡乱测试,中间走了 N 多的弯路。
    keelii
        56
    keelii  
       2017-02-04 11:44:00 +08:00
    很漂亮, electron 就适合做这种小应用~
    cctrv
        57
    cctrv  
    OP
       2018-09-28 19:55:22 +08:00
    一年了……
    終於更新了。

    2018 年 09 月 28 日 · 0.0.5 版本

    添加

    - 顯示上傳進度

    修正

    - 從 qn 庫轉移為 七牛官方 SDK
    - 修正 npm run dev 問題
    - 符合 eslint
    - 修正 Mac 圖標陰影(設計稿不見了,所以簡單做了一個)
    xbdsky
        58
    xbdsky  
       2018-09-30 10:53:08 +08:00
    原来你就是作者啊。哈哈
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1963 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 27ms · UTC 16:19 · PVG 00:19 · LAX 08:19 · JFK 11:19
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.