用戶
 找回密碼
 立即注冊

QQ登錄

只需一步,快速開始

掃一掃,登錄網站

小程序社區 首頁 教程 查看內容

微信小程序-麥當勞點餐+爬蟲

Rolan 2019-7-3 00:04

hello大家好,這是我的第一篇掘金文章,每天都在掘金上面看各位大佬的文章,終于鼓足勇氣決定寫一篇屬于自己的文章了。今天呢,就給大家帶來一篇微信小程序(麥當勞點餐)+爬蟲的詳解吧。大佬們可以忽略我這個小辣雞 ...

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

項目介紹

這個小程序是為最近參加的一個小活動而制作的(為期兩天,3-4人組隊,完成一個小型項目)。說實話,兩天怎么可能完成一個小程序呢?在前兩天,我們大致完成了小程序基本結構,然后由我完成收尾工作,前前后后歷時四天。

項目預覽圖

大家可以看到,這個小程序有四個頁面。

項目工作分配

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

項目開始前的準備

一些準備工作:

  • 申請賬號:進入微信公眾平臺根據指示申請注冊賬號
  • 開發工具:VScode和微信開發者工具
  • 小程序官方文檔
  • github申請存儲庫

使用的一些工具:

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

這里需要著重說明一下github命令行的操作,一個人開發的時候,直接git push就行。但是多人合作開發的時候,是不能直接git push的,如果別人先提交了項目,然后你再提交之前一定先要git pull,先把別人的項目拉下來,然后在git push,不然會導致沖突。

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

項目完成過程

下圖就是我要完成的頁面。

第一開始看見這個頁面的時候,心里其實并不慌,因為之前也做過一些電商的小程序,所以知道這個頁面的基本功能應該如何實現,所以在寫代碼的過程中,還算很順利。

點餐頁面

當看見這個頁面的時候,腦子里大致就需要搭建一個結構框架。

  • 頁面上端是一個swiper,用于滾動不同的廣告。
  • 頁面中間的部分是地址欄,點擊可以選擇不同的商店。
  • 頁面中下部是一個點餐欄,左邊和右邊同時都要使用scroll-view。
  • 尾部是一個類似于購物車的東西,這一部分建議大家寫成一個組件調用,為了減少代碼耦合度。(雖然我沒用組件)

話不多說,下面來分析結構吧!

首先我們來看一下頁面的swiper部分

可以從圖片看出,這是一個廣告位置,用于放置最新的產品,這一部分其實很簡單,直接引用小程序的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這個屬性只接受rgba形式,不接受十六進制顏色的輸入,大家可以自行在百度上面找轉換的方法。

接下來就是地址欄的部分

我這里放兩張圖片,方便對比:

這一部分的頁面并不算簡單,首先外面的大盒子需要設置為彈性布局,方便左邊的地址欄,還有右邊的會員并排在一排。然后地址欄也需要設置為彈性布局,將flex-flow設置為column就可以沿Y軸分布,然后將align-items: center;就可以把店名還有地址放在方框中間。因為這個地址欄是可以點擊切換地址的,所以內邊距不可以寫死,只能用彈性布局將它們放在中間,如果選擇的地址過長的話,頁面也會自動調整邊距,十分的美觀。

<!-- 地址欄 -->
    <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">會員中心</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;
}
復制代碼

因為這里是有一個點擊事件的,點擊過后,跳轉到選地址頁面,然后選完地址在跳轉回本頁面。那么在頁面與頁面之間是怎么傳遞數據的呢?在逛了一圈小程序開發文檔之后,我們發現了一個api十分的好用,可以將頁面的數據暫時放入緩存區,以一個key來命名,然后在另外一個頁面,也用相同的key來獲取,就可以獲取緩存區的數據了,下面來看看代碼吧。

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'
    })
  },
復制代碼

這是通過另外一個頁面跳轉我的頁面的點擊事件,用wx.setStorage來存取數據。

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: () => {}
    });
復制代碼

這是在本頁面接收數據的方法,并且這個方法要寫在onLoad生命周期函數里,這樣就可以在頁面加載的時候把獲取到的數據渲染到頁面上。

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

這一部分,應該是所有電商小程序都會用到的。其實說難也不難,說簡單也不簡單,只要認真看完我下面的講解,應該就了解要怎么做了。

相信大家看到這個截圖之后,內心都有一些自己的想法,那不妨繼續看看我的做法,然后與你們自己的想法融合在一起,看看是不是會迸發出新的火花呢!

<!-- 選餐欄 -->
    <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>
復制代碼

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

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

接下來就是最最最最難的邏輯部分了,我會給大家分左邊和右邊來講解。雖然百度上面也有很多左右聯動的邏輯方法,但是百度到的答案不盡人意,所以我就取其精華去其糟粕,寫了一下自己的邏輯,接下來我就要給大家細致的講一下左右聯動的效果實現。

我們先來看看點擊左邊導航欄,然后點擊的導航欄變換樣式是怎樣實現的。

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
    })
  },
復制代碼

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

.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生命周期函數里,先請求數據,通過.than接收到數據,const height = 180;這是我設置的每一個食物框的固定高度,所以通過這個高度乘以分類里面的每個數據,就可以獲得右邊滾動條不同分類的高度區間,然后存入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
        })
      }
    }
  },
復制代碼

右邊高度的區間我們已經得到了,然后我們應該怎么利用好它呢?在scroll-view組件里,有一個bindscroll="scrollTop"方法是滾動滾動條時可以觸發的事件,這個方法可以獲取到滾動的頂部在滾動時距離頂部的距離。那么我們就可以利用這個滾動的距離,然后獲取到這個距離在heightArr區間的哪一部分,然后將這個區間的索引值賦值給curIndex。 這樣左邊的樣式就能隨右邊滾動而改變了。這個方法大家學會了嘛,如果沒有看懂,可以在下面評論區問我喲!

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,
      })
    }
  },
復制代碼

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

最后就是頁面下端的購物車部分了

當選餐時,就會自動跳出購物車按鈕,然后點擊購物車,就會顯示出購物清單列表,在購物清單列表中,也可以增加或者減少食物。

<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">已選產品</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>
復制代碼

這是購物清單還有購物車的部分,使用position: fixed;將這部分固定在屏幕的底部,不會隨著屏幕滑動而滑動,在結構上面,還設置了一個蒙層,當展示購物清單時顯示。

// 是否顯示選餐列表
  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頁面
  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
    })
  },
復制代碼

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

啊啊啊啊啊啊啊啊啊啊,好累,碼了這么多字,感覺寫文章比寫小程序還累!但是我不能停下來,因為還有重點沒有講!

接下來就是這篇文章的重點部分了,小伙伴們快豎起耳朵聽啊!

爬蟲爬取數據

相信大家在寫小項目的時候,最頭疼的就是寫假數據了,每次編寫假數據,自己看的都頭皮發麻。所以我給大家帶來一個簡單的爬蟲,不僅可以輕輕松松的獲取到數據,而且顯得既高端又專業!

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

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/';  //快樂套餐
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 = [];

// 初始化 cloud
cloud.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);
})
復制代碼

首先往爬蟲函數里傳http和list兩個參數,因為我需要將不同網頁的數據存入不同的list里面。然后函數return一個Promise函數,然后在promise函數里發起請求,如果請求沒有報錯的話,就const body = res.body獲取網頁的html的body結構,然后通過 ('a img', this).attr('src');獲取我們需要的圖片的src;通過const name = ('b', this).text().trim();獲取到需要的價格。最后將這三個數據以對象的形式push進數組,然后resolve出來。到這里我們的爬蟲函數就寫好啦,然后下面就需要把數據傳入云數據庫了。

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]
                }
            })
        }
}
復制代碼

我首先將不同的數據命名好,然后將他們放進arrData數組里,然后通過遍歷這個數組,把每一項數據都存入云函數里。

云數據庫內容如下

當我同一個小組的大佬看到我的云數據庫以后,對我進行了夸贊:“您真是將數據庫運用到了極致。”當然了,這并不是夸贊,而是無情的嘲諷。我在存數據的時候,將所有數據存在了一個集合中,并且在集合中將數據劃分開來(這是極度錯誤的做法,希望大家不要效仿我),由于這是我第一次使用云數據庫存數據,所以犯這種錯誤也能體諒。

正確做法是:將每一個種類的數據,存放在一個集合中,不要吝嗇數據庫的使用。

獲取數據

上面我們已經把爬蟲的數據存進云函數了,然后就到了獲取數據的時候了。

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
        })
復制代碼

本來我想的是利用循環,把數據遍歷出來,然后通過循環存進定義的空數組里。但是我怎么也存不進去,實在找不到原因,我就把數據的每一項都單獨拎出來然后存進去。雖然代碼很不美觀,但是總算把數據存進去了。這個函數要寫在onLoad生命周期函數里,這樣可以在頁面加載的時候就把數據獲取到,然后渲染到頁面上。

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

收尾工作

其實收尾工作很簡單,就是改一下路由跳轉,并且傳送一下對應的數據就行。

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

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: () => {}
    });
復制代碼

在跳轉頁面時,利用wx.setStorage將數據放入緩存區,然后在需要數據的頁面,利用wx.getStorage獲取緩存區的數據。

好啦,工作算是結束了,給大家來看看我們的最終成果把!

嘿嘿,總體來說,還算過得去吧

一些總結

小程序寫完了,總得有一些工作總結對吧,我覺得通過這次幾個小伙伴通力合作,我感慨還是蠻多的,給大家總結一下幾點吧!

  • 第一!最重要的就是!心平氣和。幾個小伙伴合作寫項目,難免在一些觀點上面有分歧,但是大家一定要心平氣和的商討,不能各執己見。雖然我們團隊在寫項目的時候也有幾句爭吵,但是總體來說還算平和。
  • 第二!一定要注意代碼的質量,以前一直是一個人寫代碼,沒有體會到代碼質量的重要性,但是通過這次合作,我發現代碼一定要寫的簡單易懂,也要多寫注釋,這樣方便別人修改你的代碼,同時也方便自己閱讀。
  • 第三!一定要堅持,有些事情看似很難,但是只要堅持下來,你會發現那些困難,再一點點土崩瓦解,到最后會被你完全擊潰。
  • 第四!不懂就問,不管是老師,同學,還是百度,不懂就要去問,不能把問題放在那里不解決,只要多問多思考,就會一點點有思路了。

以上幾點就是這次小項目完成的總結啦,同時也是這篇文章的收尾了,這篇文章是我第一次寫文章,所以我知道可能很差,所以大家有什么建議的話,一定要給我留言,方便我改進,同時如果大家對這個項目有什么不懂的,也可以在留言區問,我會細心解答的!

這是這個項目的github地址: github.com/Yeqing98/Ma… (有需要的小伙伴可以拿去參考一下噢!)

鮮花
鮮花 (1)
雞蛋
雞蛋

剛表態過的朋友 (1 人)

分享至 : QQ空間
收藏
原作者: 短嘆illusion 來自: 掘金

提示:本頁有 1 個評論因未通過審核而被隱藏

致青春APP