评论

#小程序云开发挑战赛#-阮薇薇点名啦-电子科技大学微软学生俱乐部

阮薇薇点名啦小程序为学校社团活动发布、查看、签到、管理提供平台。

应用场景、目标用户

阮薇薇点名啦小程序为学校社团活动发布、查看、签到、管理提供平台。

社团管理员可在小程序上创建活动,之后社团成员即可在小程序上查看近期活动,并在活动开始时通过扫描签到二维码进行签到。
除此之外,还有导出签到名单、相册、从已签到名单中抽奖等功能。

实现思路

  • 实现方面从数据库出发,先确定有以下数据库集合:活动信息表、用户信息表、图片信息表。
  • 确定好数据库集合后,使用 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

阮薇薇点名啦小程序绝大部分代码由本人完成,计划用于日后俱乐部的活动管理、签到等方面。另一位开发者也是俱乐部成员,完成了相册的少量代码,且已授权本人以个人名义参加小程序云开发挑战赛。

最后一次编辑于  2020-08-18  
点赞 2
收藏
评论

2 个评论

  • 刘洋(论文辅导+PPT)
    刘洋(论文辅导+PPT)
    2020-09-26

    既然是签到,如何确保人到了?

    2020-09-26
    赞同
    回复 1
    • 小灰晖
      小灰晖
      2021-03-22
      如果要严格保证人到场,可以考虑加入 GPS 定位~
      2021-03-22
      回复
  • 青寒
    青寒
    2020-09-21

    名字很讨喜,如果阮薇薇这个名字再有点故事就更好了。

    2020-09-21
    赞同
    回复 1
登录 后发表内容