張玉鑒和同學(xué)共同制作了“云選餐”小程序
近日,“西安一大三學(xué)生做小程序幫同學(xué)選餐”在網(wǎng)上引發(fā)關(guān)注。1月4日,主要負(fù)責(zé)制作該小程序的電子科技大學(xué)大三學(xué)生張玉鑒告訴北京青年報(bào)記者,去年12月29日起,學(xué)校食堂取消堂食,每個(gè)宿舍派一名同學(xué)幫大家?guī)Р?,很多同學(xué)根本不知道吃什么。他發(fā)現(xiàn)自己的小程序相當(dāng)于一份食堂菜單,剛好能幫到大家,當(dāng)天上線了,沒想到首日訪問量達(dá)到4100多人,服務(wù)器都崩了?!昂髞砦覀?cè)洪L讓我轉(zhuǎn)到學(xué)校的服務(wù)器上,現(xiàn)在這個(gè)小程序有我們學(xué)校5個(gè)食堂、300多個(gè)窗口的照片和菜單。我也沒想到上線后那么多人使用,能幫到大家我也很開心、很自豪?!?/p>
學(xué)校食堂取消堂食
學(xué)生買飯犯難
張玉鑒今年20歲,是西安電子科技大學(xué)計(jì)算機(jī)科學(xué)與技術(shù)學(xué)院的一名大三學(xué)生。1月4日,談起自己開發(fā)的小程序走紅,他坦言其實(shí)自己做的這個(gè)小程序很簡單,相當(dāng)于一份食堂菜單,但學(xué)校食堂因?yàn)橐咔樽匀ツ?2月29日起取消堂食,每個(gè)宿舍需要一名同學(xué)幫忙帶飯,這個(gè)小程序剛好派上用場了。
取消堂食來得突然,很多同學(xué)根本記不住食堂里都有什么菜,甚至有“選擇困難癥”的也不知道要吃什么,帶飯的同學(xué)只能到了食堂后現(xiàn)場拍下各種菜的照片發(fā)到宿舍微信群問“這個(gè)吃不吃”,其他同學(xué)則在群里七嘴八舌地“點(diǎn)菜”。這不僅降低了買飯的效率,也延長了在食堂逗留的時(shí)間,甚至要在各個(gè)窗口之間來回逛。想起自己的小程序剛好能提高選餐效率,減少帶飯同學(xué)在食堂的停留時(shí)間,當(dāng)天,張玉鑒就上線了小程序“XDer今天吃什么”。
上線首日4100多人訪問
院方支持鏈接上所有校區(qū)食堂
張玉鑒沒想到的是,上線第一天,小程序的訪問量達(dá)到了4100多人,他租的服務(wù)器還崩了。張玉鑒介紹,這個(gè)小程序其實(shí)是他《移動(dòng)互聯(lián)網(wǎng)導(dǎo)論》選修課的作業(yè),是他和另外兩名組員郭同學(xué)和成同學(xué)共同完成的,他主要負(fù)責(zé)寫代碼,其他組員主要負(fù)責(zé)收集、美化食堂窗口照片和菜單,另外還要制作一些小程序用的小圖片?!拔覀冏鲞@個(gè)小程序大概花了半個(gè)月時(shí)間,這些食堂窗口的照片大多是疫情前拍的,作業(yè)其實(shí)并不要求我們上線小程序。但之前,我找了些身邊的朋友試用了一下,大家都覺得挺好用的,12月29日那天就上線了,但沒想到訪問的人會(huì)那么多。我們就在朋友圈發(fā)了,沒怎么推廣?!?/p>
讓張玉鑒意外的是自己的小程序也受到了學(xué)院院長的關(guān)注?!霸洪L從朋友圈看到我的小程序,知道我們服務(wù)器崩了,就讓我轉(zhuǎn)到學(xué)校的服務(wù)器上。我原來只做了我們南校區(qū)的食堂,院長還讓我們加上北校區(qū)的食堂?,F(xiàn)在,小程序里有我們學(xué)校所有校區(qū)5個(gè)食堂、300多個(gè)窗口的菜單,大家點(diǎn)開小程序就可以看想吃什么,不用各個(gè)窗口之間來回跑,如果不知道吃什么,還可以選擇‘隨機(jī)’,就是系統(tǒng)隨機(jī)選餐。因?yàn)槲以瓉碜约阂灿羞x擇困難癥,經(jīng)常不知道要吃什么,每次去食堂都要在各個(gè)窗口之間來回看,就加了這個(gè)功能。”
說起自己的小程序走紅,張玉鑒稱,看到自己的小程序能幫到那么多人,他感到很開心也很自豪。
文/本報(bào)記者 戴幼卿
【版權(quán)聲明】本文著作權(quán)歸北京青年報(bào)獨(dú)家所有,授權(quán)深圳市騰訊計(jì)算機(jī)系統(tǒng)有限公司獨(dú)家享有信息網(wǎng)絡(luò)傳播權(quán),任何第三方未經(jīng)授權(quán),不得轉(zhuǎn)載。
]]>戳消防安全知識(shí)競答活動(dòng)小程序: 優(yōu)質(zhì)的消防安全知識(shí)競答活動(dòng)小程序,內(nèi)含源碼,版本計(jì)劃持續(xù)迭代中……,獲取源碼,版本持續(xù)迭代中…
答題結(jié)果頁布局
<view class="page">
<view class="padding">
<view class='page-head'>
<view class="page-title text-lg text-bold text-black padding-bottom-xs">
消防安全知識(shí)線上答題活動(dòng)
</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">
答對(duì)</view>
</view>
<view class='flex flex-sub flex-direction solid-right'>
<view class="text-xxl text-gray">2題</view>
<view class="margin-top-sm">
答錯(cuò)</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>
答題結(jié)果頁樣式
/* 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;
}
答題結(jié)果頁效果圖
好了,今天就寫到這里了。當(dāng)前的這個(gè)版本,先教大家答題考試小程序端的頁面布局與樣式編寫。下一個(gè)迭代版本會(huì)接入云開發(fā),全面實(shí)現(xiàn)完整的答題考試系統(tǒng),敬請(qǐng)關(guān)注吧。
]]>