微信小程序開發(fā)項目實戰(zhàn)（微課版）課件 項目7 購物車模塊開發(fā)

項目七購物車模塊開發(fā)任務(wù)一購物車模塊開發(fā)Shoppingcartmoduledevelopment在小程序開發(fā)中，購物車模塊一般包括商品列表、商品金額計算、商品數(shù)量增減、商品所選規(guī)格等，小程序提供了各類API和組件為實現(xiàn)商品購物車提供了便利。項目七購物車模塊開發(fā)任務(wù)描述購物車功能6、底部添加結(jié)算按鈕在底部添加“全選”按鈕、“合計”文本、“去結(jié)算”按鈕，并綁定相應(yīng)的事件。5、計算選中商品的總金額

在事件中，更新本地緩存中的商品信息，并計算選中商品的總金額。4、列表中添加組件在列表中添加選擇框、數(shù)量輸入框、刪除按鈕等控件，并綁定相應(yīng)的事件。3、讀取本地緩存

在購物車頁面讀取本地緩存中的商品信息，并展示在列表中。

2、商品信息存入本地緩存在點擊事件中，將商品信息存入本地緩存中，并提示用戶“加入成功”。1、“加入購物車”按鈕

在商品詳情頁添加“加入購物車”按鈕，并綁定點擊事件。實現(xiàn)購物車

購物車功能是指在電商平臺上，用戶可以將自己想要購買的商品添加到一個虛擬的購物籃中，然后在合適的時候進(jìn)行結(jié)算和支付的功能。購物車功能可以讓用戶更方便地瀏覽和比較商品，也可以讓用戶更靈活地控制自己的消費(fèi)預(yù)算和時間。購物車功能-邏輯實現(xiàn)wx.login獲取code碼登錄成功后，顯示購物車頁面獲取當(dāng)前被點擊的商品的索引值商品數(shù)量加減刪除1、登錄授權(quán)3、購物車商品數(shù)量操作獲取本地token從服務(wù)器拿到的物品數(shù)據(jù)2、wx.request請求購物車任何一次觸發(fā)該函數(shù)，都會重新計算價格再進(jìn)行選中項的價格累加6、計算總價會觸發(fā)計算總價的方法4、單選事件每個商品都應(yīng)該是選中狀態(tài)會觸發(fā)計算總價的方法5、全選事件邏輯實現(xiàn)過程定義基礎(chǔ)數(shù)據(jù)Page({

data:

{

cartList:[{

id:1,

goodsNo:'202108675',

thumbnail:'/images/goods1.jpg',

title:'澳洲臘梅鮮花|花期長|有香味水養(yǎng)冬天應(yīng)季',

quantity:2,

salePrice:72,

color:'紅'

}

],

//購物車商品列表

colorGoods:[],

//購物車?yán)锷唐匪x的顏色

hasResult:true,

//判斷購物車?yán)锸欠裼袛?shù)據(jù)

isChecked:false,

//單選，默認(rèn)為false

isCheckAll:false,

//全選，默認(rèn)為false

},})

打開pages/goodsCart/goodsCart.js文件的data對象中定義基礎(chǔ)數(shù)據(jù)，代碼如下所示。定義基礎(chǔ)數(shù)據(jù)

cartList是指購物車商品列表，colorGoods是指選中購買商品的顏色，hasResult用于判斷購物車?yán)锸欠裼袛?shù)據(jù)。isChecked用于商品左側(cè)復(fù)選框，定義單個商品是否被選中。isCheckAll用于頁面底部全選復(fù)選框，定義購物車中的商品是否被選中。購物車模塊

在小程序開發(fā)中，購物車模塊一般包括商品列表、商品金額計算、商品數(shù)量增減、商品所選規(guī)格等，小程序提供了各類API和組件為實現(xiàn)商品購物車提供了便利。購物車視圖頁面<view

class="cart">

<block

wx:if="{{hasResult}}">

<view

class="top-cart"></view>

<view

class="item-list"></view>

<view

class="total-cart"></view></block><view

wx:else

class="no-result"></view></view>

購物車頁面主要包括上部購物車商品信息、中間購物車商品列表和底部購物車結(jié)算信息，每個商品左邊有單選，底部可以通過全選操作商品，用戶可以選中商品，或者滑動操作查看右邊的商品。感

謝

觀

看THANK項目七購物車模塊開發(fā)任務(wù)二購物車頁面詳情ShoppingcartpageDetails

購物車頁面設(shè)計應(yīng)該注重用戶界面的友好性和直觀性。購物車頁面應(yīng)該具有清晰簡潔的布局，突出顯示重要信息，讓用戶一目了然。購物車詳情頁面應(yīng)該包括商品名稱、價格、數(shù)量、小計、刪除和結(jié)算等基本信息。項目七購物車模塊開發(fā)任務(wù)描述購物車商品列表屬性類型描述bindchangeEventHandlecheckbox-group選中項發(fā)生改變時觸發(fā)change事件，detail={value:[選中的checkbox的value的數(shù)組]}屬性類型默認(rèn)值描述valuestring

checkbox標(biāo)識，選中時觸發(fā)checkbox-group的change事件，并攜帶checkbox的valuedisabledbooleanfalse是否禁用checkedbooleanfalse當(dāng)前是否選中，可用來設(shè)置默認(rèn)選中colorstring#09BB07checkbox的顏色，同css的color

checkbox-group多項選擇器，內(nèi)部由多個checkbox組成。

購物車?yán)锏纳唐纷筮呌袕?fù)選框，使用小程序的表單組件checkbox，該組件包含了四個屬性值。購物車商品數(shù)量

為商品數(shù)量“-”和“+”按鈕添加reduceCount和addCount函數(shù)，實現(xiàn)購物車商品數(shù)據(jù)的增加與減少。購物車商品數(shù)量data:{

users:[

{name:'小明',age:28},

{name:'小紅',age:39},

{name:'小李',age:40},

{name:'小張',age:30}

]},onLoad(options){

letinfo=this.data.users;

info.forEach(function(item,index){

console.log(index+'姓名：'+info[index].name+'年齡：'+info[index].age);

})

info.forEach((item,index)=>{

console.log(index+'姓名：'++'年齡：'+item.age);})}

forEach()方法用于調(diào)用數(shù)組的每個元素，并將元素傳遞給回調(diào)函數(shù)。購物車商品數(shù)量

settleCount(){

let

totalPrice=0;

this.data.cartList.forEach(item=>{

if(item.isChecked){

totalPrice+=item.salePrice*item.

quantity

}

})

this.setData({

totalPrice:totalPrice

})

},

在pages/goodsCart/goodsCart.js文件中，不管是減號還是加號按鈕，當(dāng)點擊時，都需要進(jìn)行總金額的計算，所以先完成計算總金額函數(shù)settleCount，獲得選中的商品，如果商品isChecked屬性為真時，則對商品的金額進(jìn)行計算。代碼如下。購物車商品列表

<view

class="oper">

<view

class="reduce"data-id="{{item.id}}"

bindtap="reduceCount"

>-</view>

<input

value="{{item.quantity}}"

type="number"/>

<view

class="add"

data-id="{{item.id}}"

bindtap="addCount">+</view>

<viewclass="btn-del"data-index="{{item.id}}"bindtap="btnDel">刪除</view></view>購物車底部信息

<view

class="total-cart">

<view

class="all">

<checkbox-group

bindchange="checkAll">

<checkbox

value="1"

checked="false"></checkbox>

<text>全選</text>

</checkbox-group>

</view>

<view

class="total-price">

總價：<text

class="price">￥{{totalPrice}}</text>

</view>

<view

class="btn

btn-primary">去結(jié)算</view>

</view>

購物車底部信息包含了三個內(nèi)容，全選的復(fù)選框，選中的商品總價，結(jié)算按鈕。在pages/goodsCart/goodsCart.wxml文件中，為"total-cart"視圖容器編寫頁面布局代碼：購物車為空狀態(tài)<view

wx:else

class="no-result">

<view

class="no-content">

<image

src="/images/cring.png"></image>

<text>暫無商品</text>

<button

class="go-list"

bindtap="gotoList">前往添加商品</button>

</view></view>

當(dāng)購物車頁面為空時，購物車頁面將定向到商品列表頁面。購物車為空狀態(tài)

gotoList:function(){

wx.navigateTo({

url:

'/pages/goodsList/goodsList'

})

}

在pages/goodsCart/goodsCart.js文件中，實現(xiàn)bindtap="gotoList"，當(dāng)購物車為空時，跳轉(zhuǎn)到商品列表頁面選購商品。購物車為空狀態(tài)表wx.navigateTo參數(shù)屬性類型必填描述urlstring是需要跳轉(zhuǎn)到應(yīng)用內(nèi)非tabBar頁面的路徑(代碼包路徑),路徑后可以帶參數(shù)。參數(shù)與路徑之間使用?分隔，參數(shù)鍵與參數(shù)值用=相連，不同參數(shù)用&分隔；如'path?key=value&key2=value2'eventsObject否頁面間通信接口，用于監(jiān)聽被打開頁面發(fā)送到當(dāng)前頁面的數(shù)據(jù)。successfunction否接口調(diào)用成功的回調(diào)函數(shù)，eventChannel參數(shù)，和被打開頁面進(jìn)行通信failfunction否接口調(diào)用失敗的回調(diào)函數(shù)completefunction否接口調(diào)用結(jié)束的回調(diào)函數(shù)（調(diào)用成功、失敗都會執(zhí)行）

wx.navigateTo(Objectobject)保留當(dāng)前頁面，跳轉(zhuǎn)到應(yīng)用內(nèi)的某個頁面。但是不能跳到tabbar頁面。使用wx.navigateBack可以返回到原頁面。小程序中頁面棧最多十層。購物車為空狀態(tài)

wx.navigateTo({

url:'test?id=1',events:{//為指定事件添加一個監(jiān)聽器，獲取被打開頁面?zhèn)魉偷疆?dāng)前頁面的數(shù)據(jù)

acceptDataFromOpenedPage:function(data){console.log(data)},},success:function(res){//通過eventChannel向被打開頁面?zhèn)魉蛿?shù)據(jù)res.eventChannel.emit('acceptDataFromOpenerPage',{data:'test'})}})

舉例說明wx.navigateTo(Objectobject)的使用。課程思政

黨的二十大報告提出:“要實現(xiàn)高水平科技自立自強(qiáng)，建設(shè)科技強(qiáng)國”，同學(xué)們，你覺得如何加快建設(shè)科技強(qiáng)國，從而實現(xiàn)高水平科技自立自強(qiáng)?同學(xué)們通過小組合作、翻閱相關(guān)文件完成以下腦圖，如圖所示。感

謝

觀

看THANK項目七購物車模塊開發(fā)任務(wù)三購物車結(jié)算金額Cartpaymentamount在商城系統(tǒng)中，購物車結(jié)算是必備的一個環(huán)節(jié)。購物車結(jié)算功能是遍歷每個模塊中的商品?計進(jìn)?累加就是購物車結(jié)算總額。本案例提供了一種購物結(jié)算方法和購物車，根據(jù)用戶獲取已購買的商品信息，進(jìn)行購物結(jié)算，提高購物效率，進(jìn)而提高用戶體驗。項目七購物車模塊開發(fā)任務(wù)描述單選產(chǎn)品金額計算在pages/goodsCart/goodsCart.wxml文件中，為checkbox設(shè)置value、checked屬性值。<checkbox

value="{{item.id}}"

checked="{{item.isChecked}}"></checkbox>在pages/goodsCart/goodsCart.js文件中，為單選checkbox-group綁定checkboxChange處理函數(shù)。<checkbox-group

bindchange="checkboxChange"

>此代碼省略</checkbox-group>

單選功能可以改變選中狀態(tài)，計算總價和商品總數(shù)量，購物車中可以通過增加或減少按鈕來修改商品數(shù)量。單選產(chǎn)品金額計算-every函數(shù)vararray=;varresult=array.every(function(value,index,arr){returnvalue>3;});console.log(result);在這個例子中，數(shù)組中的第一個元素1不滿足條件（value>3），因此every函數(shù)立即返回false，不會繼續(xù)遍歷剩余的元素。

every函數(shù)是JavaScript中的一個數(shù)組方法，用于檢測數(shù)組中的所有元素是否都符合指定的條件。every函數(shù)遍歷數(shù)組中的每一個元素，如果所有元素都滿足回調(diào)函數(shù)規(guī)定的條件，則返回true；如果數(shù)組中有一個元素不滿足條件，則立即停止遍歷并返回false。單選產(chǎn)品金額計算

let

isAll=list.every(item=>item.isChecked)

that.setData({

totalPrice:totalPrice,

isCheckAll:isAll

})

使用every()方法檢測商品的isChecked是否為true，如果為true，則對商品進(jìn)行統(tǒng)計。單選產(chǎn)品金額計算-some()函數(shù)array.some(function(currentValue,index,arr),thisValue)function(currentValue,index,arr)必須?；卣{(diào)函數(shù)，數(shù)組中的每個元素都會執(zhí)行這個函數(shù)。currentValue必須