48.创建个人相册

{
  "_id": "",   //自动生成的ID，也可以自定义，云数据库无法像MySQL一样ID自增，自定义时要注意_id的唯一性
  "_openid": "oUL-m5FuRmuVmxvbYOGuXbuEDsn8",  //用户在当前小程序的openid
  "nickName": "李东bbsky",  //用户的昵称，可以将微信的昵称存储在这个字段
  "avatarUrl": "https://thirdwx.qlogo.cn/mmopen/vi_32/77Vejpiabfr62gPczlm4SicRqQxE1RBCs29NrdPqZZMtRu1uO47VichN1mrguRaNict5urtyyS3mFlkfGicH3bicoibMQ/132", //用户的头像链接，同样可以来自微信的userInfo信息
  "albums": [      //相册，用来存储照片
    {
      "albumName": "风景",  //相册名称
      "coverURL": "",//相册封面地址，可以从相册里随机取一张照片或取第一张照片
      "photos": [    //照片的数组，存储一个相册里N张照片
        {
          "comments": "云开发线下活动合影",//照片的备注或描述
          "fileID": "" //照片的地址，可以是云存储的fileID或https链接
        }
      ]
    }
  ],
  "folders": [   //文件夹，用来存储各种文档
    {
      "folderName": "工作周报",//文件夹名称
      "files": [     //文件的数组，存储文件夹里的N个文件
        {
          "name": "25周工作总结",  //文件名称
          "fileID": "cloud://xly-xrlur.786c-xly-xrlur-1300446086/1571902980622-737.xls", //文件的地址，可以是云存储的fileID或https链接
          "comments": "第25周工作的内容，主要包括小程序的宣传运营"//文件备注、描述
        }
      ]
    }
  ]
}

project
├── cloudfunctions //云函数根目录
│   └── folder //云函数
├── miniprogram //小程序目录
│   └── pages   //存放页面，页面的创建方法可以参考第一部分的教程
│       └── folder
│       └── file
│       └── album
│       └── photo
│       └── user
│   └── images  //存放图片元素
│   └── style   //存放封装好的样式
│   └── utils   //存放封装的模块
│   └── components //存放封装好的组件
│   └── app.js 
│   └── app.json
│   └── app.wxss
└── project.config.json 

{
  "useExtendedLib": {
    "weui": true
  }
}

{
  "usingComponents": {
    "mp-dialog": "/miniprogram_npm/weui-miniprogram/dialog/dialog",
    "mp-toptips": "/miniprogram_npm/weui-miniprogram/toptips/toptips"
  },
  "navigationBarTitleText": "文件夹列表"
}

<mp-toptips msg="组件引入成功，提示5秒后消失" type="error" show="true" delay="5000"></mp-toptips>
<mp-form id="form" rules="{{rules}}" models="{{formData}}">
  <mp-cells title="单选列表项">
    <mp-checkbox-group prop="radio" multi="{{false}}" bindchange="radioChange">
      <mp-checkbox wx:for="{{radioItems}}" wx:key="value" label="{{item.name}}" value="{{item.value}}" checked="{{item.checked}}"></mp-checkbox>
    </mp-checkbox-group>
  </mp-cells>
</mp-form>
<mp-dialog title="WeUI引入成功" show="true" bindbuttontap="" buttons="{{[{text: '确定'}]}}">
  <view>看得到这个界面说明WeUI拓展引入成功</view>
</mp-dialog>

this.checkUser()

const app = getApp()
async checkUser() {
  //获取clouddisk是否有当前用户的数据，注意这里默认带了一个where({_openid:"当前用户的openid"})的条件
  const userData = (await db.collection('clouddisk').where({
    _openid:'{openid}' //一定要开启安全规则，不开安全规则{openid}会失效，没有开启安全规则，数据库查询自带openid的权限，就不需要写这个条件了
  }).get()).data
  console.log("当前用户的数据对象",userData)

  //如果当前用户的数据data数组的长度为0，说明数据库里没有当前用户的数据
  if(userData.length === 0){      
    //没有当前用户的数据，那就新建一个数据框架，其中_id和_openid会自动生成
    await db.collection('clouddisk').add({
      data:{
        //nickName和avatarUrl可以通过getUserInfo来获取，这里不多介绍
        "nickName": "", 
        "avatarUrl": "",
        "albums": [ ],
        "folders": [ ]
      }
    })
    wx.switchTab({   //如果数据库不存在用户，除了在数据库创建一条空记录以外，还跳转到user页面，尽管用户已经登录了，但是还需要借助button的open-type="getUserInfo"来获取用户的信息
      url: '/pages/user/user'
    })
  }else{ //如果有数据，就做两件事情，一是使用setData提供页面渲染数据，二是将数据存储到全局对象
    this.setData({
      userData
    })
    app.globalData.userData = userData
    console.log('用户数据',userData)
  }
},

<button open-type="getUserInfo" bindgetuserinfo="getUserInfo" lang="zh_CN">点击获取用户信息</button>
<image src="{{avatarUrl}}"></image>
<view>{{city}}</view>
<view>{{nickName}}</view>

data: {
  avatarUrl: '',  //可以预填充一个用户未登陆的灰色图片
  nickName:"用户未登陆", //预填充，提醒用户登录
  city:"未知",    //预填充
},

getUserInfo: function (event) {
  console.log('getUserInfo打印的事件对象', event)
  let { avatarUrl, city, nickName}= event.detail.userInfo
  this.setData({
    avatarUrl,city, nickName
  })
},

getUserInfon: function (event) {
  let { avatarUrl, city, nickName}= event.detail.userInfo
  avatarUrl = avatarUrl.split("/")
  avatarUrl[avatarUrl.length - 1] = 0;
  avatarUrl = avatarUrl.join('/'); 
  this.setData({
    avatarUrl,city, nickName
  })
},

wx.getSetting({
  success: res => {
    if (res.authSetting['scope.userInfo']) {
      wx.getUserInfo({
        success: res => {
          let { avatarUrl, city, nickName } =res.userInfo
          this.setData({
            avatarUrl, city, nickName
          })
        }
      })
    }
  }
});

//往getUserInfo里添加调用函数的代码：
getUserInfo: function (event) {
  //可以添加到this.setData()的后面
  this.uploadMsg(avatarUrl,city, nickName)
},

async uploadMsg(avatarUrl,city,nickName){
  const result = await db.collection('clouddisk').where({
    _openid:'{openid}'
  }).update({
    data:{
      avatarUrl,city, nickName
    }
  })
  console.log("更新结果",result)
}

const app = getApp()
Page({
  data: {
    userData:{}
  },

  onLoad: function (options) {
    this.setData({
      userData:app.globalData.userData
    })
    console.log(this.data.userData)
  },

})