小程序商城購物車功能開發(fā)方法
小程序商城購物車功能是非常普遍的一個為大家介紹的就是購物車,這里演示從商品列表中添加到購物車。
下面先做商品列表頁。如
布局分析:
首先一個list的主盒子,接著是item盒子,這是必須的。
然后把item分成左側(cè)的圖片部分,和右側(cè)的說明部分(item盒子使用橫向彈性盒)
右側(cè)的說明部分又分上下2部分(右側(cè)說明部分盒子使用縱向彈性盒)
下面價錢購物車部分(下面價錢購物車部分也使用橫向彈性盒,中間使用justify-content: space-between;填充空白)
index.wxml:
<!--主盒子--> <view class="container"> <!--head--> <view class="tit"> <view class="title_val">商品列表</view> <view class="more">更多</view> </view> <!--list--> <view class="goodslist"> <!--item--> <block wx:for="{{goodslist}}"> <view class="goods"> <!--左側(cè)圖片盒子--> <view> <img class="good-img" src="{{item.imgUrl}}" /> </view> <!--右側(cè)說明部分--> <view class="good-cont"> <!--上--文字說明--> <view class="goods-navigator"> <text class="good-name">{{item.name}}</text> </view> <!--下--價格部分--> <view class="good-price"> <text>¥{{item.price}}</text> <img bindtap="addcart" class="cart" id="{{item.id}}" src="/images/new_73.jpg" /> </view> </view> </view> </block> </view> </view>
index.wxss:
<code class="language-text">[css] view plain copy /**index.wxss**/ page{ height: 100%; } .container{ background: #f5f5f5; } .tit{ display: flex; flex-direction: row; justify-content: space-between; height: 30px; position: relative; } .tit::before{ content:''; background: #ffcc00; width:5px; height: 100%; position: absolute; left: 0; top: 0; } .title_val{ padding: 0 15px; font-size: 14px; color: #555; line-height: 30px; } .more{ font-size: 12px; line-height: 30px; color: #999; padding: 0 5px 0 0 ; } .goodslist{ background: #fff; display: flex; flex-direction: column; } .goods{ display: flex; flex-direction: row; border-bottom: 1px solid #ddd; } .good-img{ padding: 5px; width: 80px; height: 80px; } .good-cont{ display: flex; flex: 1; flex-direction: column; font-size: 14px; } .goods-navigator{ display: flex; flex: 1; flex-direction: column; justify-content: center; } .good-name{ display: flex; flex: 1; flex-direction: column; color: #555; justify-content: center; } .good-price{ display: flex; flex: 1; flex-direction: row; justify-content: space-between; color:#e4393c; font-weight: 600; } .cart{ width: 40px; height: 40px; padding-right: 10px; } </code>
index.js:
數(shù)據(jù)部分,一般情況都是訪問接口獲取數(shù)據(jù)的,這里并沒有使用網(wǎng)絡(luò)訪問,為了簡化demo,直接把一組數(shù)據(jù)放在data對象中。同學(xué)們可以根據(jù)其數(shù)據(jù)結(jié)構(gòu)自己編寫后臺接口。
<code class="language-text">[javascript] view plain copy Page({ data: { goodslist: [ { id:"001", imgUrl:"https://img5.imgtn.bdimg.com/it/u=2906541843,1492984080&fm=23&gp=0.jpg", name:"女裝T恤中長款大碼擺裙春夏新款", price:"65.00" }, { id:"002", imgUrl:"https://img4.imgtn.bdimg.com/it/u=1004404590,1607956492&fm=23&gp=0.jpg", name:"火亮春秋季 男青年修身款圓領(lǐng)男士T恤", price:"68.00" }, { id:"003", imgUrl:"https://img1.imgtn.bdimg.com/it/u=2305064940,3470659889&fm=23&gp=0.jpg", name:"新款立體掛脖t恤女短袖大碼寬松條紋V領(lǐng)上衣顯瘦休閑春夏", price:"86.00" }, { id:"004", imgUrl:"https://img4.imgtn.bdimg.com/it/u=3986819380,1610061022&fm=23&gp=0.jpg", name:"男運(yùn)動上衣春季上新品 上衣流行裝青年", price:"119.00" }, { id:"005", imgUrl:"https://img1.imgtn.bdimg.com/it/u=3583238552,3525141111&fm=23&gp=0.jpg", name:"時尚字母三角露胸t恤女裝亮絲大碼寬松不規(guī)則春夏潮", price:"69.00" }, { id:"006", imgUrl:"https://img2.imgtn.bdimg.com/it/u=1167272381,3361826143&fm=23&gp=0.jpg", name:"新款立體掛脖t恤短袖大碼寬松條紋V領(lǐng)上衣顯瘦休閑春夏", price:"86.00" }, { id:"007", imgUrl:"https://img0.imgtn.bdimg.com/it/u=789486313,2033571593&fm=23&gp=0.jpg", name:"時尚字母三角露胸t恤女裝亮絲大碼寬松不規(guī)則春夏潮", price:"119.00" }, { id:"008", imgUrl:"https://img2.imgtn.bdimg.com/it/u=3314044863,3966877419&fm=23&gp=0.jpg", name:"男運(yùn)動上衣春季上新品 上衣流行裝青年", price:"69.00" }, ] }, // 加入購物車 addcart:function(e){ this.setData({ toastHidden:false }); // 遍歷列表 與 購物車列表 for (var i in this.data.goodslist){ // 列表中某一項(xiàng)item的id == 點(diǎn)擊事件傳遞過來的id。則是被點(diǎn)擊的項(xiàng) if(this.data.goodslist[i].id == e.target.id){ // 給goodsList數(shù)組的當(dāng)前項(xiàng)添加count元素,值為1,用于記錄添加到購物車的數(shù)量 this.data.goodslist[i].count = 1; // 獲取購物車的緩存數(shù)組(沒有數(shù)據(jù),則賦予一個空數(shù)組) var arr = wx.getStorageSync('cart') || []; // 如果購物車有數(shù)據(jù) if(arr.length>0){ // 遍歷購物車數(shù)組 for(var j in arr){ // 判斷購物車內(nèi)的item的id,和事件傳遞過來的id,是否相等 if(arr[j].id == e.target.id){ // 相等的話,給count+1(即再次添加入購物車,數(shù)量+1) arr[j].count = arr[j].count + 1; // 最后,把購物車數(shù)據(jù),存放入緩存(此處不用再給購物車數(shù)組push元素進(jìn)去,因?yàn)檫@個是購物車有的,直接更新當(dāng)前數(shù)組即可) try { wx.setStorageSync('cart', arr) } catch (e) { console.log(e) } // 返回(在if內(nèi)使用return,跳出循環(huán)節(jié)約運(yùn)算,節(jié)約性能) return; } } // 遍歷完購物車后,沒有對應(yīng)的item項(xiàng),把goodslist的當(dāng)前項(xiàng)放入購物車數(shù)組 arr.push(this.data.goodslist[i]); } // 購物車沒有數(shù)據(jù),把item項(xiàng)push放入當(dāng)前數(shù)據(jù)(第一次存放時) else{ arr.push(this.data.goodslist[i]); } // 最后,把購物車數(shù)據(jù),存放入緩存 try { wx.setStorageSync('cart', arr) // 返回(在if內(nèi)使用return,跳出循環(huán)節(jié)約運(yùn)算,節(jié)約性能) return; } catch (e) { console.log(e) } } } } }) </code>
編寫購物車部分,如下圖所示:
布局分析:
首先一個list的主盒子,接著是item盒子,這是必須的。
然后把item分成左側(cè)的圖片部分,和右側(cè)的說明部分(item盒子使用橫向彈性盒)
右側(cè)的說明部分又分上下2部分(右側(cè)說明部分盒子使用縱向彈性盒)
下面價錢、購物加減、購物車部分(使用縱向彈性盒)
最下面的購物加減、購物車部分(使用橫向彈性盒,中間使用justify-content: space-between;填充空白)
cart.wxml:
<code class="language-text">[html] view plain copy <!--要是夠車內(nèi)沒有數(shù)據(jù),就行顯示沒有數(shù)據(jù)--> <view class="cart" hidden="{{iscart}}"> <img src="/images/cart.png" /> <view>購物車什么都沒有,趕快去購物吧</view> </view> <!--要是有數(shù)據(jù),就顯示數(shù)據(jù)--> <view class="cartList" hidden="{{!iscart}}"> <!--header--> <view class="baoyou"></view> <!--list item--> <block wx:for="{{cart}}"> <view class="goods"> <!--左側(cè)圖片--> <view> <img class="good-img" src="{{item.imgUrl}}" /> </view> <!--右側(cè)說明部分--> <view class="good-cont"> <!--文字說明--> <view class="goods-navigator"> <text class="good-name">{{item.name}}</text> </view> <!--價錢和購物加減的父盒子--> <view class="good-price"> <text class="price">¥{{item.price}}</text> <view class="btn-box"> <view class="btn"><button bindtap="delCount" id="del{{index}}" size="mini" type="default">-</button> <input value="{{item.count}}" /><button bindtap="addCount" id="add{{index}}" size="mini" type="default">+</button> </view> <img bindtap="delGoods" id="img{{index}}" src="/images/del2.png" /> </view> </view> </view> </view> </block> <!--footer--> <view class="total"> <view class="total_text">合計(jì):<text>¥{{total}}</text></view><button class="total_js" size="mini">去結(jié)算({{goodsCount}})</button> </view> </view> </code>
cart.wxss:
<code class="language-text">[css] view plain copy page { background: #f2ebe3; } .cart { padding: 100px 0 0 0; display: flex; justify-content: center; flex-direction: column; align-items: center; color: #999; } .cart image { width: 66px; height: 66px; margin-bottom: 20px; } .baoyou { font-size: 18px; color: #db2929; padding: 10px; } .goods { background: #fff; border-top: 1px solid #ddd; margin-bottom: 10px; padding: 10px 10px 0 10px; display: flex; } .goods image { width: 80px; height: 80px; border: 1px solid #ddd; } .goods .good-cont { display: flex; flex: 1; flex-direction: column; color: #555; font-size: 14px; padding: 5px; height: 100px; } .goods .good-cont .goods-navigator { display: flex; flex: 2; } .goods .good-cont .good-price { display: flex; flex-direction: column; flex: 3; } .goods .good-cont .good-price .price { font-size: 16px; color: #ec5151; } .goods .good-cont .good-price .btn-box { display: flex; flex-direction: row; justify-content: space-between; } .goods .good-cont .good-price .btn-box image { width: 23px; height: 23px; border: 0; margin: 0; } .goods .good-cont .good-price .btn { display: flex; flex-direction: row; } .goods .good-cont .good-price .btn input { margin: 0; width: 40px; text-align: center; border: 1px solid #eee; font-size: 16px; height: 28px; } .goods .good-cont .good-price .btn button { margin: 0; } .total { height: 40px; display: flex; flex-direction: row; justify-content: space-between; padding: 0 20px; } .total .total_text { display: flex; color: #777; } .total .total_text text { color: #ec5151; } .total .total_js { color: #fff; background: #ec5151; height: 30px; margin: 0; } </code></pre> </p> <p>cart.js:</p> <p class="highlight"> <pre> <code class="language-text">[html] view plain copy Page({ data: { iscart: false, cart: [], //數(shù)據(jù) count: 1, //商品數(shù)量默認(rèn)是1 total: 0, //總金額 goodsCount: 0 //數(shù)量 }, onLoad: function (options) { }, onShow: function () { var that = this; // 獲取產(chǎn)品展示頁保存的緩存數(shù)據(jù)(購物車的緩存數(shù)組,沒有數(shù)據(jù),則賦予一個空數(shù)組) var arr = wx.getStorageSync('cart') || []; // 有數(shù)據(jù)的話,就遍歷數(shù)據(jù),計(jì)算總金額 和 總數(shù)量 if (arr.length > 0) { for (var i in arr) { that.data.total += Number(arr[i].price) * Number(arr[i].count); that.data.goodsCount += Number(arr[i].count); } // 更新數(shù)據(jù) this.setData({ iscart: true, cart: arr, total: that.data.total, goodsCount: that.data.goodsCount }); } }, onHide: function(){ // 清除數(shù)據(jù) this.setData({ iscart: false, cart: [], //數(shù)據(jù) total: 0, //總金額 goodsCount: 0 //數(shù)量 }); }, /* 減數(shù) */ delCount: function (e) { console.log(e) // 獲取購物車該商品的數(shù)量 // [獲取設(shè)置在該btn的id,即list的index值] if (this.data.cart[e.target.id.substring(3)].count <= 1) { return; } // 商品總數(shù)量-1 this.data.goodsCount -= 1; // 總價錢 減去 對應(yīng)項(xiàng)的價錢單價 this.data.total -= Number(this.data.cart[e.target.id.substring(3)].price); // 購物車主體數(shù)據(jù)對應(yīng)的項(xiàng)的數(shù)量-1 并賦給主體數(shù)據(jù)對應(yīng)的項(xiàng)內(nèi) this.data.cart[e.target.id.substring(3)].count = --this.data.cart[e.target.id.substring(3)].count; // 更新data數(shù)據(jù)對象 this.setData({ cart: this.data.cart, total: this.data.total, goodsCount: this.data.goodsCount }) // 主體數(shù)據(jù)重新賦入緩存內(nèi) try { wx.setStorageSync('cart', this.data.cart) } catch (e) { console.log(e) } }, /* 加數(shù) */ addCount: function (e) { // 商品總數(shù)量+1 this.data.goodsCount += 1; // 總價錢 加上 對應(yīng)項(xiàng)的價錢單價 this.data.total += Number(this.data.cart[e.target.id.substring(3)].price); // 購物車主體數(shù)據(jù)對應(yīng)的項(xiàng)的數(shù)量+1 并賦給主體數(shù)據(jù)對應(yīng)的項(xiàng)內(nèi) this.data.cart[e.target.id.substring(3)].count = ++this.data.cart[e.target.id.substring(3)].count; // 更新data數(shù)據(jù)對象 this.setData({ cart: this.data.cart, total: this.data.total, goodsCount: this.data.goodsCount }) // 主體數(shù)據(jù)重新賦入緩存內(nèi) try { wx.setStorageSync('cart', this.data.cart) } catch (e) { console.log(e) } }, /* 刪除item */ delGoods: function (e) { // 商品總數(shù)量 減去 對應(yīng)刪除項(xiàng)的數(shù)量 this.data.goodsCount = this.data.goodsCount - this.data.cart[e.target.id.substring(3)].count; // 總價錢 減去 對應(yīng)刪除項(xiàng)的單價*數(shù)量 this.data.total -= this.data.cart[e.target.id.substring(3)].price * this.data.cart[e.target.id.substring(3)].count; // 主體數(shù)據(jù)的數(shù)組移除該項(xiàng) this.data.cart.splice(e.target.id.substring(3), 1); // 更新data數(shù)據(jù)對象 this.setData({ cart: this.data.cart, total: this.data.total, goodsCount: this.data.goodsCount }) // 主體數(shù)據(jù)重新賦入緩存內(nèi) try { wx.setStorageSync('cart', this.data.cart) } catch (e) { console.log(e) } } }) </code>
demo:https://download.csdn.net/detail/michael_ouyang/9825344