第1章緒論1.1項(xiàng)目開發(fā)背景現(xiàn)在的科技社會(huì)中，手機(jī)成為了每個(gè)人手中不可或缺的最好工具。騰訊公司的應(yīng)用微信是目前我國(guó)手機(jī)用戶中裝機(jī)量最大的軟件之一，截至2020年9月，微信平均日登錄用戶達(dá)到9億，其中微信公眾號(hào)的活躍粉絲數(shù)近8億，生活服務(wù)類小程序在其中是訪問(wèn)人數(shù)最多的一類。因此微信的用戶數(shù)量和小程序受眾人數(shù)較為龐大，廣大學(xué)生和企業(yè)員工作為手機(jī)用戶的主力軍，使用微信的基數(shù)也較為龐大?；邶嫶笥脩魯?shù)量進(jìn)行小程序的開發(fā)，目標(biāo)用戶群體如學(xué)生、員工等能夠享受到便利的服務(wù)。民以食為天，我國(guó)自古以來(lái)就對(duì)“吃”很重視。如今已經(jīng)從如何吃飽變成了如何吃得開心、滿意。而往往在點(diǎn)餐這一環(huán)節(jié)，傳統(tǒng)的點(diǎn)餐模式會(huì)讓大多數(shù)食客失去耐心；而現(xiàn)有的點(diǎn)餐應(yīng)用都有應(yīng)用體積龐大、應(yīng)用繁瑣的問(wèn)題。為此基于小程序的開發(fā)，用輕便簡(jiǎn)潔的模式來(lái)打造個(gè)性化服務(wù)，方便個(gè)人和商戶兩端直觀地點(diǎn)餐、備餐。在一次實(shí)地調(diào)研中，某公司食堂點(diǎn)餐模式仍舊為傳統(tǒng)紙筆記錄的形式，點(diǎn)餐訂餐效率低下，有時(shí)出現(xiàn)備餐不全、取餐菜品出錯(cuò)的問(wèn)題。為此，該公司負(fù)責(zé)人就此提出了針對(duì)食堂點(diǎn)餐，希望擁有一個(gè)方便的小程序來(lái)滿足智能化點(diǎn)餐的需求。因此本文以開發(fā)針對(duì)公司點(diǎn)餐的小程序作為基礎(chǔ)，探討目前的點(diǎn)餐程序的模式，并實(shí)際設(shè)計(jì)和開發(fā)一個(gè)微信點(diǎn)餐小程序。1.2主要工作本論文旨在設(shè)計(jì)和開發(fā)基于小程序?qū)崿F(xiàn)的點(diǎn)餐系統(tǒng)。本論文使用軟件工程的開發(fā)流程進(jìn)行開發(fā)，包括可行性分析、需求分析、系統(tǒng)總體設(shè)計(jì)和詳細(xì)設(shè)計(jì)、系統(tǒng)測(cè)試等環(huán)節(jié)。需求分析階段，根據(jù)項(xiàng)目開始前的調(diào)查工作，以及部分網(wǎng)上資料來(lái)源進(jìn)行需求分析。在系統(tǒng)總體設(shè)計(jì)階段，會(huì)根據(jù)需求設(shè)計(jì)出E-R圖，并詳細(xì)介紹圖表內(nèi)容。在詳細(xì)設(shè)計(jì)階段，根據(jù)不同子模塊進(jìn)行對(duì)應(yīng)的編程，并給出代碼部分相關(guān)截圖展示。在系統(tǒng)測(cè)試階段，將進(jìn)行模擬機(jī)測(cè)試以及真機(jī)測(cè)試等方式，將最終成果以截圖的形式展示在系統(tǒng)測(cè)試部分中。1.3論文結(jié)構(gòu)安排本論文結(jié)構(gòu)安排如下：第一章為緒論。第二章為通過(guò)對(duì)市場(chǎng)和技術(shù)的可行性分析之后，給出基于微信小程序的食堂點(diǎn)餐系統(tǒng)的可行性分析。第三章提供了基于微信小程序的食堂點(diǎn)餐系統(tǒng)需求分析。第四章是基于微信小程序的食堂點(diǎn)餐系統(tǒng)的總體設(shè)計(jì)，介紹相關(guān)使用的技術(shù)，給出相關(guān)E-R圖，并給出系統(tǒng)功能圖。第五章介紹了系統(tǒng)的詳細(xì)設(shè)計(jì)，這一章里針對(duì)具體功能給出設(shè)計(jì)思路，并給出相關(guān)代碼展示。第六章為系統(tǒng)測(cè)試，這一章中將進(jìn)行開發(fā)者工具中模擬展示，以及真機(jī)測(cè)試部分，并且給出相關(guān)測(cè)試界面的截圖。第七章為總結(jié)與展望，這一章總結(jié)本項(xiàng)目的開發(fā)過(guò)程，并對(duì)基于微信小程序的食堂點(diǎn)餐系統(tǒng)的不足之處進(jìn)行經(jīng)驗(yàn)總結(jié)，同時(shí)展望未來(lái)相關(guān)發(fā)展。第2章可行性分析2.1市場(chǎng)可行性市場(chǎng)可行性研究是一個(gè)項(xiàng)目的建設(shè)是否符合社會(huì)或市場(chǎng)的需要，只有當(dāng)項(xiàng)目提供的產(chǎn)品或服務(wù)能諸方面滿足社會(huì)或市場(chǎng)近期與遠(yuǎn)期需要時(shí)，它的建設(shè)才是有意義的。因此，在進(jìn)行項(xiàng)目可行性研究時(shí)，首先要進(jìn)行市場(chǎng)可行性研究。在現(xiàn)代社會(huì)，智能手機(jī)憑借便攜、智能、功能多樣的特點(diǎn)，幾乎成為了大家出行的必備工具。我國(guó)目前的政策推行“互聯(lián)網(wǎng)+”的新模式，餐飲業(yè)與互聯(lián)網(wǎng)技術(shù)之間有了更深度的融合和應(yīng)用。點(diǎn)餐軟件層面，有美團(tuán)、餓了么、百度外賣等專注外賣的點(diǎn)餐平臺(tái)；另外傳統(tǒng)西式快餐廳肯德基、麥當(dāng)勞也有自己的點(diǎn)餐配送服務(wù)。而目前缺乏針對(duì)在校學(xué)生、在職員工的微信小程序來(lái)為這類人群服務(wù)，市場(chǎng)上存在一定的空缺?；谖⑿判〕绦虻氖程命c(diǎn)餐系統(tǒng)的開發(fā)設(shè)計(jì)，就能滿足學(xué)生、員工對(duì)此方面的需求，同時(shí)彌補(bǔ)相關(guān)空缺。因此，食堂需要這樣一個(gè)多方面的綜合網(wǎng)絡(luò)平臺(tái)，在為學(xué)生、員工提供點(diǎn)餐的便利服務(wù)的同時(shí)，也提高了生活服務(wù)、后勤保障運(yùn)行的效率。2.2技術(shù)可行性本系統(tǒng)技術(shù)可行性主要有：①JS開發(fā)技術(shù)成熟，微信小程序技術(shù)成熟。②開發(fā)過(guò)程有對(duì)應(yīng)的微信小程序開發(fā)手冊(cè)、微信公眾平臺(tái)可以參考學(xué)習(xí)。③微信小程序開發(fā)者工具能提供相關(guān)開發(fā)工具、配置環(huán)境。④微信云開發(fā)技術(shù)提供數(shù)據(jù)庫(kù)和服務(wù)器，原生打通微信開放能力。

第3章需求分析3.1系統(tǒng)頂層需求分析基于微信小程序的食堂點(diǎn)餐系統(tǒng)分為點(diǎn)餐、支付、訂單、評(píng)價(jià)、管理員這五個(gè)模塊。圖3.1為本系統(tǒng)的頂層需求結(jié)構(gòu)。圖3圖3.SEQ圖表\*ARABIC1基于微信小程序的食堂點(diǎn)餐系統(tǒng)需求結(jié)構(gòu)圖3.2系統(tǒng)各模塊需求分析3.2.1點(diǎn)餐點(diǎn)餐界面是系統(tǒng)的核心模塊，主要功能是負(fù)責(zé)菜單展示以及點(diǎn)餐和食客的支付。食客在點(diǎn)餐頁(yè)面可以查看菜品圖、菜品名、菜品價(jià)格、銷量等信息作為點(diǎn)餐參考，當(dāng)確定需要的菜品后，選擇加入購(gòu)物車，在購(gòu)物車中選擇支付方式，完成支付后，生成一筆訂單，食客端點(diǎn)餐的流程就完成了。圖3.圖3.SEQ圖表\*ARABIC2點(diǎn)餐模塊流程圖3.2.2“我的”圖3.3“我的”模塊用例圖圖3.3“我的”模塊用例圖3.2.3管理員管理員模塊作為便利管理員操作的模塊，整合到小程序當(dāng)中。在進(jìn)入管理員模塊后，需要成功登錄到管理員頁(yè)面，才能進(jìn)行下一步操作。在管理員頁(yè)面，可以看到后廚管理訂單，此處可以收到來(lái)自食客點(diǎn)餐端的訂單，顯示為待制作菜品。制作完成后，點(diǎn)擊并確認(rèn)上菜，食客就可以取餐。后廚可以查看食客的評(píng)價(jià)情況，以及訂單是否完成，圖3.4管理員模塊用例圖圖3.4管理員模塊用例圖第4章系統(tǒng)總體設(shè)計(jì)4.1開發(fā)技術(shù)簡(jiǎn)介本節(jié)介紹基于微信小程序的食堂點(diǎn)餐系統(tǒng)開發(fā)時(shí)所用的一些技術(shù)和開發(fā)環(huán)境。用到的開發(fā)技術(shù)主要有：①前端：WXML、WXSS、JavaScript；②后端：微信小程序云開發(fā)；③云開發(fā)提供的JSON數(shù)據(jù)庫(kù)。系統(tǒng)開發(fā)環(huán)境：微信小程序開發(fā)者工具、VSCode，操作系統(tǒng)WIN10、CPUi5-7300HQ、內(nèi)存16G。WXML：用以框架設(shè)計(jì)，結(jié)合基礎(chǔ)組件、事件系統(tǒng)，構(gòu)建出頁(yè)面的結(jié)構(gòu)。WXSS：一種類似于CSS的語(yǔ)言，用于描述WXML的組件樣式，決定WXML的組件如何顯示。JavaScript：作為即時(shí)編譯腳本語(yǔ)言用以開發(fā)web頁(yè)面。4.2系統(tǒng)功能圖4.2.1系統(tǒng)功能圖基于微信小程序的食堂點(diǎn)餐系統(tǒng)主要由客戶端（基于微信小程序和手機(jī)微信APP）、小程序管理端、WEB管理端所組成。其中客戶端、小程序管理端即為所研究的微信小程序的食堂點(diǎn)餐系統(tǒng)，WEB管理端由微信小程序云開發(fā)的內(nèi)容管理系統(tǒng)CMS來(lái)進(jìn)行。主要包括以下三個(gè)主要的功能模塊，其中點(diǎn)餐、“我的”兩個(gè)模塊為主要模塊，管理員模塊作為管理員入口整合進(jìn)入小程序系統(tǒng)中。三個(gè)模塊下還有相對(duì)應(yīng)的子模塊，通過(guò)實(shí)現(xiàn)子模塊從而實(shí)現(xiàn)整個(gè)系統(tǒng)的功能，提供一個(gè)完整的小程序上的點(diǎn)餐服務(wù)。圖4.1微信點(diǎn)餐小程序系統(tǒng)功能圖圖4.1微信點(diǎn)餐小程序系統(tǒng)功能圖4.2.2小程序與服務(wù)器交互圖圖4.2微信點(diǎn)餐小程序與服務(wù)器端交互的流程圖微信小程序用戶與小程序與服務(wù)器之間交互的流程圖如下圖所示。圖4.2微信點(diǎn)餐小程序與服務(wù)器端交互的流程圖4.3數(shù)據(jù)庫(kù)設(shè)計(jì)4.3.1E-R圖點(diǎn)餐系統(tǒng)的E-R圖如下圖所示。菜品包括菜品編號(hào)、菜名、價(jià)格、銷量的屬性；下單后，訂單包括訂單編號(hào)、訂單發(fā)生時(shí)間、訂單包括菜品、訂單支付金額的屬性；訂單完成后需要評(píng)價(jià)，評(píng)價(jià)里有當(dāng)前訂單的評(píng)價(jià)和歷史訂單評(píng)價(jià)兩個(gè)屬性；最后管理員負(fù)責(zé)管理菜品以及獲取評(píng)價(jià)。圖4.3小程序圖4.3小程序點(diǎn)餐系統(tǒng)E-R圖4.3.2關(guān)系表設(shè)計(jì)1、菜品關(guān)系表表4-1food表序列列名類型可空注釋1idstringNotnull由系統(tǒng)自動(dòng)生成的id2_createTimenumberNotnull由系統(tǒng)自動(dòng)生成的創(chuàng)造時(shí)間屬性3_updateTimenumberNotnull由系統(tǒng)自動(dòng)生成的更新時(shí)間屬性4fenleistringNull菜品分類5iconstringNull菜品圖6namestringNull菜品名稱7pricenumberNull菜品價(jià)格8sellnumberNull菜品銷量9statusstringNotnull菜品上架狀態(tài)2、訂單關(guān)系表表4-2order表序列列名類型可空注釋1idstringNotnull由系統(tǒng)自動(dòng)生成的id2_createTimenumberNotnull由系統(tǒng)自動(dòng)生成的創(chuàng)造時(shí)間屬性3_openidstringNotnull小程序開發(fā)必要的openid4addressstringNull店內(nèi)下單5beizhustringNull備注6namestringNull用戶名7orderListarrayNull點(diǎn)餐訂單8renshunumberNull人數(shù)9statusnumberNull大桌或小桌10totalPricestringNull總價(jià)3、評(píng)論關(guān)系表表4-3pinglun表序列列名類型可空注釋1idstringNotnull由系統(tǒng)自動(dòng)生成的id2_createTimenumberNotnull由系統(tǒng)自動(dòng)生成的創(chuàng)造時(shí)間屬性3_openidstringNotnull小程序開發(fā)必要的openid4avatarUrlstringNull用戶頭像5contentstringNull評(píng)論內(nèi)容6namestringNull用戶名7orderIdstringNull訂單號(hào)4、管理員登錄關(guān)系表表4-4admin表序列列名類型可空注釋1idstringNotnull由系統(tǒng)自動(dòng)生成的id2_createTimenumberNotnull由系統(tǒng)自動(dòng)生成的創(chuàng)造時(shí)間屬性3_updateTimenumberNotnull由系統(tǒng)自動(dòng)生成的更新時(shí)間屬性4namestringNull管理員用戶名5passwordstringNull管理員登錄密碼

第5章系統(tǒng)總體設(shè)計(jì)本章介紹基于微信小程序的食堂點(diǎn)餐系統(tǒng)的詳細(xì)設(shè)計(jì)與實(shí)現(xiàn)。本章將通過(guò)相關(guān)核心代碼、系統(tǒng)運(yùn)行截圖，針對(duì)點(diǎn)餐、“我的”、管理員三大功能模塊進(jìn)行展示，另外將頁(yè)面設(shè)計(jì)也將展示。5.1點(diǎn)餐模塊的實(shí)現(xiàn)5.1.1功能介紹進(jìn)入微信點(diǎn)餐小程序，若要進(jìn)行點(diǎn)餐服務(wù)，則首先需要登錄小程序。在“我的”頁(yè)面微信授權(quán)登錄小程序后，就可以回到首頁(yè)進(jìn)行點(diǎn)餐了。圖5.3③首頁(yè)圖5.2②授權(quán)登錄圖5.3③首頁(yè)圖5.2②授權(quán)登錄圖5.1①“我的”頁(yè)圖5.6⑥完成訂單圖5.5⑤支付頁(yè)圖5.4④菜單頁(yè)點(diǎn)餐5.1.2圖5.6⑥完成訂單圖5.5⑤支付頁(yè)圖5.4④菜單頁(yè)點(diǎn)餐1、點(diǎn)餐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'>訂單編號(hào):{{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'>下單時(shí)間:{{item._createTime?filters.formatDate(item._createTime):''}}</view>

</view></view><view

wx:else

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

center;">

<label

class='none_tab'>數(shù)據(jù)為空哦~~</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">點(diǎn)餐明細(xì)</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">合計(jì)：<span>{{totalPrice}}元，{{totalNum}}份</span></view><view

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

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

focus

placeholder="請(qǐng)輸入用餐人數(shù)"

type="number"

bindinput="getInputNum"

value="{{diner_num}}"

/>5.2“我的”模塊的實(shí)現(xiàn)5.2.1功能介紹初次使用小程序，需要先微信授權(quán)登錄到小程序，才能繼續(xù)使用。由于微信授權(quán)登錄屬于微信自帶的功能，登陸后在“我的”頁(yè)通過(guò)查看頭像和昵稱則可以判斷是否登錄成功。后臺(tái)可以看到有數(shù)據(jù)的回傳，證明登錄成功?？梢酝ㄟ^(guò)“我的”頁(yè)查看訂單情況，點(diǎn)擊進(jìn)入“我的訂單”即可以看到“待上餐”、“待評(píng)價(jià)”、“已完成”、“已取消”四個(gè)狀態(tài)的訂單情況，換言之，在此頁(yè)可以跟蹤訂單的進(jìn)度，也可以查看訂單點(diǎn)餐菜品、總價(jià)、下單時(shí)間等等詳細(xì)信息。另外在“待評(píng)價(jià)”分頁(yè)，用戶需要進(jìn)行對(duì)訂單的評(píng)價(jià)，評(píng)價(jià)完成后才完成一次完整的點(diǎn)餐評(píng)價(jià)流程。在“我的”頁(yè)還可以查看評(píng)價(jià)，點(diǎn)擊進(jìn)入“評(píng)價(jià)列表”進(jìn)入評(píng)論查看歷史評(píng)價(jià)，可以查看全部評(píng)價(jià)，也可以查看我的評(píng)價(jià)?！拔业摹表?yè)面還提供了在線客服服務(wù)，這一功能由微信的在線客服功能實(shí)現(xiàn)，能夠及時(shí)與綁定小程序的管理員進(jìn)行微信聊天聯(lián)系，較為便利。圖5.11⑤在線客服對(duì)話圖5.10④查看歷史評(píng)價(jià)圖5.9圖5.11⑤在線客服對(duì)話圖5.10④查看歷史評(píng)價(jià)圖5.9②訂單狀態(tài)一覽圖5.8②授權(quán)登錄圖5.7①“我的”頁(yè)5.2.2代碼展示1、“我的”頁(yè)面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('登陸需要允許授權(quán)');

}},

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>評(píng)價(jià)列表</text>

<view

class='right_arrow'

/>

</view></view><view

class='my_item'>

<button

class="button"

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

<view

class='right_arrow'

/></view>2、評(píng)論頁(yè)面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("查詢?cè)u(píng)論成功",

res)

if

(res

&&

res.result)

{

let

dataList

=

res.result.data;

this.setData({

list:

dataList

})

}

else

{

this.setData({

list:

[]

})

}

}).catch(res

=>

{

console.log("查詢?cè)u(píng)論失敗",

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'>{{}}評(píng)論：</text>

</view>

</view>

<view

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

</view>

</view></view><view

wx:else

class='nothing'>

<label

class='none_tab'>數(shù)據(jù)為空哦~~</label></view>5.3管理員模塊的實(shí)現(xiàn)5.3.1功能介紹管理員模塊，實(shí)際是提供給食堂后廚工作人員的功能。首先管理員在小程序端的入口位于“我的”頁(yè)中“管理員登錄”一項(xiàng)，進(jìn)入后需要使用賬號(hào)與密碼，賬號(hào)密碼需要提前在數(shù)據(jù)庫(kù)中錄入，檢驗(yàn)通過(guò)后方可進(jìn)入管理員頁(yè)面。管理員頁(yè)面分為后廚人員管理訂單，此頁(yè)需要對(duì)訂單及時(shí)處理，菜品制作完成后，需要點(diǎn)擊制作完成，并通過(guò)確認(rèn)完成讓食客取餐。管理員頁(yè)面可以通過(guò)查看評(píng)論一覽，獲得來(lái)自食客的點(diǎn)評(píng)。具體內(nèi)容需要來(lái)到小程序云開發(fā)內(nèi)容管理系統(tǒng)CMS的WEB端對(duì)菜品、訂單、評(píng)論、進(jìn)行增刪改查，增減管理員、設(shè)置管理員密碼等也是在CMS中處理操作。

圖5.17⑥評(píng)論一覽圖5.16⑤訂單完成后圖5.15圖5.17⑥評(píng)論一覽圖5.16⑤訂單完成后圖5.15④后廚訂單管理圖5.14③管理員頁(yè)面圖5.13②管理員登錄頁(yè)圖5.12①管理員登錄入口圖5.18CMS系統(tǒng)后臺(tái)圖5.18CMS系統(tǒng)后臺(tái)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:

'賬號(hào)或密碼錯(cuò)誤',

})

}

}).catch(res

=>

{

console.log("登陸失敗",

res)

wx.showToast({

icon:

'none',

title:

'賬號(hào)或密碼錯(cuò)誤',

})

this.setData({

isAdmin:

false

})

})

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

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

class="container">

<view

class='line_1px'

/>

<view

class='item_root'>

賬號(hào)：

<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">評(píng)論一覽</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'>下單時(shí)間:{{item._createTime?filters.formatDate(item._createTime):''}}</view>

</view></view><view

wx:else

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

center;">

<label

class='none_tab'>數(shù)據(jù)為空哦~~</label></view>5.4小程序樣式的實(shí)現(xiàn)5.4.1小程序樣式設(shè)計(jì)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首頁(yè)圖5.19首頁(yè)①主頁(yè)部分（home.js）：

onShow()

{

this.getTopBanner();

//請(qǐng)求頂部輪播圖

searchKey

=

''

//每次返回首頁(yè)時(shí)，清空搜索詞

},

diancan()

{

if

(app.globalData.isNeedSaoMa)

{

wx.scanCode({

success:

res

=>

{

console.log('掃碼結(jié)果',

res.result)

app.globalData.address

=

res.result

wx.navigateTo({

url:

this.checkFoodPage()

})

}

})

}

else

{

wx.navigateTo({

url:

this.checkFoodPage()

})

}

},

goToPhone()

{

wx.makePhoneCall({

phoneNumber:

'xxxxxxxxx'

//以本人聯(lián)系電話示例

})

},

getSearchKey(e)

{

searchKey

=

e.detail.value

},

goSearch()

{

wx.navigateTo({

url:

this.checkFoodPage()

+

'?searchKey='

+

searchKey,

})

},②主頁(yè)部分（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首頁(yè)輪播圖設(shè)計(jì)①home.js部分：

//頁(yè)面可見

onShow()

{

this.getTopBanner();

//請(qǐng)求頂部輪播圖

searchKey

=

''

//每次返回首頁(yè)時(shí)，清空搜索詞

},

//輪播圖點(diǎn)擊事件

goFood()

{

wx.navigateTo({

url:

this.checkFoodPage()

})

},

//獲取首頁(yè)頂部輪播圖

getTopBanner()

{

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

.get()

.then(res

=>

{

console.log("首頁(yè)banner成功",

res.data)

if

(res.data

&&

res.data.length

>

0)

{

this.setData({

banner:

res.data

})

}

}).catch(res

=>

{

console.log("首頁(yè)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菜品搜索功能設(shè)計(jì)圖5.21②菜單頁(yè)搜索結(jié)果圖5.21②菜單頁(yè)搜索結(jié)果圖5.20①首頁(yè)搜索①food.js部分：

onLoad(e)

{

let

searchKey

=

e.searchKey

if

(searchKey)

{

//搜索菜品

this.getFoodList('search',

searchKey)

this.setData({

searchKey:

searchKey

//搜索詞

})

}

else

{

//獲取菜品數(shù)據(jù)

this.getFoodList('getAll')

}

},

//獲取用戶輸入的搜索詞

getSearchKey(e)

{

this.setData({

searchKey:

e.detail.value

//搜索詞

})

},

//搜索事件

goSearch()

{

this.getFoodList('search',

this.data.searchKey)

},

//獲取菜品數(shù)據(jù)

getFoodList(action,

searchKey)

{

//獲取購(gòu)物車菜品

let

cartList

=

wx.getStorageSync('cart')

||

[];

wx.cloud.callFunction({

name:

"getFoodList",

data:

{

action:

action,

searchKey:

searchKey

}

}).then(res

=>

{

let

dataList

=

res.result.data;

console.log("菜品數(shù)據(jù)",

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("菜品數(shù)據(jù)請(qǐng)求失敗",

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章系統(tǒng)測(cè)試6.1開發(fā)者工具模擬測(cè)試6.1.1開發(fā)者工具測(cè)試介紹開發(fā)者工具程序測(cè)試主要有三大功能區(qū)：模擬器、調(diào)試工具和小程序操作區(qū)。其中，調(diào)試工具分為7大功能模塊：Wxml：用于幫助開發(fā)者開發(fā)wxml轉(zhuǎn)化后的界面。Console：開發(fā)者可以在此輸入和調(diào)試代碼；小程序的錯(cuò)誤輸出，會(huì)顯示在此處。Network：用于觀察和顯示request和socket的請(qǐng)求情況。Appdata：用于顯示當(dāng)前項(xiàng)目運(yùn)行時(shí)小程序AppData具體數(shù)據(jù)，實(shí)時(shí)地反映項(xiàng)目數(shù)據(jù)情況。此外還有Sources、Storage、Sensor功能模塊，本測(cè)試中暫未涉及，故不作詳細(xì)介紹。圖6.1開發(fā)者工具調(diào)試器Console選項(xiàng)卡部分圖6.1開發(fā)者工具調(diào)試器Console選項(xiàng)卡部分6.1.2開發(fā)者工具模擬測(cè)試開發(fā)者工具模擬測(cè)試中，嘗試進(jìn)行用戶登錄測(cè)試。在“我的”頁(yè)微信授權(quán)登錄后，可以看到調(diào)試器Console中回傳了用戶信息，包括昵稱“微信用戶”、用戶地址“city”等（由于在開發(fā)者工具中模擬測(cè)試，沒(méi)有實(shí)際地址可以獲?。⒂脩纛^像圖片圖6.2登錄后回傳用戶信息圖示“avatarUrl”等信息，說(shuō)明有數(shù)據(jù)回傳，登錄成功。圖6.2登錄后回傳用戶信息圖示圖6.3下單付款成功后回傳數(shù)據(jù)圖示開發(fā)者工具模擬測(cè)試中，嘗試進(jìn)行下單付款操作?？梢栽贑onsole看到回傳了支付成功的數(shù)據(jù)，獲取到了訂單編號(hào)”id”、是否成功”errMsg:ok”。并且在