小程序案例-動手實現專屬網盤

網盤你們都不陌生，那麼能不能動手寫一個呢，在以前這幾乎是不可能完成的任務，可是如今互聯網工具「輪子」愈來愈多，動手寫一個網盤幾乎不是什麼難事了。藉着小程序這股東風，咱們就用小程序來完成一塊兒專屬的網盤

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)；

四、自定義事件綁定。