摘要：微信小程序之與唯品會(huì)來場粉紅色的邂逅買買買，雖然雙十二剛過，可是唯品會(huì)的折扣卻是依然火爆。一打開頁面，便是粉色的主頁映入眼簾，琳瑯滿目的商品，讓我這個(gè)月光族過了把眼癮。

Welcome to miaomiaoXiong"s segmentfault

微信小程序之--（與唯品會(huì)來場粉紅色的邂逅  ???）

買買買，雖然雙十二剛過，可是唯品會(huì)的折扣卻是依然火爆。一打開頁面，便是粉色的主頁映入眼簾，琳瑯滿目的商品，讓我這個(gè)月光族過了把眼癮。雖然買不起，那就自己模仿著寫一個(gè)，把喜歡的商品一個(gè)個(gè)推進(jìn)小推車?yán)?。?）下面為大家分享一個(gè)把唯品會(huì)里面的精致商品推進(jìn)自己購物車的微信小程序，?

話不多說，扔個(gè)代碼看看：

主頁面: 輪播圖片這個(gè)小技巧比較普遍的被使用，代碼如下：

index.wxml:使用swiper組件,里面放置block wx:for 循環(huán)movies 圖片數(shù)組，再次使用swiper-item 依次將item.url 圖片地址輸出，就可以看到我們的輪播圖了。

swiper 屬性具體小提示

兩個(gè)小動(dòng)畫： 加購小車左右搖擺動(dòng)畫效果， 收藏小愛心動(dòng)畫效果。

點(diǎn)擊圖中的購買圖片，我們的購物車就會(huì)隨之扭扭身體，表示已經(jīng)加入購物車? ， 具體代碼如下：

在 wxml 中添加 animation="{{rorateAnimation}}" 動(dòng)畫。
animation 動(dòng)畫

? ? ?

在對(duì)應(yīng)的 js 中將購物車加購動(dòng)畫具體實(shí)現(xiàn), 當(dāng) goumai: function() 觸發(fā)時(shí)，創(chuàng)建動(dòng)畫 wx.createAnimation() , 通過 animation.rotate().step() 實(shí)現(xiàn)加購中小車搖擺的過程，代碼如下：

biadtap 事件

// 購買點(diǎn)擊事件，觸發(fā)時(shí)使購物車圖片放大
goumai: function (event) {
var animation = wx.createAnimation({
duration: 100,
})
//購物車旋轉(zhuǎn)
animation.rotate(30).step();
animation.rotate(0).step();
animation.rotate(-30).step();
animation.rotate(0).step();
this.setData({
rorateAnimation: animation.export(),
})
},

送走了購物車的加購動(dòng)畫，下面為大家分享一個(gè)收藏動(dòng)畫， 愛心 ?
類似之前的購物車動(dòng)畫，首先我們?cè)?wxml 中綁定事件 bindtap="shoucang" ,同樣使用 animation="{{enlargeAnimation}}" ?獲取動(dòng)畫效果， 代碼如下：

js 文件中同樣使用 wx.createAnimation() 創(chuàng)建動(dòng)畫，animation.opacity(0.6).scale(0.9).step();//修改透明度,放大

//收藏，動(dòng)畫放大效果
shoucang: function (event) {
var animation = wx.createAnimation({
duration: 700,
})
// 圖片放大
animation.opacity(0.6).scale(0.9).step();//修改透明度,放大
this.setData({
enlargeAnimation: animation.export()
})
},

是不是覺得超級(jí)簡單， 通過一個(gè)事件綁定秀出你的神操作。

下面，該是嚴(yán)肅的時(shí)候了，以上只是簡單的切頁面，我們要把喜歡的東西加進(jìn)購物車，保持頭腦清醒，跟著我把購物車的邏輯理理清楚 ?

?首先我們要在 easy-mock 上創(chuàng)建一份自己的數(shù)據(jù)，
easy-mock 點(diǎn)擊進(jìn)入

通過 wx.request({url:"....."}) 獲取你的easy-mock 中的數(shù)據(jù)， 代碼示例如下：

onLaunch(options) {
// 請(qǐng)求數(shù)據(jù)
wx.request({
url: "https://www.easy-mock.com/moc...",
success: (response) => {
? ? ? ?//console.log(response.data.data);
? ? ? ?// 通過 ?this.globalData.movies 獲取easy-mock 中的 movies 數(shù)組，
? ? ? ? // ?除了全局變量的 js, 其他 js 頁面要獲取數(shù)據(jù)，需要 const app = getApp() 定義，
? ? ? ? // 才能使用全局中的數(shù)據(jù)
?this.globalData.movies = response.data.data.movies,
this.globalData.img = response.data.data.img,
this.globalData.goods = response.data.data.goods
}
})
},

由于商品頁面加入購物車然后要在購物車頁面顯示， 我額外的設(shè)置了一個(gè)全局?jǐn)?shù)組 buy ,以便之后在購物車頁面顯示我所添加的物品詳情 （圖片， 價(jià)格 ，數(shù)量等）, 在 app.js 中代碼如下：

globalData: {
buy:[]
}

?在商品頁面中的 js 文件中通過 onLoad: function () 將數(shù)據(jù)從全局中獲取

onLoad: function () {
this.setData({
movies: app.globalData.movies,
goods: app.globalData.goods
});

在 wxml 中通過綁定事件 bindtap="buy" 將選中的商品放入我們的購物車頁面

在對(duì)應(yīng)的 js 文件中具體實(shí)現(xiàn) buy 事件代碼如下：

// 購買， 點(diǎn)擊圖片，購物車顯示已加購
buy: function (e) {
for (var i = 0; i < this.data.goods.length;i++){
? ?//點(diǎn)擊購買圖片觸發(fā) buy 事件 ，其中的 item.id 具有唯一性， 將其傳入函數(shù)中與原來的所有商品中的 id 相匹配， 如果存在，即把它 push 進(jìn)新的數(shù)組 buy 中。
?if (e.currentTarget.dataset.id == this.data.goods[i].id) {
app.globalData.buy.push(this.data.goods[i])
console.log(app.globalData.buy)
}
}
},

購物車已經(jīng)放好了我們的寶貝，接下來要顯示才可以， 繼續(xù)我們的 js 數(shù)據(jù)征途 fighting!!!

1.清楚地明白我們要什么， 如： 商品圖片， 名稱， 價(jià)格， 但是為了實(shí)現(xiàn)數(shù)量的增減效果，需要額外設(shè)置 全選 allSelect: "circle", 數(shù)量 num: 0, 共計(jì)數(shù)額 count: 0

data: {
allSelect: "circle",
num: 0,
count: 0,
},

2.將全局?jǐn)?shù)據(jù) ?buy 數(shù)組添加到我們購物車的 js 頁面中， 代碼如下：

setData

onLoad: function () {
?//通過 ?onload 函數(shù)加載數(shù)據(jù)
this.setData({
buy: app.globalData.buy,
});
},

3.計(jì)算商品數(shù)量， 代碼如下：

//計(jì)算數(shù)量
countNum: function () {
var that = this
//遍歷數(shù)組，把既選中的num加起來
var newList = that.data.buy
var allNum = 0
for (var i = 0; i < newList.length; i++) {
if (newList[i].select == "success") {
allNum += parseInt(newList[i].num)
}
}
parseInt
console.log(allNum)
that.setData({
num: allNum
})
},

4.計(jì)算商品金額，代碼如下：

//計(jì)算金額方法
count: function () {
var that = this
//選中的訂單，數(shù)量*價(jià)格加起來
var newList = that.data.buy
var newCount = 0
for (var i = 0; i < newList.length; i++) {
if (newList[i].select == "success") {
newCount += newList[i].num * newList[i].price
}
}
that.setData({
count: newCount
})
}
?
5.將購物車中的商品數(shù)量添加，代碼如下：

+

//商品數(shù)量增加函數(shù)
?addtion: function (e) {
var that = this
//得到下標(biāo)
var index = e.currentTarget.dataset.index
// 得到點(diǎn)擊的值
var num = e.currentTarget.dataset.num
num++
// 把新的值給新的數(shù)組
var newList = that.data.buy
newList[index].num = num
//把新的數(shù)組傳給前臺(tái)
that.setData({
buy: newList
})
//調(diào)用計(jì)算數(shù)目方法
that.countNum()
//計(jì)算金額
that.count()
},

6.將購物車中的商品數(shù)量減少，但數(shù)量減少到小于1時(shí)，該商品就會(huì)消失，代碼如下：

—

//商品數(shù)量減少
subtraction: function (e) {
var that = this
// 得到下標(biāo)
var index = e.currentTarget.dataset.index
//得到點(diǎn)擊的值
var num = e.currentTarget.dataset.num
//把新的值給新的數(shù)組
var newList = that.data.buy
//當(dāng)1件時(shí)，點(diǎn)擊移除
if (num == 1) {
newList.splice(index, 1)
} else {
num--
newList[index].num = num
}
// 把新的數(shù)組傳給前臺(tái)
that.setData({
buy: newList
})
//調(diào)用計(jì)算數(shù)目方法
that.countNum()
// 計(jì)算金額
that.count()
},

7.單選商品，結(jié)算金額

change: function (e) {
var that = this
//得到下標(biāo)
var index = e.currentTarget.dataset.index
//得到選中狀態(tài)
var select = e.currentTarget.dataset.select
console.log(e.currentTarget.dataset.select);
if (select == "circle") {
var stype = "success"
} else {
var stype = "circle"
}
//把新的值給新的數(shù)組
var newList = that.data.buy
newList[index].select = stype
//把新的數(shù)組傳給前臺(tái)
that.setData({
buy: newList
})
//調(diào)用計(jì)算數(shù)目方法
that.countNum()
//計(jì)算金額
that.count()
},

8.全選商品，并結(jié)算金額

全選

//全選
allSelect: function (e) {
var that = this
//先判斷現(xiàn)在選中沒
var allSelect = e.currentTarget.dataset.select
var newList = that.data.buy
if (allSelect == "circle") {
//先把數(shù)組遍歷一遍，然后改掉select值
for (var i = 0; i < newList.length; i++) {
newList[i].select = "success"
}
var select = "success"
} else {
for (var i = 0; i < newList.length; i++) {
newList[i].select = "circle"
}
var select = "circle"
}
that.setData({
buy: newList,
allSelect: select
})
//調(diào)用計(jì)算數(shù)目方法
that.countNum()
//計(jì)算金額
that.count()
},

希望有興趣的朋友一起討論，一起切磋，歡迎交流 QQ：（1920459934）?
歡迎進(jìn)入我的github瀏覽 ? ?