從今天開始帶領大家實現一款云開發(fā)版的點餐小程序

視頻講解：《云開發(fā)后臺+微信掃碼點餐小程序+cms網頁管理后臺》

技術選型

1，前端

• 微信小程序原生框架
• css
• JavaScript

2，管理后臺

• 云開發(fā)Cms內容管理系統
• web網頁

3，數據后臺

• 小程序云開發(fā)
• 云函數
• 云數據庫
• 云存儲

效果預覽

1，小程序端

1-1，首頁

首頁有以下幾個功能點

• 1，點餐
• 2，菜單瀏覽
• 3，排號等位
• 4，飯店地址
• 5，頂部輪播圖
• 6，搜索菜品
• 7，熱門菜品推薦
  

這里點餐分兩種

• 1，可以設置直接點餐
  直接點餐：適合小型飯店，或者奶茶類的快餐店。直接就可以下單，不用識別桌號

• 2，也可設置掃碼點餐
  掃碼點餐適合中大型飯店，可以區(qū)分桌號，方便管理
  
  我后面會教大家如何生成桌號二維碼，只需要把對應桌號的二維碼貼在餐桌上，用戶點擊 掃碼點餐 識別二維碼，即可獲取到桌號信息。

1-2，菜品瀏覽頁

菜品瀏覽分兩種

• 1，不帶分類
  適合菜品少的時候
• 2，帶分類
  菜品多的時候，帶分類更方便客戶選擇

不帶分類

帶分類

1-3，搜索功能

我們這里搜索有兩個觸發(fā)方式

• 1，直接點擊搜索圖標
• 2，點擊鍵盤上的搜索鍵
  

1-4，搜索結果，支持模糊查詢

如我這里只搜'魚’，那么菜品中所有包含魚的都可以搜索到

1-5，購物車

首先菜品列表頁可以直接添加商品到購物車

購物車彈起后可以做如下操作

• 1，增刪單個菜品
• 2，清空購物車
• 3，刪除菜品

這些操作都和菜品列表是聯動的，也就是菜品列表和購物車里增刪個數，都是可以同步的。我會在項目預覽章節(jié)的視頻里做具體演示。

1-6，下單頁

下單頁就是確認訂單后進行下單支付的。有以下功能

• 1，點餐明細
• 2，價格計算
• 3，桌號地址
• 4，就餐人數
• 5，添加備注
• 6，點擊下單
  

1-7，支付頁

支付頁分兩種方式

• 1，模擬支付
  適合前期學習，畢業(yè)設計等演示類的場景。
• 2，真實微信支付
  適合商用，但是使用微信支付必須要有營業(yè)執(zhí)照，所以前期如果只是學習的話，建議使用模擬支付。

所以我們的源碼提供兩個版本

模擬支付

真實微信支付

1-8，我的訂單頁

我的訂單頁分以下幾個狀態(tài)

• 1，新下單待上餐
• 2，已上餐待評價
• 3，訂單完成
• 4，訂單取消
  

1-9，提交評論頁

我們可以對店家進行評論。

1-10，評價列表頁

可以查看所有評價和自己的評價

1-11，排號等位

可以看出，我們可以選擇就餐人數，排大桌或者小桌。我這里已排小桌為例

通過上圖可以看出

• 1，當前排號情況
• 2，我的排號
• 3，可以重新排號
• 4，到號時會有到號提示

后面我會把訂閱消息功能加進來，這樣到號后會有訂閱消息提示。

1-12，個人中心

個人中心分登錄和未登錄兩種狀態(tài)

未登錄

已登錄

1-13，微信授權登錄小程序

1-14，在線客服

客戶直接在小程序里發(fā)消息給客服

客服可以在網頁端，或者微信端管理消息

網頁端客服

小程序端客服

1-15，意見反饋

客戶可以直接在小程序端提建議，建議里可以添加圖片

管理員可以在小程序后臺，查看客戶的反饋

1-16，新加飯店地址，導航功能

• 地圖上顯示飯店地址
• 飯店手機
• 飯店微信
• 導航到飯店
  
  
  可導航到飯店
  
  

2，后廚端和排號管理端

2-1，后廚端主要供后廚的廚師使用

• 1，可以查看當前新下單
• 2，完成后可以操作菜品完成
• 3，可以監(jiān)聽用戶新下單
• 4，有新訂單時會有語音提示
• 5，廚師登錄頁

語音提示我會在視頻課里具體演示

廚師登錄頁

廚師管理頁

可以查看待制作訂單

用戶新下單后，會有語音提示

2-2，排號管理頁

同樣也有登錄頁，和上面廚師登錄一樣，這里重點看下排號管理頁

管理員可以查看當前排號情況，可以叫號。

3，cms管理后臺

我們這里的可視化網頁后臺使用的時云開發(fā)自帶的cms(內容管理)

3-1，登錄頁

3-2，管理后臺

我們可以在這里

• 1，添加輪播圖，刪除輪播圖，修改輪播圖
• 2，添加菜品，刪除菜品，修改菜品，上架下架菜品
• 3，管理訂單
• 4，查看評價
• 5，管理后廚和排號管理員
• 6，查看排號數據

比如我查詢某個用戶的所有訂單

查詢所有新下單還未上菜的訂單

還有更多的功能，我會在視頻課里給大家用視頻來演示，這樣更直觀。

4，數據庫

數據庫我們這里用云開發(fā)自帶的云數據庫

配套資料

1，講解視頻

視頻課我會在B站免費提供給大家，歡迎關注，歡迎三連。
https://space.bilibili.com/419474640/video

2，配套筆記

配套筆記會在csdn上免費給到大家，歡迎關注，筆記會持續(xù)更新。
https://blog.csdn.net/qiushi_1990

3，支持石頭哥??

3-1，源碼和配套資源獲取

目前源碼和配套的一些資源暫時不免費，如果有需要的同學可以私聊石頭哥，拿米來換。

3-2，筆記電子書

筆記我也有整理一套電子書，大家也可以私聊石頭哥獲取電子書版的配套筆記。電子書筆記方便后期查詢知識點。

3-3，配置商業(yè)版點餐小程序

可以聯系石頭哥配置商業(yè)版的點餐小程序。

4，問題解答(●’?’●)

另外石頭哥提供配套解答服務。當然了，知識付費時代石頭哥解答是要米的，畢竟石頭哥精力有限，石頭哥也是要吃面包的。石頭哥有推出包月，包年解答服務。你在學習過程中有任何問題，或者工作中遇到任何編程問題，都可以來找石頭哥
石頭哥目前可以解答如下問題

• 小程序方面的問題
• 云開發(fā)方面的問題
• Java，springboot，Javaweb方面的問題
• 畢設方面的問題
• 安卓app開發(fā)方面的問題
• html+css+JavaScript方面的問題
• 前端開發(fā)的問題
• 后端開發(fā)的問題
• 面試找工作方面的問題
  

源碼版本

我目前提供下面兩個版本的源碼，不同的源碼適合不同的場景。后面也都會做具體講解，所以后面源碼導入部分一定要認真看，我模擬支付和真實支付都會做講解。

1，模擬支付版

• 這個版本適合畢業(yè)設計，初級學習等演示性的場合
• 不需要營業(yè)執(zhí)照

2，真實微信支付版

• 這個版本適合飯店，餐廳等商業(yè)場景使用
• 必須有營業(yè)執(zhí)照才可以

一，源碼導入和云開發(fā)的初始化

我源碼會在配套資料里給到付費用戶，年卡用戶也可以獲取到

1-1，源碼的下載

前期學習，只下載模擬支付版的源碼

1-2，源碼的導入

導入源碼的時候一定要把appid換成你自己的。appid需要注冊小程序才有的，所以學習這門課之前建議你先去看下我云開發(fā)基礎課：《零基礎人入門小程序云開發(fā)》

appid獲取的位置如下圖。

1-3，云開發(fā)的初始化

初始化云開發(fā)之前，必須先開通云開發(fā)。

1-3-1,初始化云開發(fā)環(huán)境id

點擊云開發(fā)，進入云開發(fā)控制臺。如果沒有這個圖標，說明你上面導入源碼時用的不是自己的appid。所以一定要用自己的appid

獲取環(huán)境id

把環(huán)境id復制到app.js里，把下面部分替換成你自己的環(huán)境id

1-3-2,云函數選擇環(huán)境

這里要注意，選擇的環(huán)境，必須和你app.js里填入的環(huán)境id保持一致。

1-4，云函數的部署

cloud目錄下的云函數都要部署一下

1-5，下單提示音頻的上傳

復制上傳好的音頻鏈接，到app.js里替換一下

二，開通Cms可視化網頁管理后臺

我們上面源碼導入成功，并把云開發(fā)環(huán)境初始化成功以后，接下來就來開通cms可視化網頁后臺

2-1，進入云開發(fā)控制臺開通內容管理(CMS)

如下圖所示，直接點擊開通內容管理(CMS)即可

點擊完開通以后，會有如下彈窗，直接點擊確定即可。不要被付費嚇著，官方每月會送我們一定的免費額度的。學習得話基本上夠用了。

上面點完確定后，我們只是開啟了按量付費功能，因為cms得使用必須要開通按量付費才可以得。所以還要再點一次開通。如下圖

點完開通后，會有如下彈窗，直接點擊下一步即可。

然后我們需要設置登錄內容管理后臺得賬號和密碼，然后點擊確定即可

然后我們就等待內容管理功能得開通了，需要等幾分鐘。

開通成功以后，我們就可以通過下面這個地址進入管理后臺了。

2-2，登錄Cms可視化管理后臺

上面開通好以后，就可以通過后臺地址登錄管理后臺了。如下

2-3，創(chuàng)建項目

第一次登錄，我們還需要創(chuàng)建一個項目

自己輸入項目名和項目id即可

然后點擊進入剛剛創(chuàng)建的項目

到這里我們的cmd可視化網頁管理后臺就創(chuàng)建好了，下面教大家如何導入數據。

三，導入數據并修改數據庫權限

3-1，在cms后臺導入內容模型

把我為大家提前準備好的內容模型.json文件導入即可

導入完以后，可以看到多了以下幾個表

3-2，導入菜品和輪播圖數據

數據我已經為大家準備好了，大家只需要按照我視頻里的步驟把這兩個數據導入到對應的表里即可。

菜品導入成功如下

輪播圖導入成功如下

3-3，修改輪播圖和菜品表的權限

把lunbotu這個表的權限改為所有用戶可讀，僅創(chuàng)建者可讀寫。

把food這個表的權限改為 所有用戶可讀，僅創(chuàng)建者可讀寫。

3-4，修改訂單表和admin表的權限

把order這個表的權限改為所有用戶可讀，僅創(chuàng)建者可讀寫。

把admin這個表的權限改為所有用戶可讀，僅創(chuàng)建者可讀寫。

四，源碼的大致講解(選看)

首先來給大家說下pages里的每個頁面

新加了飯店地址頁面

cloud云函數如下

我會在視頻里把每個頁面的代碼快速大致的給大家講解下。這節(jié)可以作為選看，后面會手把手的教大家寫一款屬于自己的點餐小程序。

五，創(chuàng)建新項目

今天我們就來正式的開始手把手的開發(fā)了。后面的每一節(jié)都很重要，希望大家好好聽。

首先是創(chuàng)建新項目，這里一定要記得用自己的appid,所以你要提前去注冊一個屬于自己的小程序，小程序的注冊我小程序基礎課里有講過。
《10小時零基礎入門小程序開發(fā)》

5-1，appid獲取的位置如下圖

5-2，創(chuàng)建項目

注意事項： 一定要用自己的appid

六，首頁輪播圖的開發(fā)

6-1，要實現的效果圖

本節(jié)知識點

1. swiper組件
2. swiper-item組件
3. image組件
4. wx:for列表循環(huán)
5. 云數據庫請求數據
6. cms后臺操作
7. 輪播圖的增刪改查

這些知識點在基礎課里都有講解，所以這里不會講太細，會帶大家快速的過一遍。

6-2，對應文檔

• swiper組件文檔
  https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html
• swiper-item組件
  https://developers.weixin.qq.com/miniprogram/dev/component/swiper-item.html
• image組件
  https://developers.weixin.qq.com/miniprogram/dev/component/image.html

七，搜索功能的開發(fā)

7-1，搜索框的頁面布局

我會在視頻里教大家實現一個和上圖一樣的頁面。

7-2，本節(jié)知識點

1. input組件
2. 點擊事件
3. 模糊搜索
4. 獲取用戶輸入內容

我會在視頻里給大家做詳細講解。

7-3，對應文檔

這里只需要看一個重點知識點的文檔即可，其余的知識點我在基礎課里都有做講解。

• 模糊搜索關鍵知識點文檔：https://developers.weixin.qq.com/miniprogram/dev/wxcloud/reference-sdk-api/database/Database.RegExp.html

我們這一節(jié)的難點就在這個模糊搜索上，所以接下來會重點給大家講解這個模糊搜索。這也是我們實現搜索功能的關鍵所在。

• 核心代碼如下：

db.collection('food').where({
      name: db.RegExp({
        regexp: searchKey,
        options: 'i'
      })
    }).get()

八，九宮格分類布局的開發(fā)

就是下面紅色框里的這個區(qū)域

接下來就教大家如何開發(fā)這個區(qū)域。

8-1，去源碼里拿到圖片資源

首先去源碼的image目錄下，把我們需要的幾個圖片資源復制進來。

就是下面這幾個，如果你前面跟著石頭哥視頻課操作的話，所有的圖片資源應該都已經放好了。

8-2，wxml和wxss的編寫

這里先把整體代碼截圖給到大家，如下圖所示。

左側是wxml，右側是wxss樣式。這里每個分類都有自己的bindtap點擊事件，點擊后會跳轉到不同的頁面。

8-3，在js里編寫點擊事件

這里定義的點擊事件，就是點擊后做頁面跳轉，用到了 wx.navigateTo這個知識點。

對應的官方文檔如下。

其實小程序里頁面跳轉有下面4種方式的。

我們這里最常用的就是 wx.navigateTo 。其實這些知識點，我在小程序基礎入門課里有講的：https://edu.csdn.net/course/detail/9531

到這里我們的九宮格分類區(qū)域就編寫好了。

九，熱門菜品推薦

效果圖如下

9-1，wxml頁面布局

wxml頁面代碼如下，我會在視頻課程里具體講解

9-2，wxss樣式

wxss頁面代碼如下

這里把幾個重點知識給大家補充講解下。

9-2-1，標題超過指定寬度省略號

效果圖和核心代碼如下

9-2-2，在文字前面添加人民幣符號

9-2-3，查看更多居于右側

這里主要用了flex布局的justify-content屬性，用來定義了項目在主軸上的對齊方式

這里建議大家去百度下 flex 花5分鐘學習下，絕對保證你收益終身。

9-3，數據的獲取

我們這里可以有兩種方式請求到數據
1，直接通過云開發(fā)數據庫獲取數據
2，也可以通過云函數獲取數據

由于直接通云開發(fā)數據庫獲取數據，我基礎課里講了太多遍，這里我們就通過云函數來獲取。云函數代碼如下。

注意：云函數里面初始化云開發(fā)環(huán)境用下面的代碼

cloud.init({
  env: cloud.DYNAMIC_CURRENT_ENV
})

調用云函數的代碼如下

9-4，查看更多的點擊事件

如上圖所示，點擊查看更多時，依然是跳轉到菜品列表頁。

十，飯店信息(地圖標記，導航，聯系方式)

10-1，老規(guī)矩，先看效果圖

10-1-1，可以在地圖上顯示店鋪位置，地址，聯系方式

10-1-2，點擊位置可以調起導航功能

10-2，獲取經緯度

因為小程序內置的是騰訊地圖，所以你需要到騰訊地圖上查詢經緯度。
首先，你要明確一個事情，任何位置都有它的 經緯度 ，所以你首先要獲取到你想定位位置的經緯度。

騰訊地圖經緯度查詢：https://lbs.qq.com/tool/getpoint/index.html

如我這里的經緯度：30.353351,120.231010
要記住緯度在前，經度在后。所以我這里的緯度是30.353351，經度是120.231010

10-3，設置wxml頁面

我先把代碼截個圖出來。

然后把代碼貼出來給到大家

<map style="width:100%; height:700rpx;" longitude="{{longitude}}" latitude="{{latitude}}" scale="17"
  markers="{{markers}}"  bindmarkertap="navRoad" data-marker="{{markers[0]}}"
  show-location />
<view class="phone" bindtap="Call">
  地址：杭州市丁蘭廣場C座
</view>
<view class="phone" bindtap="Call">
  電話：2501902696(可點擊撥打)
</view>

這里我們用到了小程序的map組件來顯示地圖，可以直接設置經緯度和標記點。

10-4，編寫js代碼

我先把代碼截圖貼出來給到大家

然后把代碼給到大家

Page({
  data: {
    //店鋪經緯度
    latitude: 30.353351,
    longitude: 120.231010,
    //標記點
    markers: [{
      id: 0,
      name: "編程小石頭",
      address: "杭州市丁蘭廣場C座",
      latitude: 30.353351,
      longitude: 120.231010,
      width: 50,
      height: 50
    }]

  },
  //撥打電話
  Call() {
    wx.makePhoneCall({
      phoneNumber: '2501902696'
    })
  },
  //導航
  navRoad(event) {
    console.log(event)
    wx.getLocation({ //獲取當前經緯度
      type: 'wgs84', //返回可以用于wx.openLocation的經緯度，
      success: function (res) {
        wx.openLocation({ //?使用微信內置地圖查看位置。
          latitude: event.currentTarget.dataset.marker.latitude, //要去的緯度-地址
          longitude: event.currentTarget.dataset.marker.longitude, //要去的經度-地址
          name: event.currentTarget.dataset.marker.name,
          address: event.currentTarget.dataset.marker.address
        })
      }
    })
  }
})

這里其實就點擊導航事件比較麻煩些，其他的都還好。注釋里給大家標的很清楚了。

10-5，設置定位權限

到這里其實代碼已經完成了，但是我們導航的時候需要用到用戶的位置權限，所以我們要在app.json里設置用戶授權

如果不設置，點擊導航會有如下提示。

所以我們要在app.json里設置

  "permission": {
    "scope.userLocation": {
      "desc": "導航需要" 
    }
  },

到這里我們就可以很方便的讓用戶找到我們了。

十一，授權登錄與退出

我們的項目開發(fā)多多少少的都會用到用戶的一些信息，比如頭像，昵稱，性別等。而這些信息的獲取，小程序也為我們提供好了方法。

11-1,認識wx.getUserProfile方法

對應的文檔：https://developers.weixin.qq.com/miniprogram/dev/api/open-api/user-info/wx.getUserProfile.html

使用這個方法可以獲取如下的用戶信息

11-2，授權彈窗

一般我的使用上面的wx.getUserProfile方法獲取用戶信息時，需要用戶授權的。一般授權彈窗如下。

只有用戶點擊允許以后才可以獲取用戶信息。

不彈起授權彈窗解決方案

有的同學用這個方法時，不會彈起上面的彈窗，有可能是因為基礎庫版本太低，這里建議升級到最新版的基礎庫。

11-3，授權登錄核心代碼

等下視頻課程里會帶著大家一起敲代碼，這里先把一些核心代碼貼出來。其實核心代碼官方文檔里有提供的。

這里為了方便日后大家使用，我貼出來給到大家。這里要注意 desc必須保留，里面的描述盡量寫的規(guī)范些。因為

    wx.getUserProfile({
      desc: '用于完善會員資料', // 聲明獲取用戶個人信息后的用途，后續(xù)會展示在彈窗中，請謹慎填寫
      success: (res) => {
      }
    })

11-4，頂部圓形頭像和昵稱

其實這里倒是挺簡單，重點知識只有一個圓形圖片的實現這里只需要一個image組件和一個text組件即可。通過css的border-radius就可以來設置圓形圖像了，我小程序基礎里也有講過的，核心代碼如下。

11-5，本地緩存的講解

11-5-1，使用wx.setStorageSync緩存

這里緩存我們主要用到了wx.setStorageSync 對應的官方文檔：
https://developers.weixin.qq.com/miniprogram/dev/api/storage/wx.setStorageSync.html

11-5-2，緩存數據的查看

如下圖所示，就是我們的本地緩存數據

11-5-3，使用wx.getStorageSync獲取緩存

對應的官方文檔：https://developers.weixin.qq.com/miniprogram/dev/api/storage/wx.getStorageSync.html

11-6，退出登錄的編寫

退出登錄其實很簡單，就實現一個點擊事件就可以了

然后js里具體代碼就下面這幾行就夠了

11-7，完整的項目代碼

我這里把wxml和js的完整代碼貼出來給到大家
index.wxml

<button wx:if="{{!userInfo}}" bindtap="login">授權登錄</button>
<view wx:else class="root">
  <image class="touxiang" src="{{userInfo.avatarUrl}}"></image>
  <text class="nicheng">{{userInfo.nickName}}</text>
  <button bindtap="loginOut">退出登錄</button>
</view>

index.js

Page({
  data: {
    userInfo: ''
  },
  onLoad() {
    let user = wx.getStorageSync('user')
    console.log('進入小程序的index頁面獲取緩存', user)
    this.setData({
      userInfo: user
    })
  },
  // 授權登錄
  login() {
    wx.getUserProfile({
      desc: '必須授權才可以繼續(xù)使用',
      success: res => {
        let user = res.userInfo
        // 把用戶信息緩存到本地
        wx.setStorageSync('user', user)
        console.log("用戶信息", user)
        this.setData({
          userInfo: user
        })
      },
      fail: res => {
        console.log('授權失敗', res)
      }
    })
  },
  // 退出登錄
  loginOut() {
    this.setData({
      userInfo: ''
    })
    wx.setStorageSync('user', null)
  }
})

index.wxss

.root {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.touxiang {
  width: 200rpx;
  height: 200rpx;
  border-radius: 50%;
  margin-top: 30rpx;
  margin-bottom: 10rpx;
}

我會在視頻里帶大家做具體代碼的編寫。
《小程序入門》

十二，個人中心的編寫

今天我們就來講解下個人中心的編寫。

12-1,用css畫個箭頭

好多同學都會認為，我們下面這個箭頭是個圖片，其實不是，這個箭頭是純css代碼畫出來的。

代碼如下：

.right_arrow {
  border: solid black;
  border-width: 0 3px 3px 0;
  padding: 3px;
  position: absolute;
  right: 15px;
  /* margin-left: 66%; */
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}

你如果不想用這個css畫的箭頭，自己去網上找個箭頭圖片，放到這里也可以，記得圖片是用image組件來顯示的就可以了。

我會在視頻里把css畫的箭頭和圖片箭頭都給大家演示一遍。大家自己決定用css箭頭還是圖片箭頭。

12-2，條目布局的實現

我們這里以我的訂單條目為例

可以看到核心代碼如下

.my_item {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 17px;
  background: white;
  border-bottom: 1px solid gainsboro;
}

.right_arrow {
  border: solid black;
  border-width: 0 3px 3px 0;
  padding: 3px;
  position: absolute;
  right: 15px;
  /* margin-left: 66%; */
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}

12-3，在線客服和意見反饋

我們其實在首頁開發(fā)的時候已經講過頁面的跳轉是用wx.navigateTo方法實現的，所以這里頁面跳轉不做講解了，這里重點說的是下面兩個條目的點擊跳轉。

這里的反饋建議和在線客服都是用的小程序官方自帶的頁面。也就是我們點擊“反饋建議”和“在線客服”跳轉到的是小程序官方的頁面，不需要我們開發(fā)。如下。

12-3-1，在線客服

客戶直接在小程序里發(fā)消息給客服

客服可以在網頁端，或者微信端管理消息

網頁端客服

小程序端客服

12-3-2，意見反饋

客戶可以直接在小程序端提建議，建議里可以添加圖片

管理員可以在小程序后臺，查看客戶的反饋

所以我們這里需要做的就是使用官方自帶的功能。而這兩個功能都是通過button按鈕來實現的。

我們這里用到了button的open-type屬性?？梢钥聪挛覀兇a里用的就是這個屬性。

好多同學問石頭哥，在線客服和意見反饋是怎么實現的。其實就是上面幾行代碼就可以輕松的實現了，因為主要功能小程序官方已經幫我們實現了，我們只需要通過button打開對應的open-type就行了。

12-3-3，消除button的默認樣式

因為button自帶一些樣式，我們的在線客服和意見反饋又必須通過button打開，所以我們要想辦法消除button的默認樣式。
重點代碼如下：

我會在視頻里給大家演示不消除css默認樣式帶來的影響，如下圖所示，不去除button默認樣式，會很難看。

十三，搜索頁面的開發(fā)

還記得我們前面講首頁開發(fā)的時候有順便講了點搜索功能

但是第七章，只是簡單的講了下邏輯的實現。就是可以請求到數據，但是數據沒有用頁面顯示出來。

所以今天就來手把手的教大家把搜索到的數據顯示到頁面上。
顯示效果如下。

13-1，搜索頁面效果圖

可以看出我們的菜品搜索頁，有頂部搜索框，和底部的菜品搜索結果列表。

13-2，搜索頁頂部搜索框

可以看出我們搜索頁頂部的搜索框和首頁的搜索框基本上一模一樣，所以我們布局上只需要把首頁的搜索框復制過來就行了，正規(guī)的做法應該是抽取為一個自定義組件。但是我們本節(jié)的重點不是自定義組件，所以我們這里就在搜索頁重新寫下搜索框就行了。

和首頁搜索框唯一不同的就是我們在首頁輸入的搜索詞要自動填充到搜索框里，其實就是設置下input的value屬性。

這里就不再帶著大家一點點的敲代碼了，這部分可以去看下前面首頁的講解內容。

13-3，搜索結果頁的編寫

細心的同學可以看出我們搜索結果列表和我們首頁的熱門推薦列表長得基本上差不多，唯一不同的就是我們搜索頁可以做菜品的添加和減少。
所以我們這里的布局也可以直接復用首頁熱門推薦的。

唯一需要我們單獨寫的就是這個加減菜品的按鈕了。

其實這里的按鈕就是兩個圖片和一個數字。這里我會在視頻里手把手的教大家把這里寫出來。

<!-- 菜品列表 -->
<view wx:for="{{foodList}}" class="item" bindtap="click2">
  <image class="item_img" src="{{item.icon}}"></image>
  <view>
    <view class="item_title">{{item.name}}</view>
    <view class="item_sell">銷量:{{item.sell}}</view>
    <view class="bottom_root">
      <view class="item_price">{{item.price}}</view>
      <image bindtap="jian" data-id="{{item._id}}" class="jiajian" src="../../image/jian.png"></image>
      <text class="num">{{item.num?item.num:0}}</text>
      <image bindtap="jia" data-id="{{item._id}}" class="jiajian" src="../../image/jia.png"></image>
    </view>
  </view>
</view>

13-4，加減菜品的邏輯實現

其實這里做菜品的加減就是實現對應的點擊事件，然后在點擊事件里實現對應菜品數量的加減就可以了。這里我也會在視頻里手把手的教大家。

十四，購物車和總價

由于這一章的購物車涉及的邏輯比較多，所以大家筆記就作為參考就行，重點還是要跟著這節(jié)的視頻課一步步的跟著石頭哥去敲代碼。

14-1，我們先來實現底部總價計算匯總功能

如下圖所示

我會在視頻里教大家具體的代碼實現。

14-2，購物總價和數量的邏輯

如上圖所示，總計4件總價39，就是通過在js里的邏輯代碼實現的。

當然了這只是其中一部分代碼，完整的代碼和邏輯我會在視頻里一步步帶著大家去實現。

14-3，購物車數據的存放

我們需要在js頁面里定義一個數組來存放購物車數據。在我們每次添加或者減少菜品的時候，這些數據都會同步的更新到我們的購物車數組里面。

有一個比較重要的知識點，這里給大家補充下，如下所示

14-3-1，檢查數組里的對象是否包含某個字段

find() 方法返回數組中滿足提供的測試函數的第一個元素的值。否則返回 undefined。

var objArr = [
 {id:1, name:'jiankian'}, {id:23, name:'anan'},
 {id:188, name:'superme'}, {id:233, name:'jobs'}, 
 {id:288, name:'bill', age:89}, {id:333}
]
var ret2 = objArr.find((v) => {
    return v.id == 233;
});
console.log(ret2);
// return {id:233, name:'jobs'}
// 當返回undefined時，則說明objArr中沒有，可以添加

14-3-2，查詢數組里某個對象所在的下標

findIndex()方法返回數組中滿足提供的測試函數的第一個元素的索引。否則返回-1。

var objArr = [{id:1, name:'jiankian'}, {id:23, name:'anan'}, {id:188, name:'superme'}, {id:233, name:'jobs'}, {id:288, name:'bill', age:89}, {id:333}] ;
var ret2 = objArr.findIndex((v) => {
    return v.id == 233;
});
console.log(ret2);
// return 3
// 當返回-1時，則說明objArr中沒有，可以添加了

14-3-3,刪除數組中指定的元素

array.splice(index,num)
index代表我們從何處開始刪除，就是元素的下標從0開始，num代表我們刪除幾個元素。

    let arr = [0, 1, 2, 3, 4, 5]
    arr.splice(0, 2)
    console.log(arr)//[2, 3, 4, 5]

如上面的例子，我們從下標0開始刪除兩個元素。這樣就是把元素0和1刪除了。

14-4，購物車蒙層的實現

如上圖所示，我們的購物車彈起的時候會有一個蒙層，一個購物列表，我這里先帶大家實現蒙層效果，如下所示。

wxml里需要一個蒙層，一個購物列表

wxss里主要靠下面代碼實現蒙層效果

這是實現蒙層的關鍵，里面的一些屬性如果沒有了解過可以自行百度學習下。當然這也是一部分代碼，由于購物車里涉及的邏輯比較多，我會盡量在視頻里帶著大家一步步來。

14-5，購物列表的實現

如上圖所示，我們購物車列表的實現和我們菜品列表基本上差不多，也用到了加減數量，但是要記住這里的加或者減少菜品和我們的菜品列表是要同步的，所以我們在點擊加或者減的時候，要處理的邏輯就特別多了，我也會在視頻里帶著大家一步步去實現的。
其實購物車列表里的加或者減的點擊和我們上面菜品列表里的加或者減的點擊是一樣的。

14-5-1,滑動沖突

由于我們的菜品列表和購物車列表出現在同一個頁面，會有滑動事件沖突的問題，所以在購物車列表的根布局的樣式里要添加 overflow: auto 屬性

14-6，緩存購物車數據

由于我們的購物車數據是要全局使用的，包括我們后面的確認訂單頁里也是需要購物車數據的，所以我們這里把購物車數據緩存在本地，而緩存的方法我們前面講的緩存登陸狀態(tài)是一樣的。

緩存很簡單，就是在用戶點擊加或者減的時候，把整合好的數據緩存在本地。如上圖所示一行代碼就可以實現了，重點還是要在緩存前先整合好購物車數據。購物車數據的整合我會在視頻里帶著大家一步步的來實現。

14-7，清空購物車里的某條菜品

我們購物車菜品列表的最右邊會有一個叉號，這個叉號就是快速的清空當前菜品。其實和我們點擊減號，當數量為0時實現的效果是一樣的，都是把當前菜品從購物車數組里剔除。

我會在講解視頻里帶著大家一步步的實現。