这节主要介绍大厅的实现。
按图分析,主要分为-信息/图片展示功能、点赞、删除、分享功能。
接下来进行拆分讲解。
首先是信息/图片展示功能/分享部分:
如图所见,每一条其实是一条单独的个体,每个个体里面有个人信息/照片/功能,确定这个,我们就可以确定布局写法。
用循环的方式,把每一条数据进行填充,数据的获取在后端进行操作。
分享直接使用微信小程序提供的接口即可。
布局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 => {})
}
大大的加号这里设计的是跳转功能。
这个项目至此已经完成了。
其中还有一些不太友好的地方,例如点赞/登录这些,将在后续的项目中完善。
谢谢大家。