微信小程序開(kāi)發(fā)項(xiàng)目實(shí)戰(zhàn)（微課版）課件 項(xiàng)目7 購(gòu)物車(chē)模塊開(kāi)發(fā)

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

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

在購(gòu)物車(chē)頁(yè)面讀取本地緩存中的商品信息，并展示在列表中。

2、商品信息存入本地緩存在點(diǎn)擊事件中，將商品信息存入本地緩存中，并提示用戶“加入成功”。1、“加入購(gòu)物車(chē)”按鈕

在商品詳情頁(yè)添加“加入購(gòu)物車(chē)”按鈕，并綁定點(diǎn)擊事件。實(shí)現(xiàn)購(gòu)物車(chē)

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

data:

{

cartList:[{

id:1,

goodsNo:'202108675',

thumbnail:'/images/goods1.jpg',

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

quantity:2,

salePrice:72,

color:'紅'

}

],

//購(gòu)物車(chē)商品列表

colorGoods:[],

//購(gòu)物車(chē)?yán)锷唐匪x的顏色

hasResult:true,

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

isChecked:false,

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

isCheckAll:false,

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

},})

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

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

在小程序開(kāi)發(fā)中，購(gòu)物車(chē)模塊一般包括商品列表、商品金額計(jì)算、商品數(shù)量增減、商品所選規(guī)格等，小程序提供了各類(lèi)API和組件為實(shí)現(xiàn)商品購(gòu)物車(chē)提供了便利。購(gòu)物車(chē)視圖頁(yè)面<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>

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

謝

觀

看THANK項(xiàng)目七購(gòu)物車(chē)模塊開(kāi)發(fā)任務(wù)二購(gòu)物車(chē)頁(yè)面詳情ShoppingcartpageDetails

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

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

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

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

為商品數(shù)量“-”和“+”按鈕添加reduceCount和addCount函數(shù)，實(shí)現(xiàn)購(gòu)物車(chē)商品數(shù)據(jù)的增加與減少。購(gòu)物車(chē)商品數(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ù)組的每個(gè)元素，并將元素傳遞給回調(diào)函數(shù)。購(gòu)物車(chē)商品數(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文件中，不管是減號(hào)還是加號(hào)按鈕，當(dāng)點(diǎn)擊時(shí)，都需要進(jìn)行總金額的計(jì)算，所以先完成計(jì)算總金額函數(shù)settleCount，獲得選中的商品，如果商品isChecked屬性為真時(shí)，則對(duì)商品的金額進(jìn)行計(jì)算。代碼如下。購(gòu)物車(chē)商品列表

<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>購(gòu)物車(chē)底部信息

<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">

總價(jià)：<text

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

</view>

<view

class="btn

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

</view>

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

wx:else

class="no-result">

<view

class="no-content">

<image

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

<text>暫無(wú)商品</text>

<button

class="go-list"

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

</view></view>

當(dāng)購(gòu)物車(chē)頁(yè)面為空時(shí)，購(gòu)物車(chē)頁(yè)面將定向到商品列表頁(yè)面。購(gòu)物車(chē)為空狀態(tài)

gotoList:function(){

wx.navigateTo({

url:

'/pages/goodsList/goodsList'

})

}

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

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

wx.navigateTo({

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

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

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

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

謝

觀

看THANK項(xiàng)目七購(gòu)物車(chē)模塊開(kāi)發(fā)任務(wù)三購(gòu)物車(chē)結(jié)算金額Cartpaymentamount在商城系統(tǒng)中，購(gòu)物車(chē)結(jié)算是必備的一個(gè)環(huán)節(jié)。購(gòu)物車(chē)結(jié)算功能是遍歷每個(gè)模塊中的商品?計(jì)進(jìn)?累加就是購(gòu)物車(chē)結(jié)算總額。本案例提供了一種購(gòu)物結(jié)算方法和購(gòu)物車(chē)，根據(jù)用戶獲取已購(gòu)買(mǎi)的商品信息，進(jìn)行購(gòu)物結(jié)算，提高購(gòu)物效率，進(jìn)而提高用戶體驗(yàn)。項(xiàng)目七購(gòu)物車(chē)模塊開(kāi)發(fā)任務(wù)描述單選產(chǎn)品金額計(jì)算在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)，計(jì)算總價(jià)和商品總數(shù)量，購(gòu)物車(chē)中可以通過(guò)增加或減少按鈕來(lái)修改商品數(shù)量。單選產(chǎn)品金額計(jì)算-every函數(shù)vararray=;varresult=array.every(function(value,index,arr){returnvalue>3;});console.log(result);在這個(gè)例子中，數(shù)組中的第一個(gè)元素1不滿足條件（value>3），因此every函數(shù)立即返回false，不會(huì)繼續(xù)遍歷剩余的元素。

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

let

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

that.setData({

totalPrice:totalPrice,

isCheckAll:isAll

})

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