# 本节知识点
- 1,创建一个项目并进行云开发的初始化
- 2,用云开发实现图片的上传
- 3,云存储能力的了解
- 4,用云开发显示网络图片
- 5,云相册的删除功能
- 6,获取用户昵称和头像
# 本章效果图
![](https://box.kancloud.cn/060c139c47faa61f42ab6b0c177df450_534x934.png =150x)
# 课后作业
- 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天实战入门小程序开发笔记](https://www.kancloud.cn/java-qiushi/xiaochengxu)
**视频:** [零基础10天实战入门小程序开发笔记视频](https://edu.csdn.net/course/play/9531)
最好跟着老师的教程敲代码,如果实在敲不出来,加老师微信索要源码
# 老师微信
2501902696(备注小程序)