应用场景、目标用户
阮薇薇点名啦小程序为学校社团活动发布、查看、签到、管理提供平台。
社团管理员可在小程序上创建活动,之后社团成员即可在小程序上查看近期活动,并在活动开始时通过扫描签到二维码进行签到。
除此之外,还有导出签到名单、相册、从已签到名单中抽奖等功能。
实现思路
- 实现方面从数据库出发,先确定有以下数据库集合:活动信息表、用户信息表、图片信息表。
- 确定好数据库集合后,使用 JavaScript 和微信小程序的云数据库相关 API 实现活动添加、删除、修改和用户注册、修改信息等页面。
- 在登录、生成小程序码等需要云函数 API 和大量数据库调用的地方使用云函数进行实现。
- 页面使用WeUI 框架、组件和图标进行设计。
架构图
效果截图
活动页
活动详情页
活动管理页
关于页
更多效果演示请移步腾讯视频
功能代码展示
活动详情页的 WXML:
<view class="page" data-weui-theme="{{theme}}">
<view class="page__hd">
<view class="page__title">{{title}}view>
<view class=“page__desc” wx:if="{{checked_in}}">已签到 <icon class=“icon-small” type=“success_no_circle”>icon> view> <view class=“page__desc” wx:if="{{!checked_in && is_today}}">未签到 <icon class=“icon-small” type=“info_circle” size=“18” color=“red”>icon> view> view> <view class=“page__bd”> <view class=“weui-cells weui-cells_after-title”> <view class=“weui-cell”> <view class=“weui-cell__bd”>主讲人view> <view class=“weui-cell__ft”>{{presenter_string}}view> view> <view class=“weui-cell”> <view class=“weui-cell__bd”>时间view> <view class=“weui-cell__ft”>{{date}} {{time}}view> view> <view class=“weui-cell”> <view class=“weui-cell__bd”>地点view> <view class=“weui-cell__ft”>{{location}}view> view> <view class=“weui-cell”> <view class=“weui-cell__bd”>已签到人数view> <view class=“weui-cell__ft”>{{check_in_total}}view> view> <view url="" class=“weui-cell weui-cell_access” hover-class=“weui-cell_active” bindtap=“callGallery”> <view class=“weui-cell__bd”>相册view> <view class=“weui-cell__ft weui-cell__ft_in-access”>view> view> view> <view class=“button-sp-area”> <view class=“weui-btn weui-btn_primary” bindtap=“callCheckIn”>签到view> view> <view class=“button-sp-area” wx:if="{{is_admin}}"> <view class=“weui-btn weui-btn_primary” bindtap=“callActivityDetailAdmin” data-id="{{id}}">活动管理界面view> view> view> view>
更多代码请移步代码仓库:https://github.com/uestc-msc/wechat-mini-program
也欢迎各位 fork、PR。
团队简介
电子科技大学微软学生俱乐部(UESTC-MSC)成立于2002年,是一个具有17年历史的老牌学生组织。秉承着俱乐部“学习先进技术、开拓创新思维、体验多元文化、成就一流人才”的宗旨,在校团委以及相关学院的指导下,通过技术沙龙、实践空间站项目、编程一小时、HACKATHON、创新杯等活动,培养学生的创新头脑,实践能力和组织能力。让来自不同学院的同学得以展现才华,共同成长。
俱乐部博客:https://uestc-msc.com/
俱乐部 GitHub 地址:https://github.com/uestc-msc
阮薇薇点名啦小程序绝大部分代码由本人完成,计划用于日后俱乐部的活动管理、签到等方面。另一位开发者也是俱乐部成员,完成了相册的少量代码,且已授权本人以个人名义参加小程序云开发挑战赛。