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

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

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

中圖分類號：TP311? ? ? ?文獻標識碼：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? 引? 言

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

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

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

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

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

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

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

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

{

“pages”： [

{

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

“style”： {

“navigationBarTitleText”： “首頁”，//設置頁面標題文字

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

}

}， {

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

“style”： { ... }

}

]

}

底部的原生tabbar是指頁面底部的標簽欄，主要是通過tabBar配置項指定一級導航欄，以及在進行tab切換時顯示對應頁?？梢栽O置tab上的文字默認顏色、tab上的文字選中時的顏色、tab的背景色、tabbar上邊框的顏色以及底部導航的個數(shù)，通常APP底部標簽欄的按鈕個數(shù)最少為2個，最多為5個，通過list數(shù)組完成。按鈕圖標建議寬和高都是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)界面設計

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

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

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

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

<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)訂單頁設計

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

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

uni.getLocation（{

type： ‘wgs84’，

success： function （res） {

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

console.log（‘當前位置的緯度：’ + res.latitude）;

}

}）;

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

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

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

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

參考文獻：

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

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

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

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

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

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