“求捎带”校园订餐系统前端设计

摘  要：为解决高校高峰时段就餐拥挤的问题，利用外卖平台和现代信息技术打造便捷的用餐环境势在必行。文章依托微信小程序来构建“人人都是捎带者”的校园订餐系统，该系统由在校师生注册并选择就近捎带服务。系统前端采用uni-app框架，通过Vue构建用户界面，利用pages.json文件对uni-app进行全局配置，通过uni-app的组件完成页面布局与内容搭建。

关键词：订餐系统;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  引  言

在就餐高峰時段，学生购餐排队往往比较拥挤，为解决在校大学生就餐拥挤问题，为大学生打造便捷的校园生活，订餐系统层出不穷。目前市面上的订餐系统是学生下订单，餐厅安排相关人员专门配送，配送员在送完一单之后回到餐厅再继续派送另一单，配送时间差使学生订的餐不能及时送达，影响学生的用餐时间。同时餐厅还需要招聘专门的配送人员，增加人工成本。而本系统的订餐模式为每个学生即是订餐者也可以充当配送者，以就近捎带为主，捎带费用会直接进入捎带者的钱包，提高了就餐效率，迎合学生需求。

1  项目创建与管理

本系统主要通过HbuilderX软件完成，HbuilderX软件有两个版本——标准版和APP开发版。如果用户下载并安装了标准版，在进行uni-app时，需要安装uni-app插件。如果用户安装的是APP开发版，在运行uni-app时，无须安装插件即可直接使用。例如通过cli方式创建项目，可直接下载标准版，因为uni-app编译插件被安装在项目中。

创建uni-app项目时，可采用模板创建，因为模板中含有大量标准组件和部分API示例，可直接修改和应有。运行uni-app项目时，可选择原生APP云端打包，云端打包支持安心打包，保护用户隐私，不会上传代码和证书，通过差量包制作方式实现安心打包。可发布到iOS、Android、Web（响应式），以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）等多个平台。一个uni-app工程，默认包含如图1所示的目录及文件。

2  系统框架设计

uni-app页面由框架统一管理，开发者需要在pages.json里配置每个路由页面的路径及页面样式。框架以栈的形式管理当前所有页面，在发生路由切换的时候，页面栈的表现如表1所示。

pages.json文件用来对uni-app进行全局配置，决定页面文件的路径、窗口样式、原生的导航栏、底部的原生tabbar等。

页面路径和窗口样式主要通过pages节点进行配置，pages节点接收一个数组，数组中的每一个项都是一个对象。pages节点的第一项为应用入口页（即首页），在整个项目应用中新增或减少页面，都需要对pages数组进行修改，而且文件名不需要写后缀，框架会自动寻找路径下的页面资源进行配置。Pages节点中的path属性主要用来配置页面路径，style属性用来配置页面窗口表现（也就是窗口样式），主要包含导航栏背景颜色、导航栏标题颜色、状态栏前景色、导航栏标题文字内容、导航栏阴影、窗口的背景色、是否开启下拉刷新等界面效果。具体代码为：

{

“pages”： [

{

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

“style”： {

“navigationBarTitleText”： “首页”，//设置页面标题文字

“enablePullDownRefresh”：true//开启下拉刷新

}

}， {

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

“style”： { ... }

}

]

}

底部的原生tabbar是指頁面底部的标签栏，主要是通过tabBar配置项指定一级导航栏，以及在进行tab切换时显示对应页。可以设置tab上的文字默认颜色、tab上的文字选中时的颜色、tab的背景色、tabbar上边框的颜色以及底部导航的个数，通常APP底部标签栏的按钮个数最少为2个，最多为5个，通过list数组完成。按钮图标建议宽和高都是81像素。具体代码为：

“tabBar”： {

“color”： “#7A7E83”，

“selectedColor”： “#3cc51f”，

“borderStyle”： “black”，

“backgroundColor”： “#ffffff”，

“list”： [{

“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  系统界面设计

页面内容主要通过uni-app的组件完成，组件由标签构成，包含开始标签和结束标签。在开始标签和结束标签之间创建组件内容，在开始标签内设置页面属性，属性可以有多个，多个属性之间用空格分隔。类似于HTML语言内的标签，在HTML语言中通过<div>标签进行页面布局，在uni-app中通过<view>标签进行页面设置。每个vue文件的根节点必须为<template>，且这个<template>下只能且必须有一个根<view>标签，在<view>标签内添加不同类型的组件来完成页面布局。

3.1  系统首页设计

本系统首页主要包含餐饮商家的轮播图展示、用户发起的订单信息、热门餐饮信息等，具体如图2所示。

页面中涉及的轮播图主要通过swiper滑块视图容器完成。可设置上下滑动或左右滑动，默认为左右滑动，如果想要更改滑动方向，可通过vertical属性设置为上下滑动。通过autoplay设置自动滑动，但autoplay自动播放会导致swiper发生变化。通过swiper-item标签设置滑动切换区域，例如有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  系统订单页设计

本系统的订单主要包含两个部分——已接帮助和已发帮助。其中，已接帮助主要是指帮别人捎带的订单，订单的右上角会显示订单的完成状态，已完成的订单会显示为绿色，待完成的订单会显示为白色。已发帮助是指自己已经发起的订单，主要包含此订单是否已被接收、被谁接收，以及接收之后的配送状态，具体如图3、图4所示。

本系统订单页面中涉及的内容通过扩展组件中的uni-card卡片视图组件完成，主要包含卡片标题、额外信息、副标题、缩略图等基本信息，但由于平台兼容问题，目前APP-NVUE安卓平台下不支持阴影效果。点击“详情”跳转到订单详情页，如图4所示，页面跳转效果通过navigator组件完成，该组件类似于HTML页面中的<a>标签，但navigator组件只能跳转本地页面，而且目标页面必须在pages.json中注册。不同页面打开方式（如新页面打开或当前页面打开）的效果需要通过open-type属性来实现。如图4所示的订单详情页中涉及的进度条可通过progress组件来实现，通过uni.getLocation获取当前地理位置，具体代码为：

uni.getLocation（{

type： ‘wgs84’，

success： function （res） {

console.log（‘当前位置的经度：’ + res.longitude）;

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

}

}）;

3.3  系统登录注册页设计

本系统的登录注册页如图5、图6所示，主要通过表单组件完成，在<input>标签内输入用户名、密码、手机号等，通过type属性来设置input的类型，比如密码输入框中input的类型为password，手机号输入框中input的类型为number，身份证号输入框中input的类型为idcard。登录和注册的按钮通过<button>按钮标签完成。

订餐系统登录页部分验证码的设计可通过插件来实现，首先在hbuilder官方网站的插件市场中下载验证码相关插件，安装完成之后代码设计为：

<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  結  论

本系统的亮点是“人人都是捎带者”，在校师生可以发起订单也可以配送订单，解决了就餐高峰时段学生排队拥挤的问题。师生可以选择离自己比较近的地点进行捎带配送，既节省了配送成本，又解决了因配送地点较远而导致的配送时间过长的问题。随着社会的发展，网购已成为大学生校园生活不可或缺的一部分，大学生的网购活动日益频繁，而且许多大学生急需兼职机会，“求捎带”校园订餐系统为在校生提供了良好的供需服务。

参考文献：

[1] 张巧岭.校园订餐系统设计 [J].电子世界，2021（20）：162-163.

[2] 张静，刘秋兰，李孜淇.基于uni-app框架的健康校园APP设计与实现 [J].电子技术与软件工程，2021（19）：34-36.

[3] 廖黎莉，王磊，李太，等.基于uni-app框架的校园极简生活跨平台移动应用的设计与实现 [J].无线互联科技，2021，18（12）：38-40.

[4] 许溜溜.基于HBuilder快速开发移动端APP的设计与实现 [J].电脑知识与技术，2020，16（10）：74-75.

[5] 李梓瑶，舒后，宋玮.基于HBuilder的冬奥会新闻小程序的设计与实现 [J].北京印刷学院学报，2021，29（12）：161-164.

作者简介：张巧岭（1989—）。女，汉族，山东德州人，讲师，本科，研究方向：数字媒体技术、程序设计。