“求捎帶”校園訂餐系統(tǒng)前端設(shè)計

摘? 要：為解決高校高峰時段就餐擁擠的問題，利用外賣平臺和現(xiàn)代信息技術(shù)打造便捷的用餐環(huán)境勢在必行。文章依托微信小程序來構(gòu)建“人人都是捎帶者”的校園訂餐系統(tǒng)，該系統(tǒng)由在校師生注冊并選擇就近捎帶服務(wù)。系統(tǒng)前端采用uni-app框架，通過Vue構(gòu)建用戶界面，利用pages.json文件對uni-app進(jìn)行全局配置，通過uni-app的組件完成頁面布局與內(nèi)容搭建。

關(guān)鍵詞：訂餐系統(tǒng);uni-app;前端設(shè)計

中圖分類號：TP311? ? ? ?文獻(xiàn)標(biāo)識碼：A文章編號：2096-4706（2022）03-0014-04

Front? End Design of “Ask for Taking” Campus Meal Ordering System

ZHANG Qiaoling

（School of Design and Art， Shandong Huayu University of Technology， Dezhou? 253034， China）

Abstract： In order to solve the problem of crowded dining in Colleges and universities during peak hours， it is imperative to create a convenient dining environment by using takeout platform and modern information technology. This paper builds a campus meal ordering system of “everyone is a carrier” based on WeChat applet. The system is registered by school teachers and students and chooses the nearest carrier service. The front end of the system adopts the uni-app framework， constructs the user interface through Vue， uses pages.json file to globally configure the uni-app， and completes the page layout and content construction through the components of the uni-app.

Keywords： meal ordering system; uni-app; front end design

0? 引? 言

在就餐高峰時段，學(xué)生購餐排隊往往比較擁擠，為解決在校大學(xué)生就餐擁擠問題，為大學(xué)生打造便捷的校園生活，訂餐系統(tǒng)層出不窮。目前市面上的訂餐系統(tǒng)是學(xué)生下訂單，餐廳安排相關(guān)人員專門配送，配送員在送完一單之后回到餐廳再繼續(xù)派送另一單，配送時間差使學(xué)生訂的餐不能及時送達(dá)，影響學(xué)生的用餐時間。同時餐廳還需要招聘專門的配送人員，增加人工成本。而本系統(tǒng)的訂餐模式為每個學(xué)生即是訂餐者也可以充當(dāng)配送者，以就近捎帶為主，捎帶費用會直接進(jìn)入捎帶者的錢包，提高了就餐效率，迎合學(xué)生需求。

1? 項目創(chuàng)建與管理

本系統(tǒng)主要通過HbuilderX軟件完成，HbuilderX軟件有兩個版本——標(biāo)準(zhǔn)版和APP開發(fā)版。如果用戶下載并安裝了標(biāo)準(zhǔn)版，在進(jìn)行uni-app時，需要安裝uni-app插件。如果用戶安裝的是APP開發(fā)版，在運行uni-app時，無須安裝插件即可直接使用。例如通過cli方式創(chuàng)建項目，可直接下載標(biāo)準(zhǔn)版，因為uni-app編譯插件被安裝在項目中。

創(chuàng)建uni-app項目時，可采用模板創(chuàng)建，因為模板中含有大量標(biāo)準(zhǔn)組件和部分API示例，可直接修改和應(yīng)有。運行uni-app項目時，可選擇原生APP云端打包，云端打包支持安心打包，保護(hù)用戶隱私，不會上傳代碼和證書，通過差量包制作方式實現(xiàn)安心打包。可發(fā)布到iOS、Android、Web（響應(yīng)式），以及各種小程序（微信/支付寶/百度/頭條/飛書/QQ/快手/釘釘/淘寶）等多個平臺。一個uni-app工程，默認(rèn)包含如圖1所示的目錄及文件。

2? 系統(tǒng)框架設(shè)計

uni-app頁面由框架統(tǒng)一管理，開發(fā)者需要在pages.json里配置每個路由頁面的路徑及頁面樣式。框架以棧的形式管理當(dāng)前所有頁面，在發(fā)生路由切換的時候，頁面棧的表現(xiàn)如表1所示。

pages.json文件用來對uni-app進(jìn)行全局配置，決定頁面文件的路徑、窗口樣式、原生的導(dǎo)航欄、底部的原生tabbar等。

頁面路徑和窗口樣式主要通過pages節(jié)點進(jìn)行配置，pages節(jié)點接收一個數(shù)組，數(shù)組中的每一個項都是一個對象。pages節(jié)點的第一項為應(yīng)用入口頁（即首頁），在整個項目應(yīng)用中新增或減少頁面，都需要對pages數(shù)組進(jìn)行修改，而且文件名不需要寫后綴，框架會自動尋找路徑下的頁面資源進(jìn)行配置。Pages節(jié)點中的path屬性主要用來配置頁面路徑，style屬性用來配置頁面窗口表現(xiàn)（也就是窗口樣式），主要包含導(dǎo)航欄背景顏色、導(dǎo)航欄標(biāo)題顏色、狀態(tài)欄前景色、導(dǎo)航欄標(biāo)題文字內(nèi)容、導(dǎo)航欄陰影、窗口的背景色、是否開啟下拉刷新等界面效果。具體代碼為：

{

“pages”： [

{

“path”： “pages/index/index”，

“style”： {

“navigationBarTitleText”： “首頁”，//設(shè)置頁面標(biāo)題文字

“enablePullDownRefresh”：true//開啟下拉刷新

}

}， {

“path”： “pages/login/login”，

“style”： { ... }

}

]

}

底部的原生tabbar是指頁面底部的標(biāo)簽欄，主要是通過tabBar配置項指定一級導(dǎo)航欄，以及在進(jìn)行tab切換時顯示對應(yīng)頁。可以設(shè)置tab上的文字默認(rèn)顏色、tab上的文字選中時的顏色、tab的背景色、tabbar上邊框的顏色以及底部導(dǎo)航的個數(shù)，通常APP底部標(biāo)簽欄的按鈕個數(shù)最少為2個，最多為5個，通過list數(shù)組完成。按鈕圖標(biāo)建議寬和高都是81像素。具體代碼為：

“tabBar”： {

“color”： “#7A7E83”，

“selectedColor”： “#3cc51f”，

“borderStyle”： “black”，

“backgroundColor”： “#ffffff”，

“l(fā)ist”： [{

“pagePath”： “pages/component/index”，

“iconPath”： “static/image/icon_component.png”，

“selectedIconPath”： “static/image/icon_component_HL.png”，

“text”： “組件”

}， {

“pagePath”： “pages/API/index”，

“iconPath”： “static/image/icon_API.png”，

“selectedIconPath”： “static/image/icon_API_HL.png”，

“text”： “接口”

}]

}

3? 系統(tǒng)界面設(shè)計

頁面內(nèi)容主要通過uni-app的組件完成，組件由標(biāo)簽構(gòu)成，包含開始標(biāo)簽和結(jié)束標(biāo)簽。在開始標(biāo)簽和結(jié)束標(biāo)簽之間創(chuàng)建組件內(nèi)容，在開始標(biāo)簽內(nèi)設(shè)置頁面屬性，屬性可以有多個，多個屬性之間用空格分隔。類似于HTML語言內(nèi)的標(biāo)簽，在HTML語言中通過<div>標(biāo)簽進(jìn)行頁面布局，在uni-app中通過<view>標(biāo)簽進(jìn)行頁面設(shè)置。每個vue文件的根節(jié)點必須為<template>，且這個<template>下只能且必須有一個根<view>標(biāo)簽，在<view>標(biāo)簽內(nèi)添加不同類型的組件來完成頁面布局。

3.1? 系統(tǒng)首頁設(shè)計

本系統(tǒng)首頁主要包含餐飲商家的輪播圖展示、用戶發(fā)起的訂單信息、熱門餐飲信息等，具體如圖2所示。

頁面中涉及的輪播圖主要通過swiper滑塊視圖容器完成。可設(shè)置上下滑動或左右滑動，默認(rèn)為左右滑動，如果想要更改滑動方向，可通過vertical屬性設(shè)置為上下滑動。通過autoplay設(shè)置自動滑動，但autoplay自動播放會導(dǎo)致swiper發(fā)生變化。通過swiper-item標(biāo)簽設(shè)置滑動切換區(qū)域，例如有3張圖片需要輪播切換，則需要設(shè)置3個swiper-item標(biāo)簽。具體代碼為：

<swiper class=“swiper” ：indicator-dots=“indicatorDots” ：autoplay=“autoplay” ：interval=“interval” ：duration=”duration”>

<swiper-item>

<view class=“swiper-item uni-bg-red”>第一張圖</view>

</swiper-item>

<swiper-item>

<view class=“swiper-item uni-bg-green”>第二張圖</view>

</swiper-item>

<swiper-item>

<view class=“swiper-item uni-bg-blue”>第三張圖</view>

</swiper-item>

</swiper>

3.2? 系統(tǒng)訂單頁設(shè)計

本系統(tǒng)的訂單主要包含兩個部分——已接幫助和已發(fā)幫助。其中，已接幫助主要是指幫別人捎帶的訂單，訂單的右上角會顯示訂單的完成狀態(tài)，已完成的訂單會顯示為綠色，待完成的訂單會顯示為白色。已發(fā)幫助是指自己已經(jīng)發(fā)起的訂單，主要包含此訂單是否已被接收、被誰接收，以及接收之后的配送狀態(tài)，具體如圖3、圖4所示。

本系統(tǒng)訂單頁面中涉及的內(nèi)容通過擴(kuò)展組件中的uni-card卡片視圖組件完成，主要包含卡片標(biāo)題、額外信息、副標(biāo)題、縮略圖等基本信息，但由于平臺兼容問題，目前APP-NVUE安卓平臺下不支持陰影效果。點擊“詳情”跳轉(zhuǎn)到訂單詳情頁，如圖4所示，頁面跳轉(zhuǎn)效果通過navigator組件完成，該組件類似于HTML頁面中的<a>標(biāo)簽，但navigator組件只能跳轉(zhuǎn)本地頁面，而且目標(biāo)頁面必須在pages.json中注冊。不同頁面打開方式（如新頁面打開或當(dāng)前頁面打開）的效果需要通過open-type屬性來實現(xiàn)。如圖4所示的訂單詳情頁中涉及的進(jìn)度條可通過progress組件來實現(xiàn)，通過uni.getLocation獲取當(dāng)前地理位置，具體代碼為：

uni.getLocation（{

type： ‘wgs84’，

success： function （res） {

console.log（‘當(dāng)前位置的經(jīng)度：’ + res.longitude）;

console.log（‘當(dāng)前位置的緯度：’ + res.latitude）;

}

}）;

3.3? 系統(tǒng)登錄注冊頁設(shè)計

本系統(tǒng)的登錄注冊頁如圖5、圖6所示，主要通過表單組件完成，在<input>標(biāo)簽內(nèi)輸入用戶名、密碼、手機(jī)號等，通過type屬性來設(shè)置input的類型，比如密碼輸入框中input的類型為password，手機(jī)號輸入框中input的類型為number，身份證號輸入框中input的類型為idcard。登錄和注冊的按鈕通過<button>按鈕標(biāo)簽完成。

訂餐系統(tǒng)登錄頁部分驗證碼的設(shè)計可通過插件來實現(xiàn)，首先在hbuilder官方網(wǎng)站的插件市場中下載驗證碼相關(guān)插件，安裝完成之后代碼設(shè)計為：

<template>

<view>

<input-box leftText=“用戶名：”></input-box>

<input-box rightText=“驗證碼”></input-box>

</view>

</template>

<script>

import inputBox from ‘@/components/input-box/input-box’;

export default {

data（） {

return {

}

}，

components：{

inputBox

}，

}

</script>

4? 結(jié)? 論

本系統(tǒng)的亮點是“人人都是捎帶者”，在校師生可以發(fā)起訂單也可以配送訂單，解決了就餐高峰時段學(xué)生排隊擁擠的問題。師生可以選擇離自己比較近的地點進(jìn)行捎帶配送，既節(jié)省了配送成本，又解決了因配送地點較遠(yuǎn)而導(dǎo)致的配送時間過長的問題。隨著社會的發(fā)展，網(wǎng)購已成為大學(xué)生校園生活不可或缺的一部分，大學(xué)生的網(wǎng)購活動日益頻繁，而且許多大學(xué)生急需兼職機(jī)會，“求捎帶”校園訂餐系統(tǒng)為在校生提供了良好的供需服務(wù)。

參考文獻(xiàn)：

[1] 張巧嶺.校園訂餐系統(tǒng)設(shè)計 [J].電子世界，2021（20）：162-163.

[2] 張靜，劉秋蘭，李孜淇.基于uni-app框架的健康校園APP設(shè)計與實現(xiàn) [J].電子技術(shù)與軟件工程，2021（19）：34-36.

[3] 廖黎莉，王磊，李太，等.基于uni-app框架的校園極簡生活跨平臺移動應(yīng)用的設(shè)計與實現(xiàn) [J].無線互聯(lián)科技，2021，18（12）：38-40.

[4] 許溜溜.基于HBuilder快速開發(fā)移動端APP的設(shè)計與實現(xiàn) [J].電腦知識與技術(shù)，2020，16（10）：74-75.

[5] 李梓瑤，舒后，宋瑋.基于HBuilder的冬奧會新聞小程序的設(shè)計與實現(xiàn) [J].北京印刷學(xué)院學(xué)報，2021，29（12）：161-164.

作者簡介：張巧嶺（1989—）。女，漢族，山東德州人，講師，本科，研究方向：數(shù)字媒體技術(shù)、程序設(shè)計。