云开发实战实战2--云相册应用（代码已上传资源）

实战项目展示

• 需要用户授权登录来获取用户名（暂时没有获取其他信息，如有需要自己在后续denglu页面中进行设置）
  
• 登录成功后进入云相册界面。点击右下角可上传图片（暂时设置为只能同时上传一张），其他用户上传的图片也可显示并带有用户名。点击图片可显示大图，用来保存转发等。
  

项目代码（复制可用，需配置云数据库和云存储）

1.云数据库数据存储格式

2.云存储格式

• 图标资源放页面中的图标数据，大家可以自己更换自己喜欢的图标

• 上传图片为用户上传到云相册的图片
  

3.部分代码展示（整个项目代码已上传至资源）

3-1. 用户登录验证部分页面

{
  "usingComponents": {},
  "enablePullDownRefresh": false  
}

<!--pages/denglu/denglu.wxml-->
<view class="content">
  <text class="title">香猪科技云相册</text>
  <button type="primary" class="btn_denglu" bindtap="denglu">用户登录</button>
</view>

Page({

  onLoad: function (options) {
    this.denglu()
  },

  denglu() {
    let user = wx.getStorageSync('user')
    if (user == "") {
      wx.showModal({
        title: '温馨提示',
        content: '亲，授权微信登录后才能正常使用小程序功能',
        success: res => {
          //如果用户点击了确定按钮
          if (res.confirm) {
            wx.getUserProfile({
              desc: '获取你的昵称、头像、地区及性别',
              success: res => {
                console.log("获取到了用户信息", res)
                let user = res.userInfo
                // 把用户信息缓存到本地
                wx.setStorageSync('user', user)
                wx.redirectTo({
                  url: '/pages/list/list?userinfo=' + res.userInfo.nickName,//注意：页面传输数据时只能单一传输字符串，不能传输对象类型数据
                })
                return res
              },
              fail: err => {
                //拒绝授权
                wx.showToast({
                  title: '您拒绝了请求,不能正常使用小程序',
                  icon: 'error',
                  duration: 2000
                })
                return -1
              }
            });
          } else if (res.cancel) {
            //如果用户点击了取消按钮
            wx.showToast({
              title: '您拒绝了请求,不能正常使用小程序',
              icon: 'error',
              duration: 2000
            })
            return -1
          }
        }
      })
    }else{
      console.log("已存在用户数据")
      wx.reLaunch({
        url: '/pages/list/list?userinfo=' + user.nickName,
      })
    }
  },

})

.title{

  font-size: 80rpx;
  text-align: right;
}
.content{
  text-align: center;
}
.btn_denglu{
  margin-top: 50rpx;
}

3-2.用户上传图片页面

{
  "usingComponents": {},
  "enablePullDownRefresh": false  
}

<!--pages/home/home.wxml-->
<button bindtap='upload'>上传图片</button>
<image src='{{imgUrl}}'></image>

// pages/home/home.js
let username = null
Page({

  /**
   * 页面的初始数据
   */
  onLoad: function (options) {
    username = options.username //接收用户登录页面传输过来的用户名，用来给上传的图片加用户名

  },
  data: {
    imgUrl: ""
  },
  //图片上传
  upload() {
    let timestamp = Date.parse(new Date());
    console.log("当前时间戳", timestamp)
    console.log("点击了图片上传")
    // 让用户选择一张图片
    wx.chooseImage({
      count: 1,
      success: chooseResult => {
        wx.showLoading({
          title: '上传中。。。',
        })
        // 将图片上传至云存储空间
        wx.cloud.uploadFile({
          // 指定上传到的云路径
          cloudPath: "实战资源/云相册/U上传图片/" + timestamp + '.png',
          // 指定要上传的文件的小程序临时文件路径
          filePath: chooseResult.tempFilePaths[0],
          // 成功回调
          success: res => {
            wx.hideLoading()
            console.log('上传成功', res)
            this.setData({
              imgUrl: res.fileID
            })
            this.addImgList(res.fileID)
            wx.showToast({
              title: '图片上传成功',
              duration: 2000
            })
            setTimeout(function () {//等待两秒后，进行页面跳转
              wx.reLaunch({
                url: '/pages/list/list',
              })
            }, 2000);

          },
        })
      },
    })
  },
  //添加到图片列表
  addImgList(imgurl) {
    wx.cloud.database().collection('imagelist').add({
      data: {
        name: username, //这里需要改，改为用户登录
        imgUrl: imgurl,
        time: this.getNowFormatDate()
      },
      success(res) {
        console.log("添加成功", res)
      },
      fail(res) {
        console.log("添加失败", res)
      }
    })
  },
  //获取当前时间,返回时间格式：2019-05-23 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;
  },


})

3-3.云相册数据展示页面

<!-- 列表 -->
<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}}' bindtap="showdatu" data-imgurl="{{item.imgUrl}}"></image>
    <image class='shanchu' bindtap='delete2' data-id="{{item._id}}"  data-imgurl="{{item.imgUrl}}" src="https://7869-xiaoxiangzhu-0g50plnie0fa8913-1307819210.tcb.qcloud.la/%E5%AE%9E%E6%88%98%E8%B5%84%E6%BA%90/%E4%BA%91%E7%9B%B8%E5%86%8C/M%E5%9B%BE%E6%A0%87%E8%B5%84%E6%BA%90/delete.png"></image>
  </view>
</block>
<image bindtap='qufabu' class='fabu' src='https://7869-xiaoxiangzhu-0g50plnie0fa8913-1307819210.tcb.qcloud.la/%E5%AE%9E%E6%88%98%E8%B5%84%E6%BA%90/%E4%BA%91%E7%9B%B8%E5%86%8C/M%E5%9B%BE%E6%A0%87%E8%B5%84%E6%BA%90/fabu.png'></image>

// pages/list/list.js
let username = null
Page({
  data: {
    dataList: [],
    userInfo: ""
  },
  onLoad: function (options) {
    username = options.userinfo
    console.log("用户名为:", username)

  },
  onShow: function () {
    this.getImageList();


  },
  onReady: function () {
    this.getImageList();

  },
  getImageList() {
    wx.cloud.database().collection('imagelist').get({
      success: res => {
        wx.stopPullDownRefresh() //结束刷新动画
        this.setData({
          dataList: res.data
        })
      }
    })
  },

  //用户登录

  //去发布页
  qufabu() {
    wx.navigateTo({
      url: '../home/home?username=' + username,
    })
  },
  //删除图片
  delete2(event) {
    let id = event.currentTarget.dataset.id;
    console.log("点击了删除按钮", id)
    wx.showModal({
      title: '警告！',
      content: '您确定要删除吗？',
      success: res => {
        if (res.confirm) {
          console.log("点击了确定按钮")
          wx.cloud.database()
            .collection('imagelist') //操作那个表
            .doc(id) //对那条数据进行操作
            .remove({ //执行删除操作，但仅仅删除了数据集合中的图片数据，云存储中的图片没有删除
              success: res => {
                console.log("删除成功", res)

                ///在用户删除图片时是否删除云存储中对应图片（不设置就一直保存，有点涉密）
                wx.cloud.deleteFile({
                  fileList: [event.currentTarget.dataset.imgurl],
                  success(res) {
                    console.log(res, '删除文件成功')
                    console.log("删除图片的链接为", event.currentTarget.dataset.imgurl)
                  },
                  fail(err) {
                    console.log("删除文件失败", err)
                  }
                })
                //云存储删除结束

                this.getImageList();
              }
            })
        } else {
          console.log("点击了取消按钮")
        }
      }
    })
  },
  //点击图片时显示大图
  showdatu(event) {
    wx.previewImage({
      urls: [event.currentTarget.dataset.imgurl],
      showmenu: true,//是否显示长按菜单，保存转发啥的
    })
  },

  //下拉刷新，更新页面数据
  //监听用户下拉动作
  onPullDownRefresh: function () {
    console.log('下拉刷新的监听')
    //自带刷新动画
    this.getImageList()//更新前端页面
  }

})

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;
 }
 .fabu{
  width: 40px;
  height: 40px;
  position: fixed;
  bottom: 30px;
  right: 15px;
 }
 .shanchu{
   width: 20px;
   height: 20px;
   position: absolute;
   right: 20px;
 }