微信小程序-麦当劳点餐+爬虫

2019/7/3 16:53:13 人评论 次浏览 分类:开发资料

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… (有需要的小伙伴可以拿去参考一下噢!)

赞赏

相关教程

  • 微信小程序卡券开发(亲测)

    提示:小程序卡券和公众平台调用基本一致,请先查看公众平台卡券文档一、公众帐号/小程序绑定由于微信卡券用的是一套逻辑。所以小程序需要先和公众账号绑定,才能在小程序中调起公众平台卡券登录微信公众平台:https://open.weixin.qq.com/ 进行绑定操作二、公众号卡券添加小……

    2017/6/3 18:45:01

共有访客发表了评论 网友评论

验证码: 看不清楚?