# 本節知識點
- 1，創建一個項目并進行云開發的初始化
- 2，用云開發實現圖片的上傳
- 3，云存儲能力的了解
- 4，用云開發顯示網絡圖片
- 5，云相冊的刪除功能
- 6，獲取用戶昵稱和頭像
# 本章效果圖
# 課后作業
- 1 ，自己進行云開發項目的初始化
- 2 ，實現圖片上傳與展示的功能
# 課程中用到的網址
- 1，微信官方： https://mp.weixin.qq.com/
- 2，在線視頻講解：[https://edu.csdn.net/course/detail/9604](https://edu.csdn.net/course/detail/9604)
- 3，云開發官方文檔：[https://developers.weixin.qq.com/miniprogram/dev/wxcloud/basis/getting-started.html](https://developers.weixin.qq.com/miniprogram/dev/wxcloud/basis/getting-started.html)
- 4,小程序列表渲染文檔：[https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/list.html?search-key=%3Cblock](https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/list.html?search-key=%3Cblock)
# 本節資源
在線視頻：[https://edu.csdn.net/course/detail/9604](https://edu.csdn.net/course/detail/9604)
源碼下載：https://pan.baidu.com/s/1T3c8FUaNm5n9wierVd1QyQ
圖標資源：在上面源碼鏈接里
# 代碼資源
背景顏色色值：#2db7f5
卡片布局
```
<!-- 列表 -->
<block wx:for="{{dataList}}" wx:key="item">
<view class='item-container'>
<text class='item-name'>上傳人：{{item.name}}</text>
<text class='item-name'>上傳時間：{{item.time}}</text>
<image class='img' src='{{item.imgUrl}}'></image>
</view>
</block>
```
卡片列表樣式
```
page {
background: #2db7f5;
}
/* 卡片 */
.item-container {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
transition: 0.3s;
width: 92%;
margin: 4%;
display: flex;
flex-direction: column;
background: white;
padding-top: 5pt;
padding-bottom: 5pt;
border-radius: 5px;
}
/* 上傳人 */
.item-name {
font-size: 12px;
margin-left: 15px;
}
/* 圖片 */
.img {
width: 100px;
height: 100px;
margin-top: 10px;
margin-left: 20px;
}
```
獲取當前時間的方法
```
//獲取當前時間,返回時間格式：2018-09-16 15:43:36
getNowFormatDate: function() {
var date = new Date();
var seperator1 = "-";
var seperator2 = ":";
var month = date.getMonth() + 1;
var strDate = date.getDate();
if (month >= 1 && month <= 9) {
month = "0" + month;
}
if (strDate >= 0 && strDate <= 9) {
strDate = "0" + strDate;
}
var currentdate = date.getFullYear() + seperator1 + month + seperator1 + strDate +
" " + date.getHours() + seperator2 + date.getMinutes() +
seperator2 + date.getSeconds();
return currentdate;
},
```
# 零基礎入門小程序開發
如果你還不知道怎么注冊小程序，怎么使用小程序開發者工具，怎么獲取到自己的appid，怎么上線自己的小程序，請移步到老師的另外一門課程《零基礎10天實戰入門小程序開發》
筆記：[零基礎10天實戰入門小程序開發筆記](http://www.hmoore.net/java-qiushi/xiaochengxu)
**視頻：** [零基礎10天實戰入門小程序開發筆記視頻](https://edu.csdn.net/course/play/9531)
最好跟著老師的教程敲代碼，如果實在敲不出來，加老師微信索要源碼
# 老師微信
2501902696（備注小程序）
