基于云开发的微信小程序-miNi相册（大厅实现）

这节主要介绍大厅的实现。

按图分析，主要分为-信息/图片展示功能、点赞、删除、分享功能。

接下来进行拆分讲解。

 首先是信息/图片展示功能/分享部分：

如图所见，每一条其实是一条单独的个体，每个个体里面有个人信息/照片/功能，确定这个，我们就可以确定布局写法。

用循环的方式，把每一条数据进行填充，数据的获取在后端进行操作。

分享直接使用微信小程序提供的接口即可。

布局wxml代码：

<view wx:for="{{theRecordData.length}}" wx:key="theRecordData[index].Name" wx:index="index" class = 'item-contain' >
<view class='heard'>
  <view class='face'>
    <button 
      open-type="getUserInfo" 
      bindgetuserinfo="onGetUserInfo"
      class="userinfo-avatar"
      style="background-image: url({{theRecordData[index].Head_picture}})"
    ></button>
  </view>

  <view class='right'>
    <view class='title'>

      <view class='name'>
      {{theRecordData[index].Name}}
      </view>

      <view class='time'>
      {{theRecordData[index].Time}}
      </view>

    </view>
  </view>
</view>

<view class='main'  >
  <!--><view wx:for="{{dataList}}" wx:key="item" class="img_list"><-->
    <image wx:for="{{theRecordData[index].Picture_map}}" wx:for-item="url" src='{{url}}' bindtap="previewImage" data-myimg='{{url}}' ></image>
</view>

<view style='width: 100%;height: 70rpx;display: flex;justify-content: center;'>
  <view class='list'>
  <view class='button_one' bindtap='upPickBtn' data-youId="{{theRecordData[index]._id}}" data-youOpenId="{{theRecordData[index]._openid}}" data-nowIndex="{{index}}">
    <view style='height:100%;display: flex;align-items: center;'>
        <image src='/images/up.png' style='width:25rpx;height:25rpx'>
        </image>
    </view>
    <view class='bottom_text'>
    <block wx:if="{{array[index]==0}}">
      <block wx:if="{{theRecordData[index].Vote!=0}}">
      </block>
   {{theRecordData[index].Vote}}人 点赞
    </block>
    <block wx:else>
    {{theRecordData[index].Vote}}人 已赞
    </block>

    </view> 
  </view>
   <block wx:if="{{theRecordData[index]._openid==userid}}"> 
    <view class='button_two' bindtap='removebutton' data-youId="{{theRecordData[index]._id}}" data-youOpenId="{{theRecordData[index]._openid}}" data-nowIndex="{{index}}">
      <view style='height:100%;display: flex;align-items: center;'>
          <image src='/images/delete.png' style='width:25rpx;height:25rpx'>
          </image>
      </view>
        <view class='bottom_text'>
          删除
        </view>
    </view>
  </block>
  <view class='button_three'>
   <view style="flex-direction:row-reverse;display: flex;">
      <button style="display: flex;align-items: center;color:#26ACF5;padding-right: 0rpx;" open-type="share">
      <view style='height:100%;display: flex;align-items: center;'>
      <image src='/images/delete.png' style='width:25rpx;height:25rpx'>
      </image>
      </view>
      <view style="margin-left:20rpx" class = 'bottom_text'>分享</view>
      </button>
</view>
    
  </view>
  </view>
</view>
</view>

<view class='add_button' bindtap='addclick'>
  <image src='/images/add.png' style='width:200rpx;height:200rpx;'>
  </image>
</view>

 JS后面写法：

const db = wx.cloud.database({ env: 'xxxx' })
const _ = db.command
var allId = new Array()
var allUpId = new Array()

两个Array来存储点赞记录的，判断我点赞之后就不给继续点赞。

首先是填充数据，就是在我们进入页面/删除的时候调用的函数。

以下这个是实现填充图片、获取点赞记录功能，我们可以看到，主要填充数据是在theRecordData(对应了上面的wxml)

然后查询My_up表中的点赞记录，存储成Array的格式(这种格式[1，1，1，0，0]，1为已赞，0为未赞)

再利用其进行判断是否已经点赞。看下面这段代码最好先看我数据库的布局。以下：

实现的功能代码：

getImgAndPick: function () {
    var that = this
    var index = 0
    wx.cloud.callFunction({
      name: 'login',
      data: {},
      success: res => {
        console.log(res)
        that.setData({
          userid: res.result.openid
        })

        var userid = that.data.userid;
        db.collection('My_up').where({//获取自己的点赞列表
          myId: userid
        }).get({
          success: res => {
      
            that.setData({
              allyouup: res.data//点赞列表data赋给allyouup
            })
            for (var i = 0; i < res.data.length; i++) {
              allUpId[i] = res.data[i].youId//点赞列表赋给allUpId
            }

            db.collection('Record_picture').get({
              success: res => {
                that.setData({
                  theRecordData: res.data//所有的用户列表数据
                })
                for (var i = 0; i < res.data.length; i++) {
                  allId[i] = res.data[i]._id  //所有的用户列表_id
                  if (allUpId.indexOf(allId[i]) == -1) {
                    var item = 'array[' + i + ']'
                    that.setData({
                      [item]: 0
                    })
                  }
                  else {
                    var item = 'array[' + i + ']'
                    that.setData({
                      [item]: 1
                    })
                  }
                }
                console.log(that.data.array)
              }
            })
          },

        })
      }
    })




  },

到这里是完成了数据展示的部分，接下来就是点赞功能/删除功能。 

做完前面的步骤，接下来就比较简单。

点赞功能，其实就是实现upPickBtn这个函数的功能。

这里需要注意，对数据库CRUD中，新增、查找是可以在Js中完成，更新、删除数据需要在云函数中进行。

而且要十分注意权限的设置，很多时候新建数据库之后没有设置权限，导致无法操作。（血泪）

权限详情：https://developers.weixin.qq.com/miniprogram/dev/wxcloud/guide/database/permission.html

 先看upPickBtn函数代码：

 upPickBtn: function (e) {
    var that = this
    var ind = e.currentTarget.dataset.nowindex
    console.log(e.currentTarget.dataset.youid)
    console.log(e.currentTarget.dataset.youopenid)

    if (this.data.array[ind] == 0)//说明没点赞过
    {
      var nowup = 'array[' + ind + ']'//设置为点赞过
      this.setData({
        [nowup]: 1
      })

      wx.cloud.callFunction({
        name: 'add_up_record',
        data: {
          myid: this.data.userid,
          youid: e.currentTarget.dataset.youid,
          youopenid: e.currentTarget.dataset.youopenid,
        },
        success: function (res) {
        }
      })
      wx.cloud.callFunction({
        name: 'update_record_vote',
        data: {
          youid: e.currentTarget.dataset.youid,
        },
        success: function (res) {
          that.getImgAndPick()
        }
      })

    }
  },

 这里调用了两个云函数add_up_record和update_record_vote（名字可以自己取）

云函数在哪里写呢？就在我们的cloudfunctions目录下（默认名）。

新建后，需要上传并部署才算完成。

add_up_record（新增一条记录）：

// 云函数入口文件
const cloud = require('wx-server-sdk')

cloud.init()

// 云函数入口函数
exports.main = async (event, context) => {
  console.log("updatevote in")
  const db = cloud.database({ env: 'textllinpro-5br77' })
  const _ = db.command
  const myid = event.myid
  const youopenid = event.youopenid
  const youid = event.youid
  return db.collection('My_up').add({
    data: {
      myId: myid,
      youOpenId: youopenid,//同个人
      youId: youid//判断不同条
    },
  }).then(res => {
      console.log("updatevote out")      
      return res;
    });
}

update_record_vote（在字段那里自增1）：

// 云函数入口文件
const cloud = require('wx-server-sdk')

cloud.init()

const db = cloud.database({ env: 'textllinpro-5br77' })
const _ = db.command
// 云函数入口函数
exports.main = async (event, context) => {
  console.log("in test")
  const select_record = event.youid
  return db.collection('Record_picture').doc(select_record).update({
    data: {
      Vote: _.inc(1)
    },
  }).then(res => {
    console.log("out test")
    console.log(res)
  })
}

 云函数调用成功会有返回值，而且云开发目录中-云函数-日志，这里会有调用成功与否的记录。

下面是删除功能：

removebutton: function (e) {
    var that = this
    wx.cloud.callFunction({
      name: 'remove_record_vote',
      data: {
        youid: e.currentTarget.dataset.youid,
      },
      success: function (res) {
        that.getImgAndPick()
      }
    })
  },

 remove_record_vote云函数：

// 云函数入口文件
const cloud = require('wx-server-sdk')

cloud.init()
const db = cloud.database({ env: 'textllinpro-5br77' })
const _ = db.command
// 云函数入口函数
exports.main = async (event, context) => {
  const select_record = event.youid
  return db.collection('Record_picture').doc(select_record).remove({

  }).then(res => {})
}

大大的加号这里设计的是跳转功能。 

这个项目至此已经完成了。

其中还有一些不太友好的地方，例如点赞/登录这些，将在后续的项目中完善。

谢谢大家。