【《基于微信小程序的食堂点餐系统设计》9400字】

第1章绪论1.1项目开发背景现在的科技社会中，手机成为了每个人手中不可或缺的最好工具。腾讯公司的应用微信是目前我国手机用户中装机量最大的软件之一，截至2020年9月，微信平均日登录用户达到9亿，其中微信公众号的活跃粉丝数近8亿，生活服务类小程序在其中是访问人数最多的一类。因此微信的用户数量和小程序受众人数较为庞大，广大学生和企业员工作为手机用户的主力军，使用微信的基数也较为庞大。基于庞大用户数量进行小程序的开发，目标用户群体如学生、员工等能够享受到便利的服务。民以食为天，我国自古以来就对“吃”很重视。如今已经从如何吃饱变成了如何吃得开心、满意。而往往在点餐这一环节，传统的点餐模式会让大多数食客失去耐心；而现有的点餐应用都有应用体积庞大、应用繁琐的问题。为此基于小程序的开发，用轻便简洁的模式来打造个性化服务，方便个人和商户两端直观地点餐、备餐。在一次实地调研中，某公司食堂点餐模式仍旧为传统纸笔记录的形式，点餐订餐效率低下，有时出现备餐不全、取餐菜品出错的问题。为此，该公司负责人就此提出了针对食堂点餐，希望拥有一个方便的小程序来满足智能化点餐的需求。因此本文以开发针对公司点餐的小程序作为基础，探讨目前的点餐程序的模式，并实际设计和开发一个微信点餐小程序。1.2主要工作本论文旨在设计和开发基于小程序实现的点餐系统。本论文使用软件工程的开发流程进行开发，包括可行性分析、需求分析、系统总体设计和详细设计、系统测试等环节。需求分析阶段，根据项目开始前的调查工作，以及部分网上资料来源进行需求分析。在系统总体设计阶段，会根据需求设计出E-R图，并详细介绍图表内容。在详细设计阶段，根据不同子模块进行对应的编程，并给出代码部分相关截图展示。在系统测试阶段，将进行模拟机测试以及真机测试等方式，将最终成果以截图的形式展示在系统测试部分中。1.3论文结构安排本论文结构安排如下：第一章为绪论。第二章为通过对市场和技术的可行性分析之后，给出基于微信小程序的食堂点餐系统的可行性分析。第三章提供了基于微信小程序的食堂点餐系统需求分析。第四章是基于微信小程序的食堂点餐系统的总体设计，介绍相关使用的技术，给出相关E-R图，并给出系统功能图。第五章介绍了系统的详细设计，这一章里针对具体功能给出设计思路，并给出相关代码展示。第六章为系统测试，这一章中将进行开发者工具中模拟展示，以及真机测试部分，并且给出相关测试界面的截图。第七章为总结与展望，这一章总结本项目的开发过程，并对基于微信小程序的食堂点餐系统的不足之处进行经验总结，同时展望未来相关发展。第2章可行性分析2.1市场可行性市场可行性研究是一个项目的建设是否符合社会或市场的需要，只有当项目提供的产品或服务能诸方面满足社会或市场近期与远期需要时，它的建设才是有意义的。因此，在进行项目可行性研究时，首先要进行市场可行性研究。在现代社会，智能手机凭借便携、智能、功能多样的特点，几乎成为了大家出行的必备工具。我国目前的政策推行“互联网+”的新模式，餐饮业与互联网技术之间有了更深度的融合和应用。点餐软件层面，有美团、饿了么、百度外卖等专注外卖的点餐平台；另外传统西式快餐厅肯德基、麦当劳也有自己的点餐配送服务。而目前缺乏针对在校学生、在职员工的微信小程序来为这类人群服务，市场上存在一定的空缺。基于微信小程序的食堂点餐系统的开发设计，就能满足学生、员工对此方面的需求，同时弥补相关空缺。因此，食堂需要这样一个多方面的综合网络平台，在为学生、员工提供点餐的便利服务的同时，也提高了生活服务、后勤保障运行的效率。2.2技术可行性本系统技术可行性主要有：①JS开发技术成熟，微信小程序技术成熟。②开发过程有对应的微信小程序开发手册、微信公众平台可以参考学习。③微信小程序开发者工具能提供相关开发工具、配置环境。④微信云开发技术提供数据库和服务器，原生打通微信开放能力。

第3章需求分析3.1系统顶层需求分析基于微信小程序的食堂点餐系统分为点餐、支付、订单、评价、管理员这五个模块。图3.1为本系统的顶层需求结构。图3图3.SEQ图表\*ARABIC1基于微信小程序的食堂点餐系统需求结构图3.2系统各模块需求分析3.2.1点餐点餐界面是系统的核心模块，主要功能是负责菜单展示以及点餐和食客的支付。食客在点餐页面可以查看菜品图、菜品名、菜品价格、销量等信息作为点餐参考，当确定需要的菜品后，选择加入购物车，在购物车中选择支付方式，完成支付后，生成一笔订单，食客端点餐的流程就完成了。图3.图3.SEQ图表\*ARABIC2点餐模块流程图3.2.2“我的”图3.3“我的”模块用例图图3.3“我的”模块用例图3.2.3管理员管理员模块作为便利管理员操作的模块，整合到小程序当中。在进入管理员模块后，需要成功登录到管理员页面，才能进行下一步操作。在管理员页面，可以看到后厨管理订单，此处可以收到来自食客点餐端的订单，显示为待制作菜品。制作完成后，点击并确认上菜，食客就可以取餐。后厨可以查看食客的评价情况，以及订单是否完成，图3.4管理员模块用例图图3.4管理员模块用例图第4章系统总体设计4.1开发技术简介本节介绍基于微信小程序的食堂点餐系统开发时所用的一些技术和开发环境。用到的开发技术主要有：①前端：WXML、WXSS、JavaScript；②后端：微信小程序云开发；③云开发提供的JSON数据库。系统开发环境：微信小程序开发者工具、VSCode，操作系统WIN10、CPUi5-7300HQ、内存16G。WXML：用以框架设计，结合基础组件、事件系统，构建出页面的结构。WXSS：一种类似于CSS的语言，用于描述WXML的组件样式，决定WXML的组件如何显示。JavaScript：作为即时编译脚本语言用以开发web页面。4.2系统功能图4.2.1系统功能图基于微信小程序的食堂点餐系统主要由客户端（基于微信小程序和手机微信APP）、小程序管理端、WEB管理端所组成。其中客户端、小程序管理端即为所研究的微信小程序的食堂点餐系统，WEB管理端由微信小程序云开发的内容管理系统CMS来进行。主要包括以下三个主要的功能模块，其中点餐、“我的”两个模块为主要模块，管理员模块作为管理员入口整合进入小程序系统中。三个模块下还有相对应的子模块，通过实现子模块从而实现整个系统的功能，提供一个完整的小程序上的点餐服务。图4.1微信点餐小程序系统功能图图4.1微信点餐小程序系统功能图4.2.2小程序与服务器交互图图4.2微信点餐小程序与服务器端交互的流程图微信小程序用户与小程序与服务器之间交互的流程图如下图所示。图4.2微信点餐小程序与服务器端交互的流程图4.3数据库设计4.3.1E-R图点餐系统的E-R图如下图所示。菜品包括菜品编号、菜名、价格、销量的属性；下单后，订单包括订单编号、订单发生时间、订单包括菜品、订单支付金额的属性；订单完成后需要评价，评价里有当前订单的评价和历史订单评价两个属性；最后管理员负责管理菜品以及获取评价。图4.3小程序图4.3小程序点餐系统E-R图4.3.2关系表设计1、菜品关系表表4-1food表序列列名类型可空注释1idstringNotnull由系统自动生成的id2_createTimenumberNotnull由系统自动生成的创造时间属性3_updateTimenumberNotnull由系统自动生成的更新时间属性4fenleistringNull菜品分类5iconstringNull菜品图6namestringNull菜品名称7pricenumberNull菜品价格8sellnumberNull菜品销量9statusstringNotnull菜品上架状态2、订单关系表表4-2order表序列列名类型可空注释1idstringNotnull由系统自动生成的id2_createTimenumberNotnull由系统自动生成的创造时间属性3_openidstringNotnull小程序开发必要的openid4addressstringNull店内下单5beizhustringNull备注6namestringNull用户名7orderListarrayNull点餐订单8renshunumberNull人数9statusnumberNull大桌或小桌10totalPricestringNull总价3、评论关系表表4-3pinglun表序列列名类型可空注释1idstringNotnull由系统自动生成的id2_createTimenumberNotnull由系统自动生成的创造时间属性3_openidstringNotnull小程序开发必要的openid4avatarUrlstringNull用户头像5contentstringNull评论内容6namestringNull用户名7orderIdstringNull订单号4、管理员登录关系表表4-4admin表序列列名类型可空注释1idstringNotnull由系统自动生成的id2_createTimenumberNotnull由系统自动生成的创造时间属性3_updateTimenumberNotnull由系统自动生成的更新时间属性4namestringNull管理员用户名5passwordstringNull管理员登录密码

第5章系统总体设计本章介绍基于微信小程序的食堂点餐系统的详细设计与实现。本章将通过相关核心代码、系统运行截图，针对点餐、“我的”、管理员三大功能模块进行展示，另外将页面设计也将展示。5.1点餐模块的实现5.1.1功能介绍进入微信点餐小程序，若要进行点餐服务，则首先需要登录小程序。在“我的”页面微信授权登录小程序后，就可以回到首页进行点餐了。图5.3③首页图5.2②授权登录图5.3③首页图5.2②授权登录图5.1①“我的”页图5.6⑥完成订单图5.5⑤支付页图5.4④菜单页点餐5.1.2图5.6⑥完成订单图5.5⑤支付页图5.4④菜单页点餐1、点餐myOrder.js部分：

getMyOrderList()

{

let

openid

=

app._checkOpenid();

if

(!openid)

{

return;

}

wx.cloud.callFunction({

name:

'getOrderList',

data:

{

action:

'user',

orderStatus:

orderStatus

}

})

.then(res

=>

{

console.log("我的订单列表",

res)

this.setData({

list:

res.result.data

})

}).catch(res

=>

{

console.log("我的订单列表失败",

res)

})

},myOrder.wxml部分：<view

wx:if="{{list.length>0}}">

<view

class='cont_count'

wx:for="{{list}}"

wx:key="key">

<view

class='dingdanbianhao'>订单编号:{{item._id}}

</view>

<view

class="content">

<view

class='mingxi'>

<block

wx:for="{{item.orderList}}"

wx:for-item="arr_item"

wx:key="key">

<view

class="mingxi_item">

<text>{{arr_}}

X{{arr_item.quantity}}</text>

<text

class="mingxi_price">

￥{{arr_item.price}}</text>

</view>

</block>

<view

class='dibuttxt'>地址:{{item.address}}</view>

<view

class='dibuttxt'>下单时间:{{item._createTime?filters.formatDate(item._createTime):''}}</view>

</view></view><view

wx:else

style="margin-top:16rpx;text-align:

center;">

<label

class='none_tab'>数据为空哦~~</label></view>2、支付pay.js部分：

onLoad()

{

console.log('app地址',

app.globalData.address)

this.setData({

address:

app.globalData.address

})

var

arr

=

wx.getStorageSync('cart')

||

[];

for

(var

i

in

arr)

{

this.data.totalPrice

+=

arr[i].quantity

*

arr[i].price;

this.data.totalNum

+=

arr[i].quantity

}

this.setData({

cartList:

arr,

totalPrice:

this.data.totalPrice.toFixed(2),

totalNum:

this.data.totalNum

})

},

getDinnerNUM(e)

{

this.setData({

diner_num:

e.currentTarget.dataset.num

});

},

getInputNum(e)

{

this.setData({

diner_num:

e.detail.value

})

},

getRemark(e)

{

this.setData({

beizhu:

e.detail.value

})

},

submitOrder:

function

(e)

{

let

arr

=

wx.getStorageSync('cart')

||

[];

let

arrNew

=

[]

arr.forEach(item

=>

{

arrNew.push({

_id:

item._id,

name:

,

price:

item.price,

quantity:

item.quantity,

name:

,

})

});pay.wxml部分：<view

class="mingxi_title">点餐明细</view><block

wx:for="{{cartList}}"

wx:key="index">

<view

class="mingxi_item">

<text>{{}}

X{{item.quantity}}</text>

<text

class="base_color">￥{{item.price}}</text>

</view></block><view

class="zongjia">合计：<span>{{totalPrice}}元，{{totalNum}}份</span></view><view

class="base_line_10rpx"></view><view

class="mingxi_title">地址：{{address}}</view><input

focus

placeholder="请输入用餐人数"

type="number"

bindinput="getInputNum"

value="{{diner_num}}"

/>5.2“我的”模块的实现5.2.1功能介绍初次使用小程序，需要先微信授权登录到小程序，才能继续使用。由于微信授权登录属于微信自带的功能，登陆后在“我的”页通过查看头像和昵称则可以判断是否登录成功。后台可以看到有数据的回传，证明登录成功。可以通过“我的”页查看订单情况，点击进入“我的订单”即可以看到“待上餐”、“待评价”、“已完成”、“已取消”四个状态的订单情况，换言之，在此页可以跟踪订单的进度，也可以查看订单点餐菜品、总价、下单时间等等详细信息。另外在“待评价”分页，用户需要进行对订单的评价，评价完成后才完成一次完整的点餐评价流程。在“我的”页还可以查看评价，点击进入“评价列表”进入评论查看历史评价，可以查看全部评价，也可以查看我的评价。“我的”页面还提供了在线客服服务，这一功能由微信的在线客服功能实现，能够及时与绑定小程序的管理员进行微信聊天联系，较为便利。图5.11⑤在线客服对话图5.10④查看历史评价图5.9图5.11⑤在线客服对话图5.10④查看历史评价图5.9②订单状态一览图5.8②授权登录图5.7①“我的”页5.2.2代码展示1、“我的”页面me.js部分：const

app

=

getApp();Page({

data:

{

isShowUserName:

false,

userInfo:

null,

},

onGotUserInfo:

function

(e)

{

console.log('用户信息',

e)

if

(e.detail.userInfo)

{

var

user

=

e.detail.userInfo;

this.setData({

isShowUserName:

true,

userInfo:

e.detail.userInfo,

})

user.openid

=

app.globalData.openid;

app._saveUserInfo(user);

}

else

{

app._showSettingToast('登陆需要允许授权');

}},

onShow(options)

{

var

user

=

app.globalData.userInfo;

if

(user

&&

user.nickName)

{

this.setData({

isShowUserName:

true,

userInfo:

user,

})

}

},

onLoad:

function

(options)

{

var

that

=

this;

var

user

=

app.globalData.userInfo;

},})me.wxml部分：<view

wx:if="{{isShowUserName}}">

<view

class='my_item'

bindtap="goToMyOrder">

<text>我的订单</text>

<view

class='right_arrow'

/></view>

<view

class='my_item'

bindtap="goCommentPage">

<text>评价列表</text>

<view

class='right_arrow'

/>

</view></view><view

class='my_item'>

<button

class="button"

open-type="contact">在线客服</button>

<view

class='right_arrow'

/></view>2、评论页面mycomment.js部分：var

app

=

getApp()let

DB

=

wx.cloud.database()Page({

data:

{

},

onLoad()

{

this.getCommentList();

},

getCommentList()

{

wx.cloud.callFunction({

name:

"getpinglun",

})

.then(res

=>

{

console.log("查询评论成功",

res)

if

(res

&&

res.result)

{

let

dataList

=

res.result.data;

this.setData({

list:

dataList

})

}

else

{

this.setData({

list:

[]

})

}

}).catch(res

=>

{

console.log("查询评论失败",

res)

})

},})mycomment.wxml部分：<view

wx:if="{{list.length>0}}">

<view

class='cont_count'

wx:for="{{list}}"

wx:key="key">

<view

class="item_root">

<view

class="top_root">

<image

class='img_left'

src='{{item.avatarUrl}}'

/>

<view

class="top_right">

<text

class='name'>{{item._createTime?filters.formatDate(item._createTime):''}}</text>

<text

class='name'>{{}}评论：</text>

</view>

</view>

<view

class='content'>{{item.content}}</view>

</view>

</view></view><view

wx:else

class='nothing'>

<label

class='none_tab'>数据为空哦~~</label></view>5.3管理员模块的实现5.3.1功能介绍管理员模块，实际是提供给食堂后厨工作人员的功能。首先管理员在小程序端的入口位于“我的”页中“管理员登录”一项，进入后需要使用账号与密码，账号密码需要提前在数据库中录入，检验通过后方可进入管理员页面。管理员页面分为后厨人员管理订单，此页需要对订单及时处理，菜品制作完成后，需要点击制作完成，并通过确认完成让食客取餐。管理员页面可以通过查看评论一览，获得来自食客的点评。具体内容需要来到小程序云开发内容管理系统CMS的WEB端对菜品、订单、评论、进行增删改查，增减管理员、设置管理员密码等也是在CMS中处理操作。

图5.17⑥评论一览图5.16⑤订单完成后图5.15图5.17⑥评论一览图5.16⑤订单完成后图5.15④后厨订单管理图5.14③管理员页面图5.13②管理员登录页图5.12①管理员登录入口图5.18CMS系统后台图5.18CMS系统后台5.3.2代码展示1、管理员登录部分admin.js部分：const

app

=

getApp()let

name

=

""let

password

=

""const

db

=

wx.cloud.database()Page({

data:

{

isAdmin:

false,

},

goHouchu()

{

wx.navigateTo({

url:

'/pages/adminHouchu/adminHouchu',

})

},

goCommentPage()

{

wx.navigateTo({

url:

'/pages/comment/comment',

})

},

onLoad()

{

let

admin

=

wx.getStorageSync('admin')

if

(admin

&&

&&

admin.password)

{

this.login(,

admin.password)

}

},

getName:

function

(e)

{

name

=

e.detail.value

},

getPassWord:

function

(e)

{

password

=

e.detail.value

},

formSubmit:

function

()

{

if

(name

==

''

||

name

==

undefined)

{

wx.showToast({

title:

'用户名不能为空',

icon:

'none'

})

return;

}

if

(password

==

''

||

password

==

undefined)

{

wx.showToast({

title:

'密码不能为空',

icon:

'none'

})

return;

}

this.login(name,

password)

},

login(name,

password)

{

db.collection('admin').where({

name:

name,

password:

password

}).get()

.then(res

=>

{

console.log("登陆成功",

res)

if

(res.data

&&

res.data.length

>

0)

{

this.setData({

isAdmin:

true

})

let

admin

=

{

name:

name,

password:

password

}

wx.setStorageSync('admin',

admin)

wx.showToast({

icon:

'none',

title:

'登录成功',

})

}

else

{

this.setData({

isAdmin:

false

})

wx.showToast({

icon:

'none',

title:

'账号或密码错误',

})

}

}).catch(res

=>

{

console.log("登陆失败",

res)

wx.showToast({

icon:

'none',

title:

'账号或密码错误',

})

this.setData({

isAdmin:

false

})

})

},})admin.wxml部分：<view

wx:if="{{!isAdmin}}"

class="container">

<view

class='line_1px'

/>

<view

class='item_root'>

账号：

<input

class="textarea25px"

bindinput="getName"

value="{{username}}"

maxlength='10'

/>

</view>

<view

class='line_1px'

/>

<view

class='item_root'>

密码：

<input

class="textarea25px"

bindinput="getPassWord"

value="{{phone}}"

maxlength='11'

/>

</view>

<button

class='btn_fabu'

bindtap='formSubmit'

type='primary'>管理员登陆</button></view><view

wx:if="{{isAdmin}}">

<view

class="tab">

<text

class="tabNum"

bindtap="goHouchu">后厨人员订单管理</text>

</view>

<view

class="tab">

<text

class="tabNum"

bindtap="goCommentPage">评论一览</text>

</view></view>2、后厨人员订单管理部分：adminHouchu.js部分：

getMyOrderList()

{

let

openid

=

app._checkOpenid();

if

(!openid)

{

return;

}

wx.cloud.callFunction({

name:

'getOrderList',

data:

{

action:'admin',

orderStatus:

orderStatus

}

})

.then(res

=>

{

console.log("用户订单列表",

res)

this.setData({

list:

res.result.data

})

}).catch(res

=>

{

console.log("用户订单列表失败",

res)

})

},

zhizuowancheng(e)

{

console.log(e.currentTarget.dataset.id)

wx.cloud.callFunction({

name:

'houchu',

data:

{

id:

e.currentTarget.dataset.id

}

}).then(res

=>

{

console.log('制作完成ok',

res)

if

(res.result

&&

res.result.stats

&&

res.result.stats.updated

>

0)

{

wx.showToast({

title:

'修改成功',

})

this.getMyOrderList()

}

else

{

wx.showToast({

icon:

'none',

title:

'提交失败',

})

}

}).catch(res

=>

{

console.log('制作完成failed',

res)

wx.showToast({

icon:

'none',

title:

'提交失败',

})

})

},

onGotUserInfo:

function

(e)

{

console.log('用户信息',

e)

},adminHouchu.wxml部分：

<view

class="content">

<view

class='mingxi'>

<block

wx:for="{{item.orderList}}"

wx:for-item="arr_item"

wx:key="key">

<view

class="mingxi_item">

<text>{{arr_}}</text>

<text

class="mingxi_price">{{arr_item.quantity}}份</text>

</view>

</block>

</view>

<view

wx:if="{{item.status!=-1}}"

class='coent_list'>

<label

wx:if="{{item.status==0}}"

class='dingdanbtn'

data-id='{{item._id}}'

bindtap='zhizuowancheng'>制作完成</label>

</view>

</view>

<view

class='dibuttxt'>用户名:{{userInfo.nickName}}</view>

<view

class='dibuttxt'>下单时间:{{item._createTime?filters.formatDate(item._createTime):''}}</view>

</view></view><view

wx:else

style="margin-top:16rpx;text-align:

center;">

<label

class='none_tab'>数据为空哦~~</label></view>5.4小程序样式的实现5.4.1小程序样式设计1、全局样式：app.wxss部分：.container

{

display:

flex;

flex-direction:

column;

min-height:

100%;}.my_item

{

width:

100%;

display:

flex;

flex-direction:

row;

align-items:

center;

padding:

17px;

background:

white;

border-bottom:

1px

solid

gainsboro;}.line_5px

{

height:

15px;}.line_8pt

{

height:

8pt;}.line_1px

{

height:

1px;

background:

gainsboro}.right_arrow

{

border:

solid

black;

border-width:

0

3px

3px

0;

padding:

3px;

position:

absolute;

right:

15px;

transform:

rotate(-45deg);

-webkit-transform:

rotate(-45deg);}图5.19首页图5.19首页①主页部分（home.js）：

onShow()

{

this.getTopBanner();

//请求顶部轮播图

searchKey

=

''

//每次返回首页时，清空搜索词

},

diancan()

{

if

(app.globalData.isNeedSaoMa)

{

wx.scanCode({

success:

res

=>

{

console.log('扫码结果',

res.result)

app.globalData.address

=

res.result

wx.navigateTo({

url:

this.checkFoodPage()

})

}

})

}

else

{

wx.navigateTo({

url:

this.checkFoodPage()

})

}

},

goToPhone()

{

wx.makePhoneCall({

phoneNumber:

'xxxxxxxxx'

//以本人联系电话示例

})

},

getSearchKey(e)

{

searchKey

=

e.detail.value

},

goSearch()

{

wx.navigateTo({

url:

this.checkFoodPage()

+

'?searchKey='

+

searchKey,

})

},②主页部分（home.wxss）：swiper

{

height:

380rpx;}.searchRoot

{

background:

rgb(255,

255,

255);

padding:

25rpx;

display:

flex;

flex-direction:

row;

justify-content:

space-between;}.searchInput

{

flex:

1;

height:

70rpx;

padding-left:

30rpx;

border:

1px

solid

#f4c903;

border-radius:

30rpx;}.searchImg

{

width:

70rpx;

height:

70rpx;

margin:

0

15rpx;}.category-panel1

{

height:

250px;

width:

100%;

display:

flex;

color:

#666;

flex-direction:

column;

font-size:

11px;

justify-content:

space-around;}.category-panel2

{

height:

90px;

width:

100%;

display:

flex;

color:

#666;

flex-direction:

row;

font-size:

11px;

justify-content:

space-around;}.category-item

{

display:

flex;

width:

60px;

text-align:

center;

flex-direction:

column;}.category-item-image

{

width:

50px;

height:

50px;

overflow:

unset;

padding:

15px

12px

0

6px;}.category-item-image1

{

width:

50px;

height:

45px;

overflow:

unset;

padding:

15px

12px

0

6px;}.kf_button

{

background-color:

rgba(255,

255,

255,

0);

padding:

0px

0px

0px

0px;

border:

0px;}.kf_button::after

{

border:

0px;}.category-item-text

{

margin-top:

11px;}.category-item-text1

{

margin-top:

0px;}③“我的”部分（me.wxss）：page

{

background:#f4c903;}.header

{

width:

100%;

display:

flex;

flex-direction:

column;

padding-bottom:

15px;

align-items:

center;

background:

#f4c903;}.btn-login{

padding:

8%;

background:

white;}.userinfo-avatar

{

border-radius:

128rpx;

width:

128rpx;

height:

128rpx;

margin-block-start:

10px;}.userinfo-nickname

{

margin-top:

20rpx;

font-size:

38rpx;}.runner_desc{

font-size:

10pt;

color:

red}.button

{

width:

100%;

background:

white;

border:

none;

text-align:

left;

padding:

0px;

margin:

0px;

line-height:

1.5;

font-size:

16px}.button::after

{

border:

none;

border-radius:

0;}5.4.2首页轮播图设计①home.js部分：

//页面可见

onShow()

{

this.getTopBanner();

//请求顶部轮播图

searchKey

=

''

//每次返回首页时，清空搜索词

},

//轮播图点击事件

goFood()

{

wx.navigateTo({

url:

this.checkFoodPage()

})

},

//获取首页顶部轮播图

getTopBanner()

{

wx.cloud.database().collection("lunbotu")

.get()

.then(res

=>

{

console.log("首页banner成功",

res.data)

if

(res.data

&&

res.data.length

>

0)

{

this.setData({

banner:

res.data

})

}

}).catch(res

=>

{

console.log("首页banner失败",

res)

})

}②home.wxml部分：<!--

顶部轮播图

--><view>

<swiper

indicator-dots="{{true}}"

indicator-color="#f4c903"

autoplay="true"

circular="true">

<block

wx:for="{{banner}}"

wx:key="banner">

<swiper-item

bindtap="goFood">

<image

src='{{item.picUrl}}'

mode="widthFix"

style="width:100%;height:100%;"

/>

</swiper-item>

</block>

</swiper></view>5.4.3菜品搜索功能设计图5.21②菜单页搜索结果图5.21②菜单页搜索结果图5.20①首页搜索①food.js部分：

onLoad(e)

{

let

searchKey

=

e.searchKey

if

(searchKey)

{

//搜索菜品

this.getFoodList('search',

searchKey)

this.setData({

searchKey:

searchKey

//搜索词

})

}

else

{

//获取菜品数据

this.getFoodList('getAll')

}

},

//获取用户输入的搜索词

getSearchKey(e)

{

this.setData({

searchKey:

e.detail.value

//搜索词

})

},

//搜索事件

goSearch()

{

this.getFoodList('search',

this.data.searchKey)

},

//获取菜品数据

getFoodList(action,

searchKey)

{

//获取购物车菜品

let

cartList

=

wx.getStorageSync('cart')

||

[];

wx.cloud.callFunction({

name:

"getFoodList",

data:

{

action:

action,

searchKey:

searchKey

}

}).then(res

=>

{

let

dataList

=

res.result.data;

console.log("菜品数据",

res)

//遍历

dataList.forEach(food

=>

{

food.quantity

=

0;

cartList.forEach(cart

=>

{

if

(cart._id

==

food._id)

{

food.quantity

=

cart.quantity

?

cart.quantity

:

0;

}

})

});

this.setData({

cartList:

cartList,

foodList:

dataList,

})

this.getTotalPrice()

}).catch(res

=>

{

console.log("菜品数据请求失败",

res)

})

},②food.wxml部分：<!--

搜索框

--><view

class="searchRoot"><input

class="searchInput"

bindconfirm='goSearch'

confirm-type='search'

bindinput="getSearchKey"

placeholder="搜索菜品"

value="{{searchKey}}"></input><image

class="searchImg"

bindtap="goSearch"

src="/image/sousuo.png"></image></view>第6章系统测试6.1开发者工具模拟测试6.1.1开发者工具测试介绍开发者工具程序测试主要有三大功能区：模拟器、调试工具和小程序操作区。其中，调试工具分为7大功能模块：Wxml：用于帮助开发者开发wxml转化后的界面。Console：开发者可以在此输入和调试代码；小程序的错误输出，会显示在此处。Network：用于观察和显示request和socket的请求情况。Appdata：用于显示当前项目运行时小程序AppData具体数据，实时地反映项目数据情况。此外还有Sources、Storage、Sensor功能模块，本测试中暂未涉及，故不作详细介绍。图6.1开发者工具调试器Console选项卡部分图6.1开发者工具调试器Console选项卡部分6.1.2开发者工具模拟测试开发者工具模拟测试中，尝试进行用户登录测试。在“我的”页微信授权登录后，可以看到调试器Console中回传了用户信息，包括昵称“微信用户”、用户地址“city”等（由于在开发者工具中模拟测试，没有实际地址可以获取）、用户头像图片图6.2登录后回传用户信息图示“avatarUrl”等信息，说明有数据回传，登录成功。图6.2登录后回传用户信息图示图6.3下单付款成功后回传数据图示开发者工具模拟测试中，尝试进行下单付款操作。可以在Console看到回传了支付成功的数据，获取到了订单编号”id”、是否成功”errMsg:ok”。并且在