# 本节知识点 - 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(备注小程序)