小程序案例-动手实现专属网盘

网盘你们都不陌生，那么能不能动手写一个呢，在以前这几乎是不可能完成的任务，可是如今互联网工具“轮子”愈来愈多，动手写一个网盘几乎不是什么难事了。借着小程序这股东风，咱们就用小程序来完成一块儿专属的网盘

1、准备工做
一、小程序账户，小程序后台须要知道是哪一个用户作了上传操做。没有小程序账户是没法完成今天的任务的；建议后台多绑定几个开发者；

二、重点项，申请一个七牛账户。全部的内容都保存在七牛上。目前10G是免费的，基本上能知足咱们平常的开发，要知道苹果的iCloud才给5G。不知道DIY网盘出来了，会不会对七牛产生影响；

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

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

解释一下，为何须要uptoken。能够理解为作上传操做的口令同样，这样能够避免一些误操做或一些非法操做。uptoken固然还有其它的生成方式，感兴趣的同窗能够本身再研究；

五、建立一个空间，选择公开的空间，选择一个地区；

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

这里简单举例：选择的华北区，那么空间地址就是 https://up.qbox.me
空间访问地址是：https://XXXXXX.bkt.clouddn.com XX部分根据不一样用户则不一样

六、下载上传到七牛的工具js包（qiniuUploader.js） http://w.url.cn/s/AKwjtFn 能够到这里下载，或到七牛官方下载

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

准备工做就先到这，罗列一下开发中要用的
空间名（bucketname）、上传凭证（uptoken）、空间访问地址、工具js包

2、开干
一、建立项目，AppID必定要填写。不然没法体验，没法调试；

二、编写页面，这个例子中选择本地的图片而后上传到七牛网络中，这么作主要是考虑不少用户没有本身的服务器，若是有本身的服务器，那么就能够传到本身的服务端，不过在服务器上仍是须要一个接收的程序，写到本地的硬盘上。如今使用七牛就能够用最简单的方式完成。只须要简单的配置就能够了。这样能够重点关注小程序部分；

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

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

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

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

<image class="image" src="{{imageObject.imageURL}}" mode="aspectFit"></image>

这里要说明的是src是来自页面中定义的数据，上传操做以后会自动完成赋值操做。

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

不一样于网上的其它内容，纯粹的讲组件如何的使用，讲的是是很细，可是事后就忘记，但愿咱们的课程紧扣各类案例，学一个会一个。

四、上传成功以后给出一些提示

实际显示效果

五、项目成品展现，哪一个页面须要上传功能就引入七牛的js包

实际效果图以下

六、好了本地完成，打包上传，要不要上线，本身来定好了。但愿能在这个基础上再进一步的优化。上传的文件咱们来七牛后台查看一下。

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

知识点梳理

一、页面数据动态赋值 imageObject: {}；

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

三、交互反馈 wx.showToast(OBJECT)；

四、自定义事件绑定。