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

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

中圖分類號(hào)：TP311? ? ? ?文獻(xiàn)標(biāo)識(shí)碼：A文章編號(hào)：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? 引? 言

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

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

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

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

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

uni-app頁面由框架統(tǒng)一管理，開發(fā)者需要在pages.json里配置每個(gè)路由頁面的路徑及頁面樣式?？蚣芤詶５男问焦芾懋?dāng)前所有頁面，在發(fā)生路由切換的時(shí)候，頁面棧的表現(xiàn)如表1所示。

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

頁面路徑和窗口樣式主要通過pages節(jié)點(diǎn)進(jìn)行配置，pages節(jié)點(diǎn)接收一個(gè)數(shù)組，數(shù)組中的每一個(gè)項(xiàng)都是一個(gè)對(duì)象。pages節(jié)點(diǎn)的第一項(xiàng)為應(yīng)用入口頁（即首頁），在整個(gè)項(xiàng)目應(yīng)用中新增或減少頁面，都需要對(duì)pages數(shù)組進(jìn)行修改，而且文件名不需要寫后綴，框架會(huì)自動(dòng)尋找路徑下的頁面資源進(jìn)行配置。Pages節(jié)點(diǎn)中的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配置項(xiàng)指定一級(jí)導(dǎo)航欄，以及在進(jìn)行tab切換時(shí)顯示對(duì)應(yīng)頁?？梢栽O(shè)置tab上的文字默認(rèn)顏色、tab上的文字選中時(shí)的顏色、tab的背景色、tabbar上邊框的顏色以及底部導(dǎo)航的個(gè)數(shù)，通常APP底部標(biāo)簽欄的按鈕個(gè)數(shù)最少為2個(gè)，最多為5個(gè)，通過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è)計(jì)

頁面內(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è)置頁面屬性，屬性可以有多個(gè)，多個(gè)屬性之間用空格分隔。類似于HTML語言內(nèi)的標(biāo)簽，在HTML語言中通過<div>標(biāo)簽進(jìn)行頁面布局，在uni-app中通過<view>標(biāo)簽進(jìn)行頁面設(shè)置。每個(gè)vue文件的根節(jié)點(diǎn)必須為<template>，且這個(gè)<template>下只能且必須有一個(gè)根<view>標(biāo)簽，在<view>標(biāo)簽內(nèi)添加不同類型的組件來完成頁面布局。

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

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

頁面中涉及的輪播圖主要通過swiper滑塊視圖容器完成?？稍O(shè)置上下滑動(dòng)或左右滑動(dòng)，默認(rèn)為左右滑動(dòng)，如果想要更改滑動(dòng)方向，可通過vertical屬性設(shè)置為上下滑動(dòng)。通過autoplay設(shè)置自動(dòng)滑動(dòng)，但autoplay自動(dòng)播放會(huì)導(dǎo)致swiper發(fā)生變化。通過swiper-item標(biāo)簽設(shè)置滑動(dòng)切換區(qū)域，例如有3張圖片需要輪播切換，則需要設(shè)置3個(gè)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è)計(jì)

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

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

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

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

<template>

<view>

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

<input-box rightText=“驗(yàn)證碼”></input-box>

</view>

</template>

<script>

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

export default {

data（） {

return {

}

}，

components：{

inputBox

}，

}

</script>

4? 結(jié)? 論

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

參考文獻(xiàn)：

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

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

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

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

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

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