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

Welcome to miaomiaoXiong"s segmentfault

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

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

話不多說，扔個代碼看看：

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

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

swiper 屬性具體小提示

兩個小動畫： 加購小車左右搖擺動畫效果， 收藏小愛心動畫效果。

點擊圖中的購買圖片，我們的購物車就會隨之扭扭身體，表示已經加入購物車? ， 具體代碼如下：

在 wxml 中添加 animation="{{rorateAnimation}}" 動畫。
animation 動畫

? ? ?

在對應的 js 中將購物車加購動畫具體實現, 當 goumai: function() 觸發時，創建動畫 wx.createAnimation() , 通過 animation.rotate().step() 實現加購中小車搖擺的過程，代碼如下：

biadtap 事件

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

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

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

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

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

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

?首先我們要在 easy-mock 上創建一份自己的數據，
easy-mock 點擊進入

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

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

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

globalData: {
buy:[]
}

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

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

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

在對應的 js 文件中具體實現 buy 事件代碼如下：

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

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

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

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

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

setData

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

3.計算商品數量， 代碼如下：

//計算數量
countNum: function () {
var that = this
//遍歷數組，把既選中的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.計算商品金額，代碼如下：

//計算金額方法
count: function () {
var that = this
//選中的訂單，數量*價格加起來
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.將購物車中的商品數量添加，代碼如下：

+

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

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

—

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

7.單選商品，結算金額

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

8.全選商品，并結算金額

全選

//全選
allSelect: function (e) {
var that = this
//先判斷現在選中沒
var allSelect = e.currentTarget.dataset.select
var newList = that.data.buy
if (allSelect == "circle") {
//先把數組遍歷一遍，然后改掉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
})
//調用計算數目方法
that.countNum()
//計算金額
that.count()
},

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