V2EX = way to explore

V2EX 是一个关于分享和探索的地方

已注册用户请登录

爱意满满的作品展示区。

这是一个创建于 3242 天前的主题，其中的信息可能已经有所发展或是发生改变。

作一，我了一七牛上的 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 不熟悉，也碰到了一些坑。

例如：

不知道如何引用文件（感以前的前端技能被了一）
完 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 如果有更多原生插件就好了。

界面

幕快照 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 版本．

上

electron

作

58 条回复 2018-09-30 10:53:08 +08:00

hzwei

2017-01-24 06:36:18 +08:00 via Android

好赞啊~

ETiV

2017-01-24 06:49:03 +08:00 via iPhone

css 那个，你给 style 加个 scoped ，就可以隔离样式的作用域了

ETiV

2017-01-24 06:51:19 +08:00 via iPhone

上传文件，有个 blueimp 的 jquery file upload 可以直接用。能显示进度的～

jdlau

2017-01-24 08:35:59 +08:00

头像好赞啊！

appppap

2017-01-24 08:36:11 +08:00 via iPhone

这 UI 很赞啊

starvedcat

2017-01-24 08:40:26 +08:00

taiwan no.1

neoz

2017-01-24 08:50:40 +08:00 via iPhone

UI 大赞！感谢分享

designer

2017-01-24 09:06:39 +08:00 via iPhone

支持！

AlwaysBee

2017-01-24 09:08:01 +08:00

不错，之前也尝试用 Electron ，无奈体积太大了

viko16

2017-01-24 09:19:12 +08:00 via Android

夭寿啦，设计师要来抢饭碗啦！！(笑

ninjadq

2017-01-24 09:31:51 +08:00

楼主这么好看，做的什么都棒。不过实事求是的说，设计好赞呀！！！！

Ellison

2017-01-24 09:32:08 +08:00

虽然很久没刷 G+,但是看到头像就认出来了...

cheetah

2017-01-24 11:01:34 +08:00

好看

HCCG

2017-01-24 11:33:00 +08:00

牛逼

songz

2017-01-24 11:51:08 +08:00

楼主写开发教程吧~

HLT

2017-01-24 11:51:51 +08:00

so cool

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

2017-01-24 12:02:35 +08:00

我想问的是你是怎么解决打包找不到 modules 的问题，我最近也正在用 electron-vue 这个脚手架，也是卡在这个问题。

SuperMild

2017-01-24 12:19:44 +08:00

LZ 微博很多美照啊，出品也棒

wjswxp

2017-01-24 13:00:22 +08:00

赞一个！

xiaoxiuaoliang

2017-01-24 14:10:25 +08:00

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

Kei

2017-01-24 15:40:42 +08:00

MWeb Toolbar 图标的设计者 O_O

valor

2017-01-24 16:03:08 +08:00

直接抢了程序猿的饭碗！

niuer

2017-01-24 16:59:32 +08:00

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

cctrv

2017-01-24 17:18:18 +08:00 via iPhone

@lijy91
我在手回覆先告你。
在打包候把 asrs 了。
打包好了，在 app 目包目回去就好了。

更正的法我也在找。

cctrv

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 的渲染程建立新窗口，且上事情不。

/table>

kingcos

2017-01-24 17:45:30 +08:00 via iPhone

收藏……回去学习…

kingcos

2017-01-24 17:46:01 +08:00 via iPhone

@kingcos 求教设计

fatedier

2017-01-24 17:54:44 +08:00

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

spice630

2017-01-24 18:11:14 +08:00

适合结对编程~~

run2

2017-01-24 23:12:25 +08:00

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

lijy91

2017-01-24 23:35:32 +08:00

@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

2017-01-26 05:14:48 +08:00

添加了拖文件上功能哦~

cctrv

2017-01-26 07:46:34 +08:00

@lijy91
...
我有你那折地理。
我只是更新了句就好了。

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

lijy91

2017-01-26 10:08:34 +08:00 via iPhone

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

cctrv

2017-01-26 10:44:14 +08:00

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

cctrv

2017-01-26 10:48:46 +08:00

@lijy91
vue 系列的包不用打，因 vue 在打包候化理。
但是，你的本不能考到依包的。

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

再，堆西再怎大，也不 Electron Framework 大。

G0D

2017-01-26 11:28:43 +08:00

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

cctrv

2017-01-26 11:47:54 +08:00 via iPhone

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

lijy91

2017-01-26 12:48:57 +08:00

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

frozenthrone

2017-01-26 13:50:13 +08:00

好 6 的妹子

goldenlove

2017-01-26 14:37:48 +08:00

前来膜拜妹纸.... 居然繁体系统？港台朋友？

cctrv

2017-01-26 17:21:11 +08:00 via iPhone

@lijy91 反正用我那段就了。直接又方便。
能 asra 。

cctrv

2017-01-26 17:24:18 +08:00 via iPhone

@lijy91 不在 electron-vue 的作者弄了架手架。要等一段看看他，他更新了目。

lijy91

2017-01-26 23:59:44 +08:00 via iPhone

@cctrv 我也看到了 dev 分支的新目录结构

283810867

2017-01-27 08:38:23 +08:00 via iPhone

赞赞赞赞

meathill

2017-01-27 15:34:26 +08:00

感谢楼主，我也卡在七牛上传那里，折腾好几天了，这下能过个好年了

cctrv

2017-01-27 19:02:49 +08:00 via iPhone

@meathill

不是用把 CDN 用的喔，是用分享文件的。

你 CDN 的最好用七牛那 shell 同步工具配置一下。
接著在 nginx 配置一下就可以了。

echopan

2017-01-27 19:12:38 +08:00

我原来见过你啊

meathill

2017-01-27 23:19:27 +08:00

@cctrv 啊，不好意思，不是你的作品。我做了个静态网站工具，用到七牛和 Electron ，上传文件的时候就会启动新应用，查了很久，看到你的项目才算解决问题。

dreammes

2017-01-28 14:12:16 +08:00 via iPhone

UI 漂亮

cctrv

2017-01-28 18:47:25 +08:00 via iPhone

@meathill
哈哈哈。哪都 Log 的就很快排查到原因了。
不七牛 bug 我也得很坑人，我一始也以是 electron 的 bug 。

cctrv

2017-01-30 05:07:28 +08:00 via iPhone

@WittBulter 你的方案可能法完成。
七牛上我是用了人的。

不是要等我完回北京才知道。

youranus

2017-01-31 16:17:57 +08:00 via iPhone

作为一个美工渣我…

appstore001

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

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

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

keelii

2017-02-04 11:44:00 +08:00

很漂亮， electron 就适合做这种小应用~

cctrv

2018-09-28 19:55:22 +08:00

一年了……
於更新了。

2018 年 09 月 28 日 0.0.5 版本

添加

- 示上度

修正

- qn 移七牛官方 SDK
- 修正 npm run dev
- 符合 eslint
- 修正 Mac 影（稿不了，所以做了一）

xbdsky

2018-09-30 10:53:08 +08:00

原来你就是作者啊。哈哈