微信小程序-麥當勞點餐+爬蟲
hello你們好，這是個人第一篇掘金文章，天天都在掘金上面看各位大佬的文章，終於鼓足勇氣決定寫一篇屬於本身的文章了。今天呢，就給你們帶來一篇微信小程序（麥當勞點餐）+爬蟲的詳解吧。大佬們能夠忽略我這個小辣雞，可是若是你也是前端小白的話，能夠認真看看喲，說不定對你有幫助呢。css
項目介紹
這個小程序是爲最近參加的一個小活動而製做的（爲期兩天，3-4人組隊，完成一個小型項目）。說實話，兩天怎麼可能完成一個小程序呢？在前兩天，咱們大體完成了小程序基本結構，而後由我完成收尾工做，前先後後歷時四天。html
項目預覽圖
項目工做分配
因爲我是組長，因此工做的內容是由我分配的，咱們組內四個成員，正好一人一個頁面，可是頁面有簡單和複雜之分的，在個人暴政下，分到了複雜頁面的也不準抱怨！固然我是一個好組長，我給本身分配了選餐的頁面而且爬蟲爬數據也由我完成。因此下面我給你們分享的就是我完成的那個頁面。前端
項目開始前的準備
一些準備工做：node
- 申請帳號：進入微信公衆平臺根據指示申請註冊帳號
- 開發工具：VScode和微信開發者工具
- 小程序官方文檔
- github申請存儲庫
使用的一些工具：git
- 小程序雲開發數據庫功能
- 微信官方文檔
- markMan(能夠進行圖片測量和標註的工具)
- iconfont(阿里巴巴矢量圖標庫，有大量icon資源)
- github（因爲這是咱們一個小組完成的項目，因此須要建一個新的存儲庫，而後把你們拉進來）
這裏須要着重說明一下github命令行的操做，一我的開發的時候，直接git push就行。可是多人合做開發的時候，是不能直接git push的，若是別人先提交了項目，而後你再提交以前必定先要git pull，先把別人的項目拉下來，而後在git push，否則會致使衝突。github
其實除了這些基本的準備工做之外，咱們最應該作的就是思考。有一位前輩曾經告訴我，在接手項目的時候，不該該第一時間就去敲代碼，而是應該閉上眼睛思考一會。具體思考什麼，他也沒有細說，可是經過此次，我領悟到了前輩的意思。首先，咱們須要仔細的看一下設計稿，在腦子裏搭建起來大體的框架，以便在寫代碼的時候，能夠提高效率。其次，咱們應該思考數據若是存放，打個比方：在作電商頁面的時候，點擊左邊導航欄，右邊內容框顯示相應的數據，這就涉及到數據的存放了。因此在寫代碼以前，咱們就應該思考好這些邏輯。數據庫
項目完成過程
下圖就是我要完成的頁面。小程序
點餐頁面
- 頁面上端是一個swiper，用於滾動不一樣的廣告。
- 頁面中間的部分是地址欄，點擊能夠選擇不一樣的商店。
- 頁面中下部是一個點餐欄，左邊和右邊同時都要使用scroll-view。
- 尾部是一個相似於購物車的東西，這一部分建議你們寫成一個組件調用，爲了減小代碼耦合度。（雖然我沒用組件）
話很少說，下面來分析結構吧！微信小程序
首先咱們來看一下頁面的swiper部分api
能夠從圖片看出，這是一個廣告位置，用於放置最新的產品，這一部分其實很簡單，直接引用小程序的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. 爬蟲爬取微信小程序
- 2. 微信小程序點餐系統
- 3. 麥當勞理論
- 4. 視頻教程-微信點餐小程序-微信開發
- 5. 微信小程序餐廳點餐項目源碼
- 6. 點餐系統的開發，java後臺+微信小程序 實現完整的餐廳點餐系統。微信掃碼點餐小程序源碼講解
- 7. 微信小程序訂餐系統
- 8. 微信小程序套餐管理之套餐修改流程
- 9. springboot微信點餐
- 10. 微信小程序做品-食堂供餐服務小程序
- 更多相關文章...
- • W3C 程序 - W3C 教程
- • ASP 子程序 - ASP 教程
- • 算法總結-歸併排序
- • Spring Cloud 微服務實戰(三) - 服務註冊與發現
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. 爬蟲爬取微信小程序
- 2. 微信小程序點餐系統
- 3. 麥當勞理論
- 4. 視頻教程-微信點餐小程序-微信開發
- 5. 微信小程序餐廳點餐項目源碼
- 6. 點餐系統的開發，java後臺+微信小程序 實現完整的餐廳點餐系統。微信掃碼點餐小程序源碼講解
- 7. 微信小程序訂餐系統
- 8. 微信小程序套餐管理之套餐修改流程
- 9. springboot微信點餐
- 10. 微信小程序做品-食堂供餐服務小程序