抽签小程序,妈妈再也不用担心谁洗碗(分配任务)了,so easy
2020/4/16 11:07:42
本文主要是介绍抽签小程序,妈妈再也不用担心谁洗碗(分配任务)了,so easy,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
背景
今天谁炒菜,谁洗碗,谁买菜...啊,Boss说用抽签吧,于是有了下图
![抽签](/upload/202004/16/202004161107425335.png)
这样存在作弊的问题(记住棍子特征,谁先,谁后抽等等)于是有了这个抽签小程序(当然小程序我一个人控制,我想不想作弊看心情了)
简介
扫码体验
![](/images/baidian.png)
数据服务,存储
本项目使用的是微信云开发,云数据库声明个抽签chouqianList集合即可(云开发为开发者提供完整的原生云端支持和微信服务支持,弱化后端和运维概念,无需搭建服务器,使用平台提供的 API 进行核心业务开发,即可实现快速上线和迭代)
运行前准备
(1)注册微信小程序,获取 appid,替换本项目project.config.json里的appid
(2)开通小程序的云开发
具体实现
首页
![首页](/upload/202004/16/202004161107426077.png)
首页从上至下有抽签主题,抽签选项,发起抽签,常用抽签,此页面主要功能发起抽签,把抽签内容存到数据库里面。
微信审核提示
解决这个问题添加的内容调用这个方法(小程序内容安全api,云开发可调用)
isCheckMsg: function (msg) { return new Promise(function (n, s) { wx.cloud.callFunction({ name: 'msg', data: ({ text: msg }) }).then(res => { if (res.result.errCode === 87014) { // 没通过 n(false) } else { // ("通过") n(true) } }); }); }, 复制代码
随机抽签
// 递归随机返回抽签项 edchouqian() { let that = this; return new Promise(function (n, s) { const db = wx.cloud.database() // 查询当前用户所有的 chouqianList db.collection('chouqianList').where({ _id: that.data.drawlotsId }).get({ success: res => { that.setData({ detail: res.data[0].detail, }); let nullDetail = res.data[0].detail.filter(item => item.openid == "");//找出没有抽签的选项 let arrIndex = Math.floor((Math.random() * nullDetail.length));//从没有抽签的选项随机选择一个选项 let objindex = nullDetail[arrIndex].index; n(objindex) }, fail: err => { wx.showToast({ icon: 'none', title: '查询记录失败' }) console.error('[数据库] [查询记录] 失败:', err); s(err); } }) }); }, 复制代码
抽签页
![抽签页](/upload/202004/16/202004161107427220.png)
抽签页有抽签功能,显示抽签结果,此页面主要功能,从数据库查询是否已经抽签,已抽签显示抽签结果,未抽签随机分配抽签(或者显示抽签次数已用完)。
重复抽签问题用函数防抖或者节流
抽签结果页
![抽签结果页](/upload/202004/16/202004161107428050.png)
抽签结果页,显示所有抽签人员和结果(结果从数据库根据抽签表的id查询)
至此完毕 源码地址
结语:
因为发的时间比较短,页面、功能还需要慢慢完善,发布了的功能也有一些待改进的地方,欢迎同样志同道合的码友们多多指教和交流。ヾ(❀╹◡╹)ノ~
前端学习大佬群493671066,美女多多。老司机快上车,来不及解释了。
作者相关Vue文章
基于Vue2.0实现后台系统权限控制
vue2.0-基于elementui换肤(自定义主题)
前端文档汇总
VUE2.0增删改查附编辑添加model(弹框)组件共用
打赏 衷心的表示感谢
![打赏](/images/baidian.png)
这篇关于抽签小程序,妈妈再也不用担心谁洗碗(分配任务)了,so easy的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-06-30实现小程序内部扫码签到和微信扫一扫签到-icode9专业技术文章分享
- 2024-06-30微信内调用扫码扫描小程序码如何解析链接-icode9专业技术文章分享
- 2024-06-30小程序码链接加密了如何解-icode9专业技术文章分享
- 2024-05-302024年最新版云开发cms开通步骤,开始开发微信小程序前的准备工作,认真看完奥!
- 2024-03-30微信小程序的网络设置,及网络请求:wx.request(OBJECT)
- 2024-01-22基于taro搭建小程序多项目框架
- 2024-01-13小程序开发:在插件市场寻找步骤条组件并二开
- 2024-01-05钉钉小程序生态—企业机器人加互动卡片,改善用户体验的开始!
- 2023-12-29【UniApp】-uni-app-打包成小程序
- 2023-12-26性能翻倍!京东亿级体量小程序优化实践