小程序开发系列之小程序案例-动手实现专属网盘

网盘大家都不陌生,那么能不能动手写一个呢,在之前这几乎是不可能完成的任务,但是现在互联网工具“轮子”越来越多,动手写一个网盘几乎不是什么难事了。借着小程序这股东风,我们就用小程序来完成一起专属的网盘

一、准备工作

1、小程序帐户,小程序后台需要知道是哪个用户做了上传操作。没有小程序帐户是无法完成今天的任务的;建议后台多绑定几个开发者;

2、重点项,申请一个七牛帐户。所有的内容都保存在七牛上。目前10G是免费的,基本上能满足我们日常的开发,要知道苹果的iCloud才给5G。不知道DIY网盘出来了,会不会对七牛产生影响;

3、到七牛后台获取Access_Key和Secret_Key这个是很关键的一步;

4、生成上传文件需要的uptoken,https://a86.cn/7niu4uptoken.jsp

解释一下,为什么需要uptoken。可以理解为做上传操作的口令一样,这样可以避免一些误操作或一些非法操作。uptoken当然还有其它的生成方式,感兴趣的同学可以自己再研究;

5、创建一个空间,选择公开的空间,选择一个地区;

要注意,选择不同的空间将来访问地址不同,同时把当前空间的下载地址和访问地址配置到微信小程序后台,上传文件域名、下载文件域名;

这里简单举例:选择的华北区,那么空间地址就是 https://up.qbox.me

空间访问地址是:https://XXXXXX.bkt.clouddn.comXX部分根据不同用户则不同

6、下载上传到七牛的工具js包(qiniuUploader.js)http://w.url.cn/s/AKwjtFn可以到这里下载,或到七牛官方下载

注:这里使用了可能是全网最轻便的网络快递手 https://databank.name

准备工作就先到这,罗列一下开发中要用的四部分:空间名(bucketname)、上传凭证(uptoken)、空间访问地址、工具js包


二、开干

1、创建项目,AppID一定要填写。否则无法体验,无法调试;

2、编写页面,这个例子中选择本地的图片然后上传到七牛网络中,这么做主要是考虑很多用户没有自己的服务器,如果有自己的服务器,那么就可以传到自己的服务端,不过在服务器上还是需要一个接收的程序,写到本地的硬盘上。现在使用七牛就可以用最简单的方式完成。只需要简单的配置就可以了。这样可以重点关注小程序部分;

<button bindtap='didPressChooesImage'>上传文件</button>

按钮绑定了一个事件,发起选择图片然后上传。didPressChooesImage 这个函数要写在当前页面对应的JS中。并且要在Page()函数中注册

didPressChooesImage()函数主要实现选择本地的一张照片,然后再调用七牛工具包上传到申请的网络空间中


3、上传完之后。把网络上的图片在本地显示

<image class="image" src="{{imageObject.imageURL}}" mode="aspectFit"></image>这里要说明的是src是来自页面中定义的数据,上传操作之后会自动完成赋值操作。

mode 这里顺道提一下,是图片裁剪、缩放模式一共有13种,4种缩放,9种是裁剪模式。

不同于网上的其它内容,纯粹的讲组件如何的使用,讲的是是很细,但是过后就忘记,希望我们的课程紧扣各种案例,学一个会一个。

4、上传成功之后给出一些提示

实际显示效果

5、项目成品展示,哪个页面需要上传功能就引入七牛的js包

实际效果图如下

6、好了本地完成,打包上传,要不要上线,自己来定好了。希望能在这个基础上再进一步的优化。上传的文件我们来七牛后台查看一下。

好了项目就先说到这里好了。项目整体结构


知识点梳理

1、页面数据动态赋值 imageObject: {};

2、本地相机选择或拍照 wx.chooseImage(OBJECT);

3、交互反馈 wx.showToast(OBJECT);

4、自定义事件绑定。


点击阅读原文,也可以体验网络版的云盘

阅读原文

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 194,911评论 5 460
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 82,014评论 2 371
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 142,129评论 0 320
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,283评论 1 264
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,159评论 4 357
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,161评论 1 272
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,565评论 3 382
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,251评论 0 253
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,531评论 1 292
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,619评论 2 310
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,383评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,255评论 3 313
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,624评论 3 299
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,916评论 0 17
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,199评论 1 250
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,553评论 2 342
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,756评论 2 335

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,085评论 25 707
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,497评论 18 139
  • 让我们一起《二》下去 钱老板: 贤二,你跟我们讲了这么多,有没有更简单易行的法门? 王小五:是啊…… 赵小翠:是啊...
    我们都是贤二阅读 262评论 1 1
  • 高楼耸立,灯火通明,吾披衫夜行,望车水马龙寂寥无人,则心痛不已,平地如青云,然寸步难行,喜...
    焦志欢阅读 246评论 1 2
  • 最佳文章 《花了一元钱,学习如何用60分钟阅读一本书》 作者:罗根莲 简书帐号:爱莲说007 推荐者:陈虹 推荐语...
    陈虹_dd45阅读 177评论 0 1