实现一个投票小程序全流程

最新推荐文章于 2026-02-08 09:15:00 发布

原创

最新推荐文章于 2026-02-08 09:15:00 发布 · 5.2k 阅读

标签

#小程序 #投票功能

本文介绍了如何实现一个投票小程序的全流程，包括数据库设计、云函数开发和前端开发。利用滴滴前端团队的mpx框架进行小程序端开发，虽然个人开发者无法在线预览投票类目，但提供了代码仓库供查阅。

因为最近想实践一下小程序的云开发能力，于是设计开发了一个简单的投票应用，欢迎感兴趣的一起学习交流。

代码仓库 https://github.com/luosijie/m...

由于小程序【个人开发者】不开放【投票】类目，所以就不能在线预览了，我放几张应用的截图

数据库设计

总共用到了3个集合

1. users (用户集合)

基本上直接保存用用户的userInfo数据

{
  "_id":"023ce9555ff068de0314b5521c313ee6",
  "OPENID":"oZK45EoiyFzv...7R64I",
  "nickName":"LSJ",
  "gender":1,
  "language":"zh_CN",
  "city":"Xiamen",
  "province":
  "Fujian",
  "country":"China",
  "avatarUrl":"https://thirdwx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTL9lhZHZdYsMx3mjhZZYbbE5OZhUqUefNtsibkhdrSTIdpdhzv34lYHXtafMjuoibJ8JwTj5VM76CkA/132"
}

2. votes (投票集合)

{
  "_id":"21ded5cb5ff5f0530407988a4e8f18a5", // 唯一id
  "creator":"o-ZK45EoiyFzvevQyQTSZUV7R64I", // 发起人
  "title":"阿斯顿大的as da", // 标题
  "desc":"阿斯顿阿斯顿", // 描述
  "startTime":"2021-1-7", // 开始日期
  "endTime":"2021-1-8", // 结束日期
  "state":"ing" // 状态
}

3. options (选项集合)

{
  "_id":"be7fb3985ff5f05403068303431d580b", // 唯一id
  "vote_id":"21ded5cb5ff5f0530407988a4e8f18a5", // 选项对应的投票_id
  "title":"阿斯顿大的大的", // 标题
  "desc":"撒打算的洒大地上阿斯顿", // 描述
  "image":"http://tmp/2jVXjjLScAyNf0dffe2c5fc6479bee73fe954b64a3e7.png", // 配图
  "users":["o-ZK45EoiyFzvevQyQTSZUV7R64I"] // 该选项的投票者
}

云函数开发

总共写了6个云函数

1. addRecord 新增投票记录

/**
 * 新增投票记录
 * @param {String} title 标题
 * @param {String} desc 描述
 * @param {String} startTime 开始日期
 * @param {String} endTime 结束日期
 * @param {String} anonymous 匿名
 * @param {String} min 允许小投票数
 * @param {String} max 允许最大投票数
 * @param {String} type 投票类型：normal; pk
 * @returns {Object} 包含投票_id
 */
const cloud =

最低0.47元/天解锁文章