张玉鉴和同学共同制作了“云选餐”小程序

近日，“西安一大三学生做小程序帮同学选餐”在网上引发关注。1月4日，主要负责制作该小程序的电子科技大学大三学生张玉鉴告诉北京青年报记者，去年12月29日起，学校食堂取消堂食，每个宿舍派一名同学帮大家带餐，很多同学根本不知道吃什么。他发现自己的小程序相当于一份食堂菜单，刚好能帮到大家，当天上线了，没想到首日访问量达到4100多人，服务器都崩了。“后来我们院长让我转到学校的服务器上，现在这个小程序有我们学校5个食堂、300多个窗口的照片和菜单。我也没想到上线后那么多人使用，能帮到大家我也很开心、很自豪。”

学校食堂取消堂食

学生买饭犯难

张玉鉴今年20岁，是西安电子科技大学计算机科学与技术学院的一名大三学生。1月4日，谈起自己开发的小程序走红，他坦言其实自己做的这个小程序很简单，相当于一份食堂菜单，但学校食堂因为疫情自去年12月29日起取消堂食，每个宿舍需要一名同学帮忙带饭，这个小程序刚好派上用场了。

取消堂食来得突然，很多同学根本记不住食堂里都有什么菜，甚至有“选择困难症”的也不知道要吃什么，带饭的同学只能到了食堂后现场拍下各种菜的照片发到宿舍微信群问“这个吃不吃”，其他同学则在群里七嘴八舌地“点菜”。这不仅降低了买饭的效率，也延长了在食堂逗留的时间，甚至要在各个窗口之间来回逛。想起自己的小程序刚好能提高选餐效率，减少带饭同学在食堂的停留时间，当天，张玉鉴就上线了小程序“XDer今天吃什么”。

上线首日4100多人访问

院方支持链接上所有校区食堂

张玉鉴没想到的是，上线第一天，小程序的访问量达到了4100多人，他租的服务器还崩了。张玉鉴介绍，这个小程序其实是他《移动互联网导论》选修课的作业，是他和另外两名组员郭同学和成同学共同完成的，他主要负责写代码，其他组员主要负责收集、美化食堂窗口照片和菜单，另外还要制作一些小程序用的小图片。“我们做这个小程序大概花了半个月时间，这些食堂窗口的照片大多是疫情前拍的，作业其实并不要求我们上线小程序。但之前，我找了些身边的朋友试用了一下，大家都觉得挺好用的，12月29日那天就上线了，但没想到访问的人会那么多。我们就在朋友圈发了，没怎么推广。”

让张玉鉴意外的是自己的小程序也受到了学院院长的关注。“院长从朋友圈看到我的小程序，知道我们服务器崩了，就让我转到学校的服务器上。我原来只做了我们南校区的食堂，院长还让我们加上北校区的食堂。现在，小程序里有我们学校所有校区5个食堂、300多个窗口的菜单，大家点开小程序就可以看想吃什么，不用各个窗口之间来回跑，如果不知道吃什么，还可以选择‘随机’，就是系统随机选餐。因为我原来自己也有选择困难症，经常不知道要吃什么，每次去食堂都要在各个窗口之间来回看，就加了这个功能。”

说起自己的小程序走红，张玉鉴称，看到自己的小程序能帮到那么多人，他感到很开心也很自豪。

文/本报记者 戴幼卿

【版权声明】本文著作权归北京青年报独家所有，授权深圳市腾讯计算机系统有限公司独家享有信息网络传播权，任何第三方未经授权，不得转载。

四虎免费在线观看白丝 软件架构：微信原生小程序+云开发

戳消防安全知识竞答活动小程序: 优质的消防安全知识竞答活动小程序，内含源码，版本计划持续迭代中……，获取源码，版本持续迭代中…

答题结果页布局

<view class="page">
  <view class="padding">
    <view class='page-head'>
      <view class="page-title text-lg text-bold text-black padding-bottom-xs">
        消防安全知识线上答题活动
      </view>
      <view>共20题，满分100分</view>
      <view class='page-score'>
        <text class="score-num text-red text-bold">90分</text>
      </view>
    </view>
    <view class='page-footer'>
      <view class='padding flex text-center text-grey bg-white radius margin-bottom'>
        <view class='flex flex-sub flex-direction solid-right'>
          <view class="text-xxl text-red">18题</view>
          <view class="margin-top-sm">
            答对</view>
        </view>
        <view class='flex flex-sub flex-direction solid-right'>
          <view class="text-xxl text-gray">2题</view>
          <view class="margin-top-sm">
            答错</view>
        </view>
        <view class='flex flex-sub flex-direction'>
          <view class="text-green text-xxl">
            90%
          </view>
          <view class="margin-top-sm">
            正确率</view>
        </view>
      </view>
      <view class="flex padding flex-direction">
        <button bindtap="toDoWrong" hover-class="other-button-hover" class="cu-btn bg-red round lg"> 再答一次 </button>
        <button bindtap="toIndex" hover-class="other-button-hover" class="cu-btn line-red round lg margin-top"> 返回首页 </button>
      </view>
    </view>
  </view>
  <view class="mw-weixin text-center text-gray">
    <text class="icon-weixin"></text> meng674782630
  </view>
</view>

答题结果页样式

/* pages/results/results.wxss */
page {
  background-color: #fff;
}
.page {
  padding: 30rpx;
}
.mw-avatar {
  width: 128rpx;
  height: 128rpx;
  border-radius: 50%;
  overflow: hidden;
}
.page-score {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  padding-top:20rpx;
  padding-bottom:20rpx;
}
.score-num {
  font-size:100rpx;
}
.page-footer {
  margin-top:50rpx;
  text-align: center;
}

答题结果页效果图

好了，今天就写到这里了。当前的这个版本，先教大家答题考试小程序端的页面布局与样式编写。下一个迭代版本会接入云开发，全面实现完整的答题考试系统，敬请关注吧。