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

Welcome to miaomiaoXiong's segmentfault

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

買買買，雖然雙十二剛過，但是惟品會的折扣倒是依然火爆。一打開頁面，即是粉色的主頁映入眼簾，琳琅滿目的商品，讓我這個月光族過了把眼癮。雖然買不起，那就本身模仿着寫一個，把喜歡的商品一個個推動小推車裏。（?）下面爲你們分享一個把惟品會裏面的精緻商品推動本身購物車的微信小程序，?

主要實現功能--購物車加購

話很少說，扔個代碼看看：

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

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

<swiper class="swiper" indicator-dots="true" autoplay="true" interval="5000" duration="2000">

<block wx:for="{{movies}}" wx:key="key">
  <swiper-item>
    <image src="{{item.url}}" class="slide-image" mode="widthfix" />
  </swiper-item>
</block>

</swiper>

swiper 屬性具體小提示

動畫效果

1. 購物車搖擺動畫

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

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

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

<image src='../../assets/icons/shopping.png' animation="{{rorateAnimation}}">       </image>

在對應的 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(),
})
},

2.愛心收藏動畫

送走了購物車的加購動畫，下面爲你們分享一個收藏動畫， 愛心 ♥
相似以前的購物車動畫，首先咱們在 wxml 中綁定事件 bindtap='shoucang' ,一樣使用 animation="{{enlargeAnimation}}"  獲取動畫效果， 代碼以下：

<image src='../../assets/icons/shoucang.png' animation="{{enlargeAnimation}}" bindtap='shoucang'></image>

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()
})
},

是否是以爲超級簡單， 經過一個事件綁定秀出你的神操做。

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

數據流程步驟

1.easy-mock 建立數據

 首先咱們要在 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
}
})
},

2.設置全局變量

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

globalData: {
buy:[]
}

3.獲取全局數據並引用

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

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

4.bindtap 事件綁定

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

<image src='../../assets/icons/goumai.png' data-id="{{item.id}}" bindtap='buy'></image>

在對應的 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.將購物車中的商品數量添加，代碼以下：

<button class="goods-btn btn-add" data-index="{{index}}" data-num="{{item.num}}" bindtap="addtion">+</button>

//商品數量增長函數
 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時，該商品就會消失，代碼以下：

<button class="goods-btn btn-minus" data-index="{{index}}" data-num="{{item.num}}" bindtap="subtraction">—</button>

//商品數量減小
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.單選商品，結算金額

<icon type="{{item.select}}" size="26" data-index="{{index}}" data-select="{{item.select}}" bindtap="change" />
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.全選商品，並結算金額

<view class="allSelect">
<icon type="{{allSelect}}" size="26" data-select="{{allSelect}}" bindtap="allSelect" />
<view class="allSelect-text">全選</view>
</view>
//全選
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瀏覽 ?