动手实操(二) | 作为一名美女设计师,她用 6 小时写了个上传七牛云的桌面客户端
来源:互联网 发布:123d make mac 编辑:程序博客网 时间:2024/06/02 08:52
在这个项目上,也就是前端的工作居多。
某日,一友人因把文件上传到 Dropbox 而引发众怒。同时,百度网盘也越来越不好用了。我随意吐槽之。
于是乎,就有了这个项目。
某个周六深夜,写小程序已闷死,突然想起答应友人的事情了。
经过初步调查,选用 Electron-vue 作为基础框架开发。在我这个刚学 nodejs,更不懂 electron,也就只是有一定的前后端经验的人,或许这是一个挑战。
设计定稿
作为一个设计师,怎么也要样子好看,所以就以设计稿起步为先。
我把主界面画了出来,确定好 UI 风格了。
VUE
代码是开始在周日凌晨 1 点多。我选用了 Electron-vue 作为解决方案。
不过,由于 VUE 不熟悉,也碰到了一些坑。
例如:
- 不知道如何引用文件(感觉以前的前端技能被残废了一样)
- 写完 CSS 才发现,A 页面的 CSS 会干扰 B 页面的 CSS(我还以为和小程序、React 那样)
- VUE 的路由我理解了好长时间才明白。
我以前一直写 jQuery,异步和 DOM 管理没什么问题。可是遇到 VUE,我真的觉得脑子的思維要转变了哦。特別是路由,这个明明不就是后端的事情吗?怎么前端模板也有路由概念,我折腾了有 1 小時,才发现原来所谓路由不是跳转 GET/POST 的意思,而是切换显示的页面。怪不得 Google 的时候一直出现的 SPA 这个词,其实我也没理解。直到我刚才专门 Google 才知道了。大哭(其实我以为 SPA 真的是 SPA 嘛~)。
Electron
这货坑也不少。
例如:
- 复制粘贴在 Build 后完全用不了。
- 一开始抓头在思考怎么做 GET 和 POST……
- 背景模糊玻璃效果,还没能实现,不过在 demo 的确能做到。
- 打包后,竟然找不到 modules……
七牛
官方的 Node.JS SDK 在 npm run dev 能用,但是打包 App 后有一定问题,这个还是要好好调查。
开发
总而言之,在我 App 编写 6 个小时候之后,终于基本可以面世了。以 Electron 的方案来开发 App 的确比传统要舒服和快,而且动画效果写起来不吃力(毕竟强大的 CSS3 动画真厉害),所以我在 App 添加了比较多的动画效果。
Electron 打包的确很大,也无解。经过 ZIP 压缩后有 40 多MB,还算能接受。
界面效果
推荐阅读:
动手实操:如何用七牛云 API 实现相片地图?
报名方式:有更多有趣的作品分享给大家?扫描上方二维码和美女队长接头,即可成为【动手实操】系列玩家。
- 动手实操(二) | 作为一名美女设计师,她用 6 小时写了个上传七牛云的桌面客户端
- 动手实操(一) | 如何用七牛云 API 实现相片地图?
- 作为一名设计师,我是如何在4个月的时间开发出一款app的
- 作为一名工作了很多年的php程序员,我想改为自己写点什么。
- 编译原理动手实操之一个输入系统的实现
- 大概用了4个小时,大概写了54行大概没有用的代码。
- 一名设计师,要具备的知识管理思维(二)
- 中国美女和她的老外老公笑话一箩筐
- 从零开始动手写个公司内部用的iOS App
- 从零开始动手写个公司内部用的iOS App
- 她说她女儿(JAVASCRIPT小时的玩伴,也姓杨)
- 周末学了二个小时的pascal语言!
- 作为设计师的我做了个小 APP,并且有稳定的被动收入
- 动手写自己的第一个"操作系统"
- 动手写简单的嵌入式操作系统二
- 出于学习的目的,写了个桌面右键菜单
- async太好用了,用了两个小时写的代码
- 动手写简单的嵌入式操作系统一
- Visual Studio项目NuGet引用出现感叹号,在线还原失败的尝试解决方法
- git仓库迁移
- VS2015 安装.NET Core
- ThinkPHP中方法中的变量名不要跟方法名一致,否则查询会失败
- Java 中的引用
- 动手实操(二) | 作为一名美女设计师,她用 6 小时写了个上传七牛云的桌面客户端
- 在MyEclipse中更换或修改svn的用户名和密码
- 【R和Python对比】matplotlib和ggplot(一)
- 学习Javascript数据结构与算法系列笔记(二):栈
- 如何写出健壮的Java代码
- Rendering Problems Exception raised during rendering:
- Character Detection and Recognition 1-MSER
- IDHTTP中文乱码问题
- 简单的导航分页效果