hello大家好，這是我的第一篇掘金文章，每天都在掘金上面看各位大佬的文章，終于鼓足勇氣決定寫(xiě)一篇屬于自己的文章了。今天呢，就給大家帶來(lái)一篇微信小程序（麥當勞點(diǎn)餐）+爬蟲(chóng)的詳解吧。大佬們可以忽略我這個(gè)小辣雞，但是如果你也是前端小白的話(huà)，可以認真看看喲，說(shuō)不定對你有幫助呢。

項目介紹

這個(gè)小程序是為最近參加的一個(gè)小活動(dòng)而制作的（為期兩天，3-4人組隊，完成一個(gè)小型項目）。說(shuō)實(shí)話(huà)，兩天怎么可能完成一個(gè)小程序呢？在前兩天，我們大致完成了小程序基本結構，然后由我完成收尾工作，前前后后歷時(shí)四天。

項目預覽圖

大家可以看到，這個(gè)小程序有四個(gè)頁(yè)面。

項目工作分配

由于我是組長(cháng)，所以工作的內容是由我分配的，我們組內四個(gè)成員，正好一人一個(gè)頁(yè)面，但是頁(yè)面有簡(jiǎn)單和復雜之分的，在我的暴政下，分到了復雜頁(yè)面的也不許抱怨！當然我是一個(gè)好組長(cháng)，我給自己分配了選餐的頁(yè)面并且爬蟲(chóng)爬數據也由我完成。所以下面我給大家分享的就是我完成的那個(gè)頁(yè)面。

項目開(kāi)始前的準備

一些準備工作：

• 申請賬號：進(jìn)入微信公眾平臺根據指示申請注冊賬號
• 開(kāi)發(fā)工具：VScode和微信開(kāi)發(fā)者工具
• 小程序官方文檔
• github申請存儲庫

使用的一些工具：

• 小程序云開(kāi)發(fā)數據庫功能
• 微信官方文檔
• markMan(可以進(jìn)行圖片測量和標注的工具)
• iconfont(阿里巴巴矢量圖標庫，有大量icon資源)
• github（由于這是我們一個(gè)小組完成的項目，所以需要建一個(gè)新的存儲庫，然后把大家拉進(jìn)來(lái)）

這里需要著(zhù)重說(shuō)明一下github命令行的操作，一個(gè)人開(kāi)發(fā)的時(shí)候，直接git push就行。但是多人合作開(kāi)發(fā)的時(shí)候，是不能直接git push的，如果別人先提交了項目，然后你再提交之前一定先要git pull，先把別人的項目拉下來(lái)，然后在git push，不然會(huì )導致沖突。

其實(shí)除了這些基本的準備工作以外，我們最應該做的就是思考。有一位前輩曾經(jīng)告訴我，在接手項目的時(shí)候，不應該第一時(shí)間就去敲代碼，而是應該閉上眼睛思考一會(huì )。具體思考什么，他也沒(méi)有細說(shuō)，但是通過(guò)這次，我領(lǐng)悟到了前輩的意思。首先，我們需要仔細的看一下設計稿，在腦子里搭建起來(lái)大致的框架，以便在寫(xiě)代碼的時(shí)候，可以提升效率。其次，我們應該思考數據如果存放，打個(gè)比方：在做電商頁(yè)面的時(shí)候，點(diǎn)擊左邊導航欄，右邊內容框顯示相應的數據，這就涉及到數據的存放了。所以在寫(xiě)代碼之前，我們就應該思考好這些邏輯。

項目完成過(guò)程

下圖就是我要完成的頁(yè)面。

第一開(kāi)始看見(jiàn)這個(gè)頁(yè)面的時(shí)候，心里其實(shí)并不慌，因為之前也做過(guò)一些電商的小程序，所以知道這個(gè)頁(yè)面的基本功能應該如何實(shí)現，所以在寫(xiě)代碼的過(guò)程中，還算很順利。

點(diǎn)餐頁(yè)面

當看見(jiàn)這個(gè)頁(yè)面的時(shí)候，腦子里大致就需要搭建一個(gè)結構框架。

• 頁(yè)面上端是一個(gè)swiper，用于滾動(dòng)不同的廣告。
• 頁(yè)面中間的部分是地址欄，點(diǎn)擊可以選擇不同的商店。
• 頁(yè)面中下部是一個(gè)點(diǎn)餐欄，左邊和右邊同時(shí)都要使用scroll-view。
• 尾部是一個(gè)類(lèi)似于購物車(chē)的東西，這一部分建議大家寫(xiě)成一個(gè)組件調用，為了減少代碼耦合度。（雖然我沒(méi)用組件）

話(huà)不多說(shuō)，下面來(lái)分析結構吧！

首先我們來(lái)看一下頁(yè)面的swiper部分

可以從圖片看出，這是一個(gè)廣告位置，用于放置最新的產(chǎn)品，這一部分其實(shí)很簡(jiǎn)單，直接引用小程序的swiper組件即可。

<swiper indicator-dots="true"         indicator-active-color="rgba(242,207,4,1)"         autoplay="true"         circular="true"         interval="4000"         duration="1000"         class="header"         wx:if="{{hidden}}">        <swiper-item wx:for="{{adImage}}" wx:key="index">            <image mode="aspectFill" class="headerImg" src="{{item.image}}" />        </swiper-item>    </swiper>復制代碼

這一部分代碼如上，需要提一下的就是swiper組件里面indicator-active-color這個(gè)屬性只接受rgba形式，不接受十六進(jìn)制顏色的輸入，大家可以自行在百度上面找轉換的方法。

接下來(lái)就是地址欄的部分

我這里放兩張圖片，方便對比：

這一部分的頁(yè)面并不算簡(jiǎn)單，首先外面的大盒子需要設置為彈性布局，方便左邊的地址欄，還有右邊的會(huì )員并排在一排。然后地址欄也需要設置為彈性布局，將flex-flow設置為column就可以沿Y軸分布，然后將align-items: center;就可以把店名還有地址放在方框中間。因為這個(gè)地址欄是可以點(diǎn)擊切換地址的，所以?xún)冗吘嗖豢梢詫?xiě)死，只能用彈性布局將它們放在中間，如果選擇的地址過(guò)長(cháng)的話(huà)，頁(yè)面也會(huì )自動(dòng)調整邊距，十分的美觀(guān)。

<!-- 地址欄 -->    <view class="middle" wx:if="{{hidden}}">        <navigator style="display: inline-block" target="" url="../index/index" hover-class="navigator-hover">            <view class="address">                <view>                    <view class="storeName">{{storeInfo.name}}</view>                    <view class="storeAdress">{{storeInfo.address}}</view>                </view>            </view>        </navigator>        <view class="member">            <image src="../../images/menuImg/u=324093054,273186418&fm=26&gp=0.jpg" class="menberImg" />            <text class="memberText">會(huì )員中心</text>        </view>    </view>復制代碼

.middle{    height: 110rpx;    width: 100%;    background-color: #fff;    display: flex;    border-bottom: 1px solid #eeeeee;}.address{    width: 600rpx;    height: 110rpx;    display: flex;    align-items: center;    border-right: 1px solid #eeeeee;}.storeName{    line-height: 40rpx;    font-size: 28rpx;    font-weight: bold;    margin-left: 40rpx;}.storeAdress{    line-height: 34rpx;    font-size: 22rpx;    color: #737373;    margin: 0 40rpx;}.member{    width: 150rpx;    height: 110rpx;    padding: 16rpx 0;    box-sizing: border-box;    display: flex;    flex-flow: column;    align-items: center;}.menberImg{    width: 40rpx;    height: 40rpx;    border-radius: 50%;    margin: 0 ;}.memberText{    position: relative;    width: 100%;    font-size: 24rpx;    line-height: 24rpx;    text-align: center;    margin-top: 14rpx;}復制代碼

因為這里是有一個(gè)點(diǎn)擊事件的，點(diǎn)擊過(guò)后，跳轉到選地址頁(yè)面，然后選完地址在跳轉回本頁(yè)面。那么在頁(yè)面與頁(yè)面之間是怎么傳遞數據的呢？在逛了一圈小程序開(kāi)發(fā)文檔之后，我們發(fā)現了一個(gè)api十分的好用，可以將頁(yè)面的數據暫時(shí)放入緩存區，以一個(gè)key來(lái)命名，然后在另外一個(gè)頁(yè)面，也用相同的key來(lái)獲取，就可以獲取緩存區的數據了，下面來(lái)看看代碼吧。

toDetail (e) {    let idx = e.currentTarget.dataset.idx;    if (idx) {      wx.setStorage({        key:"itemsIndex",        data: this.data.items[idx],      })    } else {      wx.setStorage({        key:"itemsIndex",        data: this.data.items[0]      })    }    wx.navigateTo({      url: '../menu/menu'    })  },復制代碼

這是通過(guò)另外一個(gè)頁(yè)面跳轉我的頁(yè)面的點(diǎn)擊事件，用wx.setStorage來(lái)存取數據。

wx.getStorage({      key: 'itemsIndex',      success: (res) => {        let storeInfo = this.data.storeInfo;        storeInfo.name = res.data.name;        storeInfo.address = res.data.address;        // console.log(storeInfo);        this.setData({          storeInfo        })      },      fail: () => {},      complete: () => {}    });復制代碼

這是在本頁(yè)面接收數據的方法，并且這個(gè)方法要寫(xiě)在onLoad生命周期函數里，這樣就可以在頁(yè)面加載的時(shí)候把獲取到的數據渲染到頁(yè)面上。

然后就是本頁(yè)面含金量最高的部分了

這一部分，應該是所有電商小程序都會(huì )用到的。其實(shí)說(shuō)難也不難，說(shuō)簡(jiǎn)單也不簡(jiǎn)單，只要認真看完我下面的講解，應該就了解要怎么做了。

相信大家看到這個(gè)截圖之后，內心都有一些自己的想法，那不妨繼續看看我的做法，然后與你們自己的想法融合在一起，看看是不是會(huì )迸發(fā)出新的火花呢！

<!-- 選餐欄 -->    <view class="menuContent">        <view class="scrollLeft">            <scroll-view scroll-y>                <navigator class="search" url="../" hover-class="none">                    <image class="searchImage" src="../../images/menuImg/sou-suo.png" />                    <text class="searchText">搜索</text>                </navigator>                <block wx:for="{{scrollLeft}}" wx:key="index">                    <view class="{{curIndex === index ? 'selected' : 'select'}}"                     bindtap="onSelect"                     data-index="{{index}}"                     data-id="{{item.id}}">                        <image src="{{item.url}}"                         class="selImg"                         wx:if="{{curIndex === index}}" />                        <view class="{{curIndex === index ? 'selectedText' : 'selectText'}}">                            {{item.name}}                        </view>                    </view>                </block>            </scroll-view>        </view>        <view class="scrollRight">            <scroll-view scroll-y scroll-into-view="{{toView}}"             scroll-with-animation="true"             bindscroll="scrollTop"             style="height: 1205rpx">                <block wx:for="{{scrollRight}}" wx:key="index">                    <view class="food"                     wx:for="{{item.detail}}"                     wx:key="index"                     wx:for-item="food"                     id="{{item.id}}">                        <view class="foodName">{{food.name}}</view>                        <view class="foodPrice">                            ￥                            <view class="foodPriceNum">{{food.price}}</view>                            起*                        </view>                        <image src="{{food.img}}" class="foodPci" />                        <view class="custom">                            <view class="customText">去定制</view>                            <navigator url="../cart/cart"                             hover-class="none">                                <view class="customBtn"                                 bindtap="gotoCart"                                 data-id="{{item.id}}"                                 data-index="{{index}}">                                    <image src="../../images/menuImg/toRight.png" class="customPic" />                                </view>                            </navigator>                        </view>                        <view class="order">                            <view class="orderText">大套餐</view>                            <view class="orderselect" wx:if="{{food.showCombo}}">                                <view class="reduce" bindtap="OnReduce" data-id="{{item.id}}" data-index="{{index}}">                                    <image src="../../images/menuImg/jianhao.png" class="orderPic" />                                </view>                                <text class="orderTitle">{{food.title}}</text>                                <view class="add" bindtap="OnAdd" data-id="{{item.id}}" data-index="{{index}}">                                    <image src="../../images/menuImg/jiahao.png" class="orderPic" />                                </view>                            </view>                            <view class="orderBtn" wx:else bindtap="OnAdd" data-id="{{item.id}}" data-index="{{index}}">                                <image src="../../images/menuImg/jiahao.png" class="orderPic" />                            </view>                        </view>                    </view>                </block>            </scroll-view>        </view>    </view>復制代碼

從頁(yè)面結構可以看出，這一部分分為左邊和右邊兩部分，然后都通過(guò)wx:for循環(huán)，將數據循環(huán)渲染在頁(yè)面上，左邊和右邊也都使用了scroll滾動(dòng)條，這里有一個(gè)坑不知道大家是否踩過(guò)，就是使用小程序scroll-view組件時(shí)，必須要給這個(gè)組件設置固定的高度或者寬度（這采決與你是設置了Y方向滾動(dòng)還是X方向滾動(dòng)），如果不設置高度的話(huà)，滾動(dòng)條就會(huì )失效，雖然這個(gè)坑我已經(jīng)踩過(guò)很多次了，但是每當我遇到時(shí)，都還會(huì )在踩一遍。

這里由于css太多了，所以就不放上來(lái)了展示給大家看了，如果有想看朋友可以去文章最下面的github地址觀(guān)看。在css里也有一個(gè)坑，那就是在選擇布局的時(shí)候有兩種方法，第一種是使用彈性布局，將左邊導航欄和右邊選餐欄并排一起。第二種是使用display: inline-block;方法，使得左邊導航欄和右邊選餐欄都變成行內塊元素，并排在一起，雖然布局上面沒(méi)問(wèn)題，但是當循環(huán)數據時(shí)，你就會(huì )發(fā)現右邊的數據會(huì )倒敘排列，我也沒(méi)有找到會(huì )導致這種方法的原因。所以遇到左右兩邊需要并排且需要填充數據的時(shí)候，推薦使用彈性布局。

接下來(lái)就是最最最最難的邏輯部分了，我會(huì )給大家分左邊和右邊來(lái)講解。雖然百度上面也有很多左右聯(lián)動(dòng)的邏輯方法，但是百度到的答案不盡人意，所以我就取其精華去其糟粕，寫(xiě)了一下自己的邏輯，接下來(lái)我就要給大家細致的講一下左右聯(lián)動(dòng)的效果實(shí)現。

我們先來(lái)看看點(diǎn)擊左邊導航欄，然后點(diǎn)擊的導航欄變換樣式是怎樣實(shí)現的。

onSelect(e) {    console.log(e);    const that = this;    const curIndex = e.currentTarget.dataset.index;    const toView = e.currentTarget.dataset.id;    console.log(toView)    that.setData({      curIndex,      toView    })  },復制代碼

這里通過(guò)點(diǎn)擊事件，獲取到該數據的index并賦值給curIndex，然后通過(guò)判斷class="{{curIndex === index ? 'selected' : 'select'}}"改變樣式。同時(shí)點(diǎn)擊事件時(shí)，也將數據里的id值賦給toView，然后在右邊的滾動(dòng)條里，設置scroll-into-view="{{toView}}"，通過(guò)這個(gè)屬性，滾動(dòng)條就可以自動(dòng)跳轉到對應的toView數據里。這是小程序自定義的方法，可以很方便的做到點(diǎn)擊左邊，右邊自動(dòng)跳轉的操作。但是滾動(dòng)右邊，左邊樣式也自動(dòng)切換就不是那么容易的事情了。

.then(res => {          let heightArr = [];          const height = 180;          let heightList = 0          for(let i = 0; i < res.length; i++) {            heightList += res[i].detail.length * height;            heightArr.push(heightList);          }          // console.log(heightArr);          this.setData({            heightArr          })        }) 復制代碼

在這里，我是在onLoad生命周期函數里，先請求數據，通過(guò).than接收到數據，const height = 180;這是我設置的每一個(gè)食物框的固定高度，所以通過(guò)這個(gè)高度乘以分類(lèi)里面的每個(gè)數據，就可以獲得右邊滾動(dòng)條不同分類(lèi)的高度區間，然后存入heightArr數組。

scrollTop(e) {    // console.log(e)    const scrollTop = e.detail.scrollTop;    if(scrollTop > 100) {      this.setData({        hidden: false      })    }    else{      this.setData({        hidden: true      })    }    const heightArr = this.data.heightArr;    for(let i = 0; i < heightArr.length; i++) {      if(scrollTop > 0 && scrollTop < heightArr[0]) {        this.setData({          curIndex: 0        })      } else if (scrollTop < heightArr[i] && scrollTop > heightArr[i - 1]) {        this.setData({          curIndex: i        })      }    }  },復制代碼

右邊高度的區間我們已經(jīng)得到了，然后我們應該怎么利用好它呢？在scroll-view組件里，有一個(gè)bindscroll="scrollTop"方法是滾動(dòng)滾動(dòng)條時(shí)可以觸發(fā)的事件，這個(gè)方法可以獲取到滾動(dòng)的頂部在滾動(dòng)時(shí)距離頂部的距離。那么我們就可以利用這個(gè)滾動(dòng)的距離，然后獲取到這個(gè)距離在heightArr區間的哪一部分，然后將這個(gè)區間的索引值賦值給curIndex。 這樣左邊的樣式就能隨右邊滾動(dòng)而改變了。這個(gè)方法大家學(xué)會(huì )了嘛，如果沒(méi)有看懂，可以在下面評論區問(wèn)我喲！

OnAdd(e) {    const id = e.currentTarget.dataset.id;    const indexSelect = e.currentTarget.dataset.index;    let totalPrice = this.data.totalPrice;    let index = id.split('l')[1];    let scrollRight = this.data.scrollRight;    const price = scrollRight[index].detail[indexSelect].price;    scrollRight[index].detail[indexSelect].title++;    scrollRight[index].detail[indexSelect].showCombo = true;    totalPrice = totalPrice + price;    this.setData({      scrollRight,      totalPrice    })  },  OnReduce(e) {    const id = e.currentTarget.dataset.id;    const indexSelect = e.currentTarget.dataset.index;    let index = id.split('l')[1];    let scrollRight = this.data.scrollRight;    let title = scrollRight[index].detail[indexSelect].title;    let totalPrice = this.data.totalPrice;    const price = parseFloat(scrollRight[index].detail[indexSelect].price);    totalPrice = totalPrice - price;    if(title > 1) {      scrollRight[index].detail[indexSelect].title--;      this.setData({        scrollRight,        totalPrice      })    }else if(title = 1) {      scrollRight[index].detail[indexSelect].title--;      scrollRight[index].detail[indexSelect].showCombo = false;      this.setData({        scrollRight,        totalPrice,      })    }  },復制代碼

上面是一些簡(jiǎn)單的加和減的方法，點(diǎn)擊+號的時(shí)候，觸發(fā)onAdd事件，獲取到當前點(diǎn)擊事件的索引值，然后找到數據里面每一項的價(jià)格，以及數量，除了將數量+1之外，還需要算出當前所有物品的總價(jià)。點(diǎn)擊-號的方法一樣，我就不再贅述了。

最后就是頁(yè)面下端的購物車(chē)部分了

當選餐時(shí)，就會(huì )自動(dòng)跳出購物車(chē)按鈕，然后點(diǎn)擊購物車(chē)，就會(huì )顯示出購物清單列表，在購物清單列表中，也可以增加或者減少食物。

<view class="shoppingList" wx:if="{{showList && totalPrice != 0}}">        <view class="shadow" bindtap="onList"></view>        <view class="shoppingBottom">            <view class="shoppingHeader">                <view class="hasSelected">                    <image src="../../images/menuImg/shoppingGray.png" class="image" />                    <view class="text">已選產(chǎn)品</view>                </view>                <view class="empty" bindtap="onEmpty">                    <image src="../../images/menuImg/lajitong.png" class="image" />                    <view class="text">清空</view>                </view>            </view>            <scroll-view scroll-y                 style="max-height: 534rpx">                <block wx:for="{{scrollRight}}" wx:key="index">                    <view class="shoppingBody" wx:for="{{item.detail}}" wx:for-item="food" wx:if="{{food.showCombo}}" wx:key="index">                        <view class="name">{{food.name}}</view>                        <view class="unitPrice">                            ￥                            <view class="unitPriceNum">{{food.price * food.title}}</view>                        </view>                        <view class="orderselect addPlace">                            <view class="reduce" bindtap="OnReduce" data-id="{{item.id}}" data-index="{{index}}">                                <image src="../../images/menuImg/jianhao.png" class="orderPic" />                            </view>                            <text class="orderTitle">{{food.title}}</text>                            <view class="add" bindtap="OnAdd" data-id="{{item.id}}" data-index="{{index}}">                                <image src="../../images/menuImg/jiahao.png" class="orderPic" />                            </view>                        </view>                    </view>                </block>            </scroll-view>        </view>    </view>    <!-- 選好了 -->    <view class="shopping" wx:if="{{totalPrice != 0}}">        <view class="shoppingLeft">            <view class="shoppingCar" bindtap="onList">                <image src="../../images/menuImg/shopping.png" class="shoppingImg" />            </view>            <view class="shoppingPrice">                <view class="priceTitle">￥</view>                <view class="priceNum">{{totalPrice}}</view>            </view>        </view>        <navigator url="../settlement/settlement" class="shoppingRight" bindtap="gotoSettlement" >            <view class="rightText">選好了</view>            <image src="../../images/menuImg/yellowRight.png" class="rightImg" />        </navigator>    </view>復制代碼

這是購物清單還有購物車(chē)的部分，使用position: fixed;將這部分固定在屏幕的底部，不會(huì )隨著(zhù)屏幕滑動(dòng)而滑動(dòng)，在結構上面，還設置了一個(gè)蒙層，當展示購物清單時(shí)顯示。

// 是否顯示選餐列表  onList() {    let showList = this.data.showList;    showList = !showList;    this.setData({      showList    })  },  // 清空事件  onEmpty() {    const scrollRight = this.data.scrollRight;    for(let i = 0; i < scrollRight.length; i++) {      for(let j = 0; j < scrollRight[i].detail.length; j++) {        scrollRight[i].detail[j].title = 0;        scrollRight[i].detail[j].showCombo = false;      }    }    this.setData({      scrollRight,      totalPrice: 0,      showList: false    })  },  // 跳轉到cart頁(yè)面  gotoCart(e) {    // console.log(e)    const id = e.currentTarget.dataset.id;    const indexSelect = e.currentTarget.dataset.index;    let index = id.split('l')[1];    let scrollRight = this.data.scrollRight;    const zhushi = scrollRight[index].detail[indexSelect];    console.log(zhushi);    wx.setStorage({      key: "cartFood",      data: zhushi    })  },復制代碼

這些方法都是基本方法，還是很簡(jiǎn)單的，大家看一下應該就知道做什么的了，也不再一一介紹了。

啊啊啊啊啊啊啊啊啊啊，好累，碼了這么多字，感覺(jué)寫(xiě)文章比寫(xiě)小程序還累！但是我不能停下來(lái)，因為還有重點(diǎn)沒(méi)有講！

接下來(lái)就是這篇文章的重點(diǎn)部分了，小伙伴們快豎起耳朵聽(tīng)??！

爬蟲(chóng)爬取數據

相信大家在寫(xiě)小項目的時(shí)候，最頭疼的就是寫(xiě)假數據了，每次編寫(xiě)假數據，自己看的都頭皮發(fā)麻。所以我給大家帶來(lái)一個(gè)簡(jiǎn)單的爬蟲(chóng)，不僅可以輕輕松松的獲取到數據，而且顯得既高端又專(zhuān)業(yè)！

我把爬蟲(chóng)寫(xiě)在了云函數里，這樣可以直接在運行云函數的時(shí)候，就把爬蟲(chóng)爬取到的數據直接存儲到云數據庫。在寫(xiě)爬蟲(chóng)之前，首先需要將運行環(huán)境初始化成node運行環(huán)境，然后下載基本的依賴(lài)，以便后面可以在網(wǎng)頁(yè)上獲取數據。因為我這里要獲取到的數據在不同的頁(yè)面里，所以我先將網(wǎng)頁(yè)全部定義好，方便直接引用。同時(shí)我也創(chuàng )建了不同的空數組，為了將從不同網(wǎng)頁(yè)中獲取到的不同數據存入不同的數組里。這些準備工作都做完了，下面來(lái)看看代碼吧。

const cloud = require('wx-server-sdk');const request = require('request');const cheerio = require('cheerio');const breakfast = 'http://www.5ikfc.com/mdl/menu/breakfast/';  //早餐const chaozhitaocan = 'http://www.5ikfc.com/mdl/menu/chaozhitaocan/';  //超值套餐const happymeals = 'http://www.5ikfc.com/mdl/menu/happymeals/';  //快樂(lè )套餐const sides = 'http://www.5ikfc.com/mdl/menu/sides/';  //配餐const drink = 'http://www.5ikfc.com/mdl/menu/drink/';  //飲料const dessert = 'http://www.5ikfc.com/mdl/menu/dessert/';  //甜品const mccafe = 'http://www.5ikfc.com/mdl/menu/mccafe/';  //麥咖啡let breakfastList = [];let chaozhitaocanList = [];let happymealsList = [];let sidestList = [];let drinkList = [];let dessertList = [];let mccafeList = [];// 初始化 cloudcloud.init()const db = cloud.database();function maidanglaoSpider(http, list) {    return new Promise((resolve, reject) => {        request(http,        (err, res) => {            if(err) {                reject('net error');            }            if(!err) {                const body = res.body;                const $ = cheerio.load(body, {                decodeEntities: false                })                $('.lside.fr.bdgrey.main_wrap .fx li')                .each(function() {                    const img = $('a img', this).attr('src');                    const name = $('a', this).text().trim();                    const price = $('b', this).text().trim();                    list.push({                        name,                        img,                        price                    })                    console.log({                        name,                        img,                        price                    })                })                resolve(list);            }        })    })}maidanglaoSpider(breakfast,breakfastList).then(res => {    console.log(res);})復制代碼

首先往爬蟲(chóng)函數里傳http和list兩個(gè)參數，因為我需要將不同網(wǎng)頁(yè)的數據存入不同的list里面。然后函數return一個(gè)Promise函數，然后在promise函數里發(fā)起請求，如果請求沒(méi)有報錯的話(huà)，就const body = res.body獲取網(wǎng)頁(yè)的html的body結構，然后通過(guò)

('a img', this).attr('src');獲取我們需要的圖片的src；通過(guò)const name = ('b', this).text().trim();獲取到需要的價(jià)格。最后將這三個(gè)數據以對象的形式push進(jìn)數組，然后resolve出來(lái)。到這里我們的爬蟲(chóng)函數就寫(xiě)好啦，然后下面就需要把數據傳入云數據庫了。

exports.main = async (event, context) => {        const breakfastData = await maidanglaoSpider(breakfast, breakfastList);        const chaozhitaocanData = await maidanglaoSpider(chaozhitaocan, chaozhitaocanList);        const happymealsData = await maidanglaoSpider(happymeals, happymealsList);        const sidesData = await maidanglaoSpider(sides, sidestList);        const drinkData = await maidanglaoSpider(drink, drinkList);        const dessertData = await maidanglaoSpider(dessert, dessertList);        const mccafeData = await maidanglaoSpider(mccafe, mccafeList);        let arrData = [breakfastData,chaozhitaocanData,happymealsData,sidesData,drinkData,dessertData,mccafeData]                for(let i = 0; i < arrData.length; i++) {            await db.collection('food').add({                data: {                    id: i,                    detail: arrData[i]                }            })        }}復制代碼

我首先將不同的數據命名好，然后將他們放進(jìn)arrData數組里，然后通過(guò)遍歷這個(gè)數組，把每一項數據都存入云函數里。

云數據庫內容如下

當我同一個(gè)小組的大佬看到我的云數據庫以后，對我進(jìn)行了夸贊：“您真是將數據庫運用到了極致?！碑斎涣?，這并不是夸贊，而是無(wú)情的嘲諷。我在存數據的時(shí)候，將所有數據存在了一個(gè)集合中，并且在集合中將數據劃分開(kāi)來(lái)（這是極度錯誤的做法，希望大家不要效仿我），由于這是我第一次使用云數據庫存數據，所以犯這種錯誤也能體諒。

正確做法是：將每一個(gè)種類(lèi)的數據，存放在一個(gè)集合中，不要吝嗇數據庫的使用。

獲取數據

上面我們已經(jīng)把爬蟲(chóng)的數據存進(jìn)云函數了，然后就到了獲取數據的時(shí)候了。

wx.cloud.callFunction({      name: 'foodData',      success: (res) => {        // console.log(res);        db.collection('breakfast')        .get()        .then(res => {          let food = {};          food.id =  `l${res.data[0].id}`          food.detail = res.data[0].detail.slice(0,5);          food.title = 0;          let scrollRight = this.data.scrollRight;          scrollRight.push(food);          this.setData({            scrollRight          })          return res        })        .then(res => {          let food = {};          food.id =  `l${res.data[1].id}`          food.detail = res.data[1].detail.slice(0,5);          food.title = 0;          let scrollRight = this.data.scrollRight;          scrollRight.push(food);          this.setData({            scrollRight          })          return res        })        .then(res => {          let food = {};          food.id =  `l${res.data[2].id}`          food.detail = res.data[2].detail.slice(0,5);          food.title = 0;          let scrollRight = this.data.scrollRight;          scrollRight.push(food);          this.setData({            scrollRight          })          return res        })        .then(res => {          let food = {};          food.id =  `l${res.data[3].id}`          food.detail = res.data[3].detail.slice(0,5);          food.title = 0;          let scrollRight = this.data.scrollRight;          scrollRight.push(food);          this.setData({            scrollRight          })          return res        })        .then(res => {          let food = {};          food.id =  `l${res.data[4].id}`          food.detail = res.data[4].detail.slice(0,5);          food.title = 0;          let scrollRight = this.data.scrollRight;          scrollRight.push(food);          this.setData({            scrollRight          })          return res        })        .then(res => {          let food = {};          food.id =  `l${res.data[5].id}`          food.detail = res.data[5].detail.slice(0,5);          food.title = 0;          let scrollRight = this.data.scrollRight;          scrollRight.push(food);          this.setData({            scrollRight          })          return res        })        .then(res => {          let food = {};          food.id =  `l${res.data[6].id}`          food.detail = res.data[6].detail.slice(0,5);          food.title = 0;          let scrollRight = this.data.scrollRight;          scrollRight.push(food);          console.log(food);          this.setData({            scrollRight          })          return res        })復制代碼

本來(lái)我想的是利用循環(huán)，把數據遍歷出來(lái)，然后通過(guò)循環(huán)存進(jìn)定義的空數組里。但是我怎么也存不進(jìn)去，實(shí)在找不到原因，我就把數據的每一項都單獨拎出來(lái)然后存進(jìn)去。雖然代碼很不美觀(guān)，但是總算把數據存進(jìn)去了。這個(gè)函數要寫(xiě)在onLoad生命周期函數里，這樣可以在頁(yè)面加載的時(shí)候就把數據獲取到，然后渲染到頁(yè)面上。

至此，我的個(gè)人頁(yè)面就完成了，小伙伴們也將他們的頁(yè)面提交到了github上面，本以為工作就結束了，可以高高興興的玩耍了。但是轉頭一想，頁(yè)面跳轉的工作還沒(méi)人做呢，哎，誰(shuí)讓我是小組長(cháng)呢，只能由我這個(gè)“老父親”來(lái)做收尾工作了。

收尾工作

其實(shí)收尾工作很簡(jiǎn)單，就是改一下路由跳轉，并且傳送一下對應的數據就行。

傳送和接收數據代碼如下：

wx.setStorage({        key:"itemsIndex",        data: this.data.items[idx],    })wx.getStorage({      key: 'itemsIndex',      success: (res) => {        let storeInfo = this.data.storeInfo;        storeInfo.name = res.data.name;        storeInfo.address = res.data.address;        // console.log(storeInfo);        this.setData({          storeInfo        })      },      fail: () => {},      complete: () => {}    });復制代碼

在跳轉頁(yè)面時(shí)，利用wx.setStorage將數據放入緩存區，然后在需要數據的頁(yè)面，利用wx.getStorage獲取緩存區的數據。

好啦，工作算是結束了，給大家來(lái)看看我們的最終成果把！

嘿嘿，總體來(lái)說(shuō)，還算過(guò)得去吧

一些總結

小程序寫(xiě)完了，總得有一些工作總結對吧，我覺(jué)得通過(guò)這次幾個(gè)小伙伴通力合作，我感慨還是蠻多的，給大家總結一下幾點(diǎn)吧！

• 第一！最重要的就是！心平氣和。幾個(gè)小伙伴合作寫(xiě)項目，難免在一些觀(guān)點(diǎn)上面有分歧，但是大家一定要心平氣和的商討，不能各執己見(jiàn)。雖然我們團隊在寫(xiě)項目的時(shí)候也有幾句爭吵，但是總體來(lái)說(shuō)還算平和。
• 第二！一定要注意代碼的質(zhì)量，以前一直是一個(gè)人寫(xiě)代碼，沒(méi)有體會(huì )到代碼質(zhì)量的重要性，但是通過(guò)這次合作，我發(fā)現代碼一定要寫(xiě)的簡(jiǎn)單易懂，也要多寫(xiě)注釋?zhuān)@樣方便別人修改你的代碼，同時(shí)也方便自己閱讀。
• 第三！一定要堅持，有些事情看似很難，但是只要堅持下來(lái)，你會(huì )發(fā)現那些困難，再一點(diǎn)點(diǎn)土崩瓦解，到最后會(huì )被你完全擊潰。
• 第四！不懂就問(wèn)，不管是老師，同學(xué)，還是百度，不懂就要去問(wèn)，不能把問(wèn)題放在那里不解決，只要多問(wèn)多思考，就會(huì )一點(diǎn)點(diǎn)有思路了。

以上幾點(diǎn)就是這次小項目完成的總結啦，同時(shí)也是這篇文章的收尾了，這篇文章是我第一次寫(xiě)文章，所以我知道可能很差，所以大家有什么建議的話(huà)，一定要給我留言，方便我改進(jìn)，同時(shí)如果大家對這個(gè)項目有什么不懂的，也可以在留言區問(wèn)，我會(huì )細心解答的！

這是這個(gè)項目的github地址： （有需要的小伙伴可以拿去參考一下噢?。?/p>