阮薇薇点名啦微信小程序源码

应用场景、目标用户

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

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

实现思路

  • 实现方面从数据库出发,先确定有以下数据库集合:活动信息表、用户信息表、图片信息表。
  • 确定好数据库集合后,使用 JavaScript 和微信小程序的云数据库相关 API 实现活动添加、删除、修改和用户注册、修改信息等页面。
  • 在登录、生成小程序码等需要云函数 API 和大量数据库调用的地方使用云函数进行实现。
  • 页面使用WeUI 框架、组件和图标进行设计。

架构图

阮薇薇点名啦微信小程序源码插图

效果截图

阮薇薇点名啦微信小程序源码插图1
活动页

阮薇薇点名啦微信小程序源码插图2
活动详情页

阮薇薇点名啦微信小程序源码插图3
活动管理页

阮薇薇点名啦微信小程序源码插图4
关于页

更多效果演示请移步腾讯视频

功能代码展示

活动详情页的 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

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

标签

版权公告

本站均基于创作共享的知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议发布,若发现本站有任何侵犯您利益的内容,请及时邮件或留言联系,我会第一时间删除所有相关内容;联系邮箱:2058202036@qq.com 微信:qusha2019