《微信小程序开发从入门到实战》学习五十

发布时间:2023年12月17日

4.5 实现投票小程序服务端功能

4.5.2?完成获取投票信息功能

在getVoteStatus的云函数目录下的index.js补充上篇文章的三个函数,代码如下:

function?checkAlreadyVoted(voteList,?openid){

???//?检查用户是否已经参与过投票了

??let?alreadyVoted?=?false?//?默认用户没有参与投票

??voteList.map(voteItem?=>?{?//?遍历所有的用户投票,将数组中的每个元素执行一次下面的代码

????if(voteItem.openid?==?openid){?//?如果某个投票记录的openid与用户openid相同

??????alreadyVoted?=?true?//?那么用户显然参与了本次投票

????}

??})

??return?alreadyVoted

}

function?getTotalVoteCount(voteList){

??//?计算得到所有选项投票的总数量

??let?totalVoteCount?=?0?//初始数量为0

??voteList.map(voteItem?=>?{?//遍历所有用户投票

????totalVoteCount?+=?voteItem.pickedOption.length?//将总数加上每一次的投票的数量

??})

??return?totalVoteCount

}

function?getOptionStatus(voteList,?openid,?optionLength){

???//?计算得到每个选项的投票数量,以及用户是否选择了该选项

???let?optionStatus?=?new?Array(optionLength)?//?新建一个与选项长度一样的数组

???for(let?i?=?0;?i?<?optionStatus.length;?i++)?{

?????optionStatus[i]?=?{?//?初始化数组中的每个元素

???????count:?0,?//?默认每个选项的投票数量为0

???????vote:?false?//?默认用户没有投这个选项

?????}

???}

???voteList.map(voteItem?=>?{??//?遍历所有的用户投票

?????const?userVoteThis?=?(voteItem.openid?==?openid)??//?如果openid一致,那么这个投票时该用户投的,反之则不是

?????voteItem.pickedOption.map(pickedIndex?=>?{??//?遍历这个投票的选项

??????optionStatus[pickedIndex].count++?//?对应选项的数量加1

??????if?(userVoteThis)?{??//?只有当这个投票是该用户投时,更新vote属性

????????optionStatus[pickedIndex].vote?=?true

??????}

?????})

???})

???return?optionStatus

}

4.5.3?完成用户投票功能

用户投票时需要修改vote集合中的投票记录,但是这条记录时属于投票的创建者的,其他用户没有权限修改该数据。但在云函数使用服务端的数据库API不受数据库权限设置的限制,因此使用云函数实现投票功能,从而绕开小程序端API的权限限制。

新建云函数vote,在vote文件夹下的index.js文件中实现投票的功能,代码如下:

//?云函数入口文件

const?cloud?=?require('wx-server-sdk')

cloud.init({?env:?cloud.DYNAMIC_CURRENT_ENV?})?//?使用当前云环境

const?db?=?cloud.database()

//?云函数入口函数

exports.main?=?async?(event,?context)?=>?{

??const?wxContext?=?cloud.getWXContext()

??const?openid?=?wxContext.OPENID?//?获取用户的openid

??//?从postData中获取3个属性的值

??const?{?voteID,?pickedOption,?userInfo?}?=?event.postData

??//?将openid,pickedOption和,userInfo保存到voteItem对象中(匿名投票没有userInfo

??const?voteItem?=?userInfo????{

????openid,

????pickedOption,

????userInfo

??}?:?{

????openid,

????pickedOption,

??}

??//?在votes集合中,对该投票的voteList字段插入一条数据

??return?await?db.collection('votes').doc(voteID).update({

????voteList:?db.command.push(voteItem)

??})

}

------

上传云函数vote。

在小程序端的pages/vote/vote.js,onTapVlue函数实现调用云函数的逻辑,代码如下:

??onTapVote(){

????if(this.data.isAnonymous)?{//匿名投票的情况

??????const?postData?=?{//需要提交的数据

????????voteID:?this.data.voteID,

????????pickedOption:?this.data.pickedOption

??????}

??????//?将postData数据上传到服务器端

??????wx.cloud.callFunction({

????????name:?'vote',

????????data:?{

??????????postData

????????}

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

????????console.log(res)

????????this.getVoteStatusFromServer(this.data.voteID)?//从服务器端获取投票情况??

??????}).catch(res?=>?{

????????console.error(res)

????????wx.showToast({

??????????title:?'投票失败',

??????????icon:?'none'

????????})

??????})

????}?else?{?//实名投票的情况

????????const?_this?=?this?//在API接口的函数中,this会被改变,因此需要提前获取this的值到_this中

????????wx.getUserProfile({

??????????desc:?'desc',

??????????success:(res)?=>?{??//授权成功后,调用wx.getUserProfile接口时会回调这个函数

????????????const?postData?=?{

??????????????voteID:?_this.data.voteID,

??????????????userInfo:?res.userInfo,?//获取用户信息

??????????????pickedOption:?_this.data.pickedOption

????????????}

????????????//?将postData数据上传到服务器端?

????????????wx.cloud.callFunction({

??????????????name:?'vote',

??????????????data:?{

????????????????postData

??????????????}

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

??????????????console.log(res)

??????????????_this.getVoteStatusFromServer(_this.data.voteID)?//从服务器端获取投票情况??

????????????}).catch(res?=>?{

??????????????console.error(res)

??????????????wx.showToast({

????????????????title:?'投票失败',

????????????????icon:?'none'

??????????????})

????????????})

??????????}

????????})

????}

??}

完成。

文章来源:https://blog.csdn.net/xy2937131682/article/details/134971150
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。