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./mdl/menu/breakfast/'; //早餐
const chaozhitaocan = 'http://www./mdl/menu/chaozhitaocan/'; //超值套餐
const happymeals = 'http://www./mdl/menu/happymeals/'; //快乐套餐
const sides = 'http://www./mdl/menu/sides/'; //配餐
const drink = 'http://www./mdl/menu/drink/'; //饮料
const dessert = 'http://www./mdl/menu/dessert/'; //甜品
const mccafe = 'http://www./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… (有需要的小伙伴可以拿去参考一下噢!)