微信小程序-麦当劳点餐+爬虫
hello大家好,这是我的第一篇掘金文章,每天都在掘金上面看各位大佬的文章,终于鼓足勇气决定写一篇属于自己的文章了。今天呢,就给大家带来一篇微信小程序(麦当劳点餐)+爬虫的详解吧。大佬们可以忽略我这个小辣鸡,但是如果你也是前端小白的话,可以认真看看哟,说不定对你有帮助呢。 项目介绍这个小程序是为最近参加的一个小活动而制作的(为期两天,3-4人组队,完成一个小型项目)。说实话,两天怎么可能完成一个小程序呢?在前两天,我们大致完成了小程序基本结构,然后由我完成收尾工作,前前后后历时四天。 项目预览图大家可以看到,这个小程序有四个页面。 项目工作分配由于我是组长,所以工作的内容是由我分配的,我们组内四个成员,正好一人一个页面,但是页面有简单和复杂之分的,在我的暴政下,分到了复杂页面的也不许抱怨!当然我是一个好组长,我给自己分配了选餐的页面并且爬虫爬数据也由我完成。所以下面我给大家分享的就是我完成的那个页面。 项目开始前的准备一些准备工作:
使用的一些工具:
这里需要着重说明一下github命令行的操作,一个人开发的时候,直接git push就行。但是多人合作开发的时候,是不能直接git push的,如果别人先提交了项目,然后你再提交之前一定先要git pull,先把别人的项目拉下来,然后在git push,不然会导致冲突。 其实除了这些基本的准备工作以外,我们最应该做的就是思考。有一位前辈曾经告诉我,在接手项目的时候,不应该第一时间就去敲代码,而是应该闭上眼睛思考一会。具体思考什么,他也没有细说,但是通过这次,我领悟到了前辈的意思。首先,我们需要仔细的看一下设计稿,在脑子里搭建起来大致的框架,以便在写代码的时候,可以提升效率。其次,我们应该思考数据如果存放,打个比方:在做电商页面的时候,点击左边导航栏,右边内容框显示相应的数据,这就涉及到数据的存放了。所以在写代码之前,我们就应该思考好这些逻辑。 项目完成过程下图就是我要完成的页面。 第一开始看见这个页面的时候,心里其实并不慌,因为之前也做过一些电商的小程序,所以知道这个页面的基本功能应该如何实现,所以在写代码的过程中,还算很顺利。 点餐页面当看见这个页面的时候,脑子里大致就需要搭建一个结构框架。
话不多说,下面来分析结构吧! 首先我们来看一下页面的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=navigator style="display: inline-block" target="" url="../index/index" hover-class="navigator-hover">
<"address">
<view>
<"storeName">{{storeInfo.name}}</"storeAdress">{{storeInfo.address}}</view>
</view>
</view>
</navigator>
<"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{
600rpx;
align-items: center;
border-right: .storeName{
line-height: 40rpx;
font-size: 28rpx;
font-weight: bold;
margin-left: 40rpx;
}
.storeAdress{
34rpx;
22rpx;
color: #737373;
margin: 0 .member{
150rpx;
padding: 16rpx 0;
box-sizing: border-box;
flex-flow: column;
align-items: center;
}
.menberImg{
border-radius: 50%;
0 ;
}
.memberText{
position: relative;
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: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生命周期函数里,这样就可以在页面加载的时候把获取到的数据渲染到页面上。 然后就是本页面含金量最高的部分了这一部分,应该是所有电商小程序都会用到的。其实说难也不难,说简单也不简单,只要认真看完我下面的讲解,应该就了解要怎么做了。 相信大家看到这个截图之后,内心都有一些自己的想法,那不妨继续看看我的做法,然后与你们自己的想法融合在一起,看看是不是会迸发出新的火花呢! select'}}"
bindtap="onSelect"
data-index={{index}}"
data-id={{item.id}}">
<{{item.url}}"
class="selImg"
wx:if={{curIndex === index}}" />
<{{curIndex === index ? 'selectedText' : 'selectText'}}">
{{item.name}}
</view>
</block>
</scroll-view>
</view>
<"scrollRight">
<scroll-view scroll-y scroll-into-view={{toView}}"
scroll-with-animation="true"
bindscroll="scrollTop"
style="height: 1205rpx">
<{{scrollRight}"food"
wx:for={{item.detail}}"
wx:key="index"
wx:for-item="food"
id="foodName">{{food.name}}</view>
<"foodPrice">
¥
<"foodPriceNum">{{food.price}}</view>
起*
</{{food.img}}" class="foodPci" />
<"custom">
<"customText">去定制</view>
<navigator url="../cart/cart"
hover-class="none">
<"customBtn"
bindtap="gotoCart"
data-id=}"
data-index=}">
<"../../images/menuImg/toRight.png" class="customPic" />
</view>
</navigator>
</"order">
<"orderText">大套餐</"orderselect" wx:if={{food.showCombo}}">
<"reduce" bindtap="OnReduce" data-id=}" data-index="../../images/menuImg/jianhao.png" class="orderPic" />
</view>
<"orderTitle">{{food.title}}</text>
<"add" bindtap="OnAdd" data-id="../../images/menuImg/jiahao.png" class="orderBtn" wx:else bindtap="orderPic" />
</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
})
},254);'>这里通过点击事件,获取到该数据的index并赋值给curIndex,然后通过判断class="{{curIndex === index ? 'selected' : 'select'}}"改变样式。同时点击事件时,也将数据里的id值赋给toView,然后在右边的滚动条里,设置scroll-into-view="{{toView}}",通过这个属性,滚动条就可以自动跳转到对应的toView数据里。这是小程序自定义的方法,可以很方便的做到点击左边,右边自动跳转的操作。但是滚动右边,左边样式也自动切换就不是那么容易的事情了。
|