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

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

4.5.1 完成获取投票信息功能

修改pages/vote/vote.js文件中getVoteDataFromServer函数,代码如下:

getVoteDataFromServer(voteID) {

const db = wx.cloud.database()

db.collection('votes').doc(voteID).get().then(res => { // 根据投票ID获取投票信息

const voteData = res.data

const isExpired = this.checkExpired(voteData.endDate) //检查投票是否已经过期

this.setData({ // 将获取到的投票信息更新到data对象中

voteID,

type: voteData.type,

voteTitle: voteData.voteTitle,

voteDesc: voteData.voteDesc,

optionList: voteData.optionList,

endDate: voteData.endDate,

isAnonymous: voteData.isAnonymous,

isExpired

})

}).catch(res => {

console.error(res)

wx.showToast({

title: '获取投票失败',

icon: 'none'

})

})

}


实现getVoteStatusFromServer功能,需要知道openid,小程序端无法获取当前用户的openid,因此需要借助云函数实现。首先在新建一个名为getVoteStatus的云函数目录,该目录下的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

/**

* 根据投票ID获取投票记录

* 使用await关键字可以直接获取Promise过程中then函数中的res的值

* await关键字必须在被声明为async的函数中使用

*/

const res = await db.collection('votes').doc(event.voteID).get()

const optionListLength = res.data.optionList.length // 获取投票选项的个数

const voteLsit = res.data.voteLsit // 获取所有用户的投票列表

const alreadyVoted = checkAlreadyVoted(voteList, openid)

const totalVoteCount = getTotalVoteCount(voteList)

const optionStatus = getOptionStatus(voteList, openidd, optionLength)

return {

event,

openid: wxContext.OPENID,

appid: wxContext.APPID,

unionid: wxContext.UNIONID,

alreadyVoted, //当前用户是否已经投票

totalVoteCount, //总投票数量

optionStatus //每个选项的投票情况

}

}

function checkAlreadyVoted(voteList, openid){}

function getTotalVoteCount(voteList){}

function getOptionStatus(voteList, openidd, optionLength){}


三个计算函数下次补上。

最后在小程序端调用云函数的代码,将getVoteStatusFromServer函数修改为以下代码:

getVoteStatusFromServer(voteID){

wx.cloud.callFunction({

name: 'getVoteStatus',

data: {

voteID

}

}).then(res => {

console.log(res)

this.setData({

voteStatus: res.result

})

}).catch(res => {

console.error(res)

wx.showToast({

title: '获取投票数据失败',

icon: 'none'

})

})

}

相关推荐
小时前端2 小时前
微信小程序选不了本地文件?用 web-view + H5 一招搞定
前端·微信小程序·uni-app
icebreaker1 天前
Weapp-vite:原生模式之外,多一种 Vue SFC 选择
前端·vue.js·微信小程序
icebreaker1 天前
重走 Vue 长征路 Weapp-vite:编译链路与 Wevu 运行时原理拆解
前端·vue.js·微信小程序
大米饭消灭者4 天前
Taro是怎么实现一码多端的【底层原理】
微信小程序·taro
西岸行者5 天前
学习笔记:SKILLS 能帮助更好的vibe coding
笔记·学习
悠哉悠哉愿意5 天前
【单片机学习笔记】串口、超声波、NE555的同时使用
笔记·单片机·学习
别催小唐敲代码5 天前
嵌入式学习路线
学习
FliPPeDround5 天前
Vitest Environment UniApp:让 uni-app E2E 测试变得前所未有的简单
微信小程序·e2e·前端工程化
FliPPeDround5 天前
微信小程序自动化的 AI 新时代:wechat-devtools-mcp 智能方案
微信小程序·ai编程·mcp
毛小茛5 天前
计算机系统概论——校验码
学习