cart/index.jsx頁(yè)面代碼
import Taro, { Component } from '@tarojs/taro'
import { View, Checkbox, CheckboxGroup } from '@tarojs/components' 
//用到了taro的三個(gè)組件
//想了解可以去查看taro的官方文檔
import './index.scss'
import { AtButton, AtInputNumber, AtCard } from 'taro-ui'
import { request, toast } from '../../utils/index'

class Index extends Component {
 constructor(props) {
  super(props)
  this.state = {
   message: '', //購(gòu)物車為空時(shí)顯示的信息
   cartdata: [], //購(gòu)物車的數(shù)據(jù)列表
   isactive: false, //全選按鈕是否選中
   check:false, //單個(gè)商品購(gòu)物車是否被選中
   totalnum:0, //總數(shù)量
   totalprice:0, //總價(jià)格
   activedata:[] //復(fù)選框選中的數(shù)據(jù)列表
  }

 }
 componentDidShow () {
  //獲取購(gòu)物車數(shù)據(jù)
  try {
   const token = Taro.getStorageSync('token') //這兩個(gè)數(shù)據(jù)是我在登錄頁(yè)面，登錄時(shí)添加到本地的token和用戶id
   const userid = Taro.getStorageSync('userid')
   if (token) { //如果登錄了
    const usrename = Taro.getStorageSync('username') //同樣登錄時(shí)添加到本地的用戶名
    Taro.setNavigationBarTitle({ //改變導(dǎo)航欄的標(biāo)題
     title: usrename + '---購(gòu)物車'
    })
    request({ //這里的request是封裝后的方法
     url: '/cart', //接口
     data: { //需要傳遞的數(shù)據(jù)
      token,
      userid
     }
    }).then(res => { 
     console.log(res.data)
     const { code } = res.data 
     if (code === '10119') { //后端返回的值 ，判斷狀態(tài)
      toast({ title: '登錄已經(jīng)過(guò)期，請(qǐng)從新登錄' })
      Taro.navigateTo({  //跳轉(zhuǎn)到登錄頁(yè)
       url: '/pages/login/index'
      })
     } else if (code === '10012') { 
      this.setState({
       message: '購(gòu)物車空空如也'
      })
     } else {
     //因?yàn)閠aro是基于react的，在react中，狀態(tài)不能直接改變，要用this.setState
      this.setState({ //登錄成功，購(gòu)物車有數(shù)據(jù)時(shí)，將購(gòu)物車的列表數(shù)據(jù)添加到購(gòu)物車數(shù)據(jù)中 
       cartdata: res.data.data
      })
     }
    })
   } else { //如果沒登錄
    toast({ title: '請(qǐng)登錄' })
    Taro.navigateTo({ //跳轉(zhuǎn)到登錄頁(yè)面
     url: '/pages/login/index'
    })
   }

  } catch (e) {

  }
 }
 componentDidUpdate(){
  //計(jì)算總數(shù)量，總價(jià)格
  let num=0;
  let price=0;
  if(this.state.activedata.length!=0){ //如果選中的數(shù)組長(zhǎng)度不為0時(shí)，就是有商品被選中了
   this.state.activedata.map((item)=>{ //map遍歷數(shù)組
    num+= +item.num  //將數(shù)量相加 + 號(hào)為一元運(yùn)算符，將字符串類型轉(zhuǎn)換為數(shù)值類型
    price+=item.num*item.price  //求價(jià)格
   }) 
   this.setState({ //設(shè)置值
    totalnum:num,
    totalprice:price
   })
  }else{ //如果沒有商品被選中
   this.setState({
    totalnum:0,
    totalprice:0
   })
  }
  
 }
 render() {
  return ( //結(jié)構(gòu)開始
   <View>{
    this.state.message.length === 0 ? null : //如果 message不為空的話，就代表著購(gòu)物車沒有數(shù)據(jù)，所以顯示購(gòu)物車空空如也，去選購(gòu)，如果為空，代表著購(gòu)物車有數(shù)據(jù)，不顯示
     <View onClick={() => { //點(diǎn)擊事件 去主頁(yè)選購(gòu)商品
      Taro.switchTab({
       url: '/pages/home/index'
      })
     }}> {this.state.message}去選購(gòu)</View>
   }
    <Checkbox checked={this.state.isactive} onClick={()=>{ //全選按鈕 check代表著按鈕是否選中 因?yàn)閠aro中的checkbox的onchange方法，不支持小程序，所以沒辦法，只能用 onClick方法
     let active=!this.state.isactive   //實(shí)現(xiàn)點(diǎn)擊選中狀態(tài)取反
     this.setState({  
      isactive:active
     })
     if(active===true){ //如果全選，就代表著 購(gòu)物車的所有商品都被選中，所以，將購(gòu)物車列表數(shù)據(jù)全給選中的數(shù)組，將單個(gè)商品的狀態(tài)全部設(shè)為選中
      this.setState({
       check:true,
       activedata:this.state.cartdata
      })
     }else{//否則，選中商品數(shù)組為空，將單個(gè)商品的狀態(tài)全部設(shè)為未選中
      this.setState({
       check:false,
       activedata:[]
      })
     }
    }}>全選</Checkbox>

    <CheckboxGroup  onChange={(evt)=>{ //復(fù)選框組，<CheckboxGroup/>中選中項(xiàng)發(fā)生改變是觸發(fā) change 事件，detail = value:[選中的 Checkbox 的 value 的數(shù)組]
     const {detail:{value}}=evt 
     if(value.length===this.state.cartdata.length){ //選中的數(shù)組的長(zhǎng)度如果等于購(gòu)物車列表的長(zhǎng)度是全選
      this.setState({  
       isactive:true,  //全選按鈕被選中
       activedata:this.state.cartdata  //選中商品數(shù)組為購(gòu)物車的列表數(shù)組
      })
     }else{ //否則未全選
      var i;
      var data=[];
      for ( i in value){  //因?yàn)関alue數(shù)組里的值為選中的checkbox的value的值，我設(shè)置的為cartid
       data.push(...(this.state.cartdata.filter(item=>{ //過(guò)濾下購(gòu)物車的列表數(shù)據(jù)，將cartid相等的對(duì)象取出來(lái)，放進(jìn)data數(shù)組中，...是展開運(yùn)算符，加他是因?yàn)樵诳刂婆_(tái)打印的時(shí)候發(fā)現(xiàn)，每個(gè)對(duì)象外面都加了一個(gè)【】，沒辦法，這里應(yīng)該是有簡(jiǎn)單的寫法的，但因?yàn)楫?dāng)時(shí)累了，也沒有細(xì)想，就只能寫成這樣了，
        return item.cartid==value[i]
       })))
      }
      console.log(data,this.state.cartdata)
      this.setState({
       isactive:false,//全選按鈕未被選中
       activedata:data //設(shè)置選中商品的數(shù)組
       //至此，計(jì)算總數(shù)量，總價(jià)格、全選、單選的邏輯就全完成了，至于為什么寫成這樣，是因?yàn)閠aro是基于react的標(biāo)準(zhǔn)的，沒有計(jì)算屬性，沒有雙向綁定
      })
     }
    }}>
     {
      this.state.cartdata.map((item, index) => //循環(huán)顯示購(gòu)物車數(shù)據(jù)
       <AtCard
        title={item.proname}
        thumb={item.proimg}
        extra={'$'+item.price}
        key={item.proid}

       >
        <View><Checkbox value={item.cartid} checked={this.state.check}></Checkbox> 
        {/* 每個(gè)商品前的復(fù)選框 */}
         <AtInputNumber //數(shù)量加減
          min={0}
          max={10}
          step={1}
          value={item.num} //之間的值
          onChange={this.change.bind(this, item,index)} //onchange輸入框值改變時(shí)觸發(fā)的事件，開發(fā)者需要通過(guò) onChange 事件來(lái)更新 value 值變化，onChange 函數(shù)必填
         />
         <AtButton type='primary' size='small' onClick={this.del.bind(this,item)}>刪除</AtButton> 
         {/* 刪除按鈕 */}
        </View>

       </AtCard>
      )
     }
    </CheckboxGroup>
    <View>總數(shù)量：{this.state.totalnum}</View>
    <View>總價(jià)格：{this.state.totalprice}</View>
   </View>
  )
 }
 del(item){ //刪除方法
 //item代表著商品的數(shù)據(jù) 
  try{
   const token = Taro.getStorageSync('token')
   if(token){ //如果有token值
    request({ //數(shù)據(jù)請(qǐng)求   刪除接口
     url: '/cart/delete',
     data: {
      token,
      cartid: item.cartid
     }
    }).then(res => {
     const { code } = res.data
     if (code === '10119') { //后端接口 返回值
      toast({ title: '登錄狀態(tài)過(guò)期，請(qǐng)重新登錄' })
      Taro.navigateTo({  //跳轉(zhuǎn)到登錄頁(yè)面 
       url: '/pages/login/index'
      })
     }else{ 
       toast({title:'刪除成功!'}) //顯示提示框 封裝的一個(gè)方法 其實(shí)到這步，商品就已經(jīng)刪除了，但頁(yè)面還沒有發(fā)生變化，所以我們要處理下頁(yè)面
       let id=item.cartid    
       let data1=this.state.cartdata.filter(item=>{ //過(guò)濾下不等于被刪除的商品id，將未刪除的商品，放到data1中
        return item.cartid!=id
       })
       let data2=this.state.activedata.filter(item=>{ //在選中情況下
        return item.cartid!=id
       })
       this.setState({ //設(shè)置下購(gòu)物車列表數(shù)據(jù) 
        cartdata:data1,
        activedata:data2
       })
     }
    })
   }else{ //如果沒有token值
    toast({ title: '請(qǐng)登錄' }) 
    Taro.navigateTo({ //跳轉(zhuǎn)到登錄頁(yè)面
     url: '/pages/login/index'
    })
   }
  }catch(e){
    
  }
 }
 change(item,index,evt) {
  //數(shù)量改變
  console.log(evt) 
  //item代表著商品的數(shù)據(jù) 
  //index，為當(dāng)前改變的是那個(gè)商品的值， 
  //evt為改變后的數(shù)值
  try {
   const token = Taro.getStorageSync('token') 
   if (token) { //如果有token值
    if (evt === '0') { //數(shù)量為0 我設(shè)置的為刪除商品，與上面的刪除一致，這里我就不再解釋了
     request({
      url: '/cart/delete',
      data: {
       token,
       cartid: item.cartid
      }
     }).then(res => {
      const { code } = res.data
      if (code === '10119') {
       toast({ title: '登錄狀態(tài)過(guò)期，請(qǐng)重新登錄' })
       Taro.navigateTo({
        url: '/pages/login/index'
       })
      }else{
        toast({title:'刪除成功!'})
        let id=item.cartid
        let data1=this.state.cartdata.filter(item=>{
         return item.cartid!=id
        })
        let data2=this.state.activedata.filter(item=>{ //在選中情況下
        return item.cartid!=id
       })
        this.setState({
         cartdata:data1,
         activedata:data2
        })

      }
     })
    }else{ //改變的值不為0 ，
     request({
      url: '/cart/update', //更新接口 
      data: {
       token,
       cartid: item.cartid,
       num:evt  //將改變的值直接付給num
      }
     }).then(res => {
      const { code } = res.data
      if (code === '10119') {  //后端驗(yàn)證
       toast({ title: '登錄狀態(tài)過(guò)期，請(qǐng)重新登錄' })
       Taro.navigateTo({ //跳轉(zhuǎn)到登錄頁(yè)
        url: '/pages/login/index'
       })
      }else{
        toast({title:'更新成功!'})
        item.num=evt //改變下數(shù)量
       // var newitem=item
       // var data=this.state.cartdata.map(item=>{
       //  return item.cartid===newitem.cartid ?newitem :item
       // })
       var data=this.state.cartdata //將購(gòu)物車?yán)镞厰?shù)據(jù)賦給data ，因?yàn)樵趓eact中，狀態(tài)不能直接改變
       data[index]=item // 將新的對(duì)象賦給數(shù)組的第index對(duì)象
       this.setState({ //設(shè)置下
        cartdata:data
       })
      }
     })
    }
   } else {//如果沒有token值
    toast({ title: '請(qǐng)登錄' })
    Taro.navigateTo({
     url: '/pages/login/index'
    })
   }

  } catch (e) {

  }

 }
}

export default Index

cart/index.scss頁(yè)面代碼
@import "~taro-ui/dist/style/components/card.scss";
@import "~taro-ui/dist/style/components/button.scss";
@import "~taro-ui/dist/style/components/loading.scss";
@import "~taro-ui/dist/style/components/icon.scss";
@import "~taro-ui/dist/style/components/input-number.scss";

utils/index.js代碼
const publicurl =''，//接口就不放上去了，因?yàn)橐膊皇俏业?，這里就放接口前的公共網(wǎng)址
import Taro from '@tarojs/taro'
export function request(options){
 const {url,data,method}=options
 wx.showLoading({ //顯示loading框
  title: '加載中',
 })
 return new Promise((resolve,reject)=>{
  Taro.request({ //數(shù)據(jù)請(qǐng)求 與小程序類似
   url: publicurl+url,
   data:data || {},
   method:method || 'GET',
   success(res){ 
    //成功
    resolve(res)
   },
   fail(err){
    //失敗
    reject(err)
   },
   complete(){
    // complete 接口調(diào)用結(jié)束的回調(diào)函數(shù)
    wx.hideLoading(); //隱藏loading框
   }
  })
 })
}

export function toast(options){
  const {title,icon, duration}=options
  Taro.showToast({ 
   title,
   icon: icon || 'none',
   duration:duration || 1000
  })
}