使用Taro 實現的小程序商城的購物車功能模塊

Taro 是一套遵循 React 語法規範的 多端開發 解決方案。

現如今市面上端的形態多種多樣，Web、React-Native、微信小程序等各種端大行其道，當業務要求同時在不同的端都要求有所表現的時候，針對不同的端去編寫多套代碼的成本顯然非常高，這時候只編寫一套代碼就能夠適配到多端的能力就顯得極爲需要。

使用 Taro，我們可以只書寫一套代碼，再通過 Taro 的編譯工具，將源代碼分別編譯出可以在不同端（微信/百度/支付寶/字節跳動/QQ/京東小程序、快應用、H5、React-Native 等）運行的代碼。

官方文檔：https://nervjs.github.io/taro/

項目已上傳GitHub：https://github.com/LazyTraveller/Jerry-Taro-Demo/blob/master/README.md

一、使用Taro cli工具初始化項目

1. 安裝taro腳手架工具

首先，你需要使用 npm 或者 yarn 全局安裝@tarojs/cli，或者直接使用npx:

# 使用 npm 安裝 CLI
$ npm install -g @tarojs/cli
# OR 使用 yarn 安裝 CLI
$ yarn global add @tarojs/cli
# OR 安裝了 cnpm，使用 cnpm 安裝 CLI
$ cnpm install -g @tarojs/cli

2. 初始化taro項目

使用命令創建模板項目
 
$ taro init myApp
npm 5.2+ 也可在不全局安裝的情況下使用 npx 創建模板項目
$ npx @tarojs/cli init myApp
 

3. 進入myApp目錄，安裝依賴

# 使用 yarn 安裝依賴
$ yarn
# OR 使用 cnpm 安裝依賴
$ cnpm install
# OR 使用 npm 安裝依賴
$ npm install

4. 編譯項目，開啓Dev模式，生成小程序 -- dist目錄

# yarn
$ yarn dev:weapp
$ yarn build:weapp
# npm script
$ npm run dev:weapp
$ npm run build:weapp
# 僅限全局安裝
$ taro build --type weapp --watch
$ taro build --type weapp
# npx 用戶也可以使用
$ npx taro build --type weapp --watch
$ npx taro build --type weapp

5. 使用微信開發者工具，打開項目中的dist目錄

二、小程序購物車功能的實現過程

效果圖：

三、具體實現代碼

src/pages/cart/cart.js

import { View, Icon, Navigator, Image, Text, } from '@tarojs/components'
import Taro from '@tarojs/taro'
import './cart.less'

class Cart extends Taro.Component {
  config = {
    navigationBarTitleText: '購物車'
  }

  state = {
    carts: [
      {
        id: 1,
        title: '好喝⾼顏值MEOW莫斯卡託⽓泡葡萄酒甜型⾹檳少⼥粉貓起泡酒(v1)',
        image:
          'https://tva1.sinaimg.cn/large/00831rSTgy1gczok56tkzj30m80m8qe4.jpg',
        num: 3,
        price: '88.00',
        selected: true
      },
      {
        id: 2,
        title: '好喝⾼顏值MEOW莫斯卡託⽓泡葡萄酒甜型⾹檳少⼥粉貓起泡酒(v2)',
        image:
          'https://tva1.sinaimg.cn/large/00831rSTgy1gczok56tkzj30m80m8qe4.jpg',
        num: 1,
        price: '188.00',
        selected: true
      },
      {
        id: 3,
        title: '好喝⾼顏值MEOW莫斯卡託⽓泡葡萄酒甜型⾹檳少⼥粉貓起泡酒(v3)',
        image:
          'https://tva1.sinaimg.cn/large/00831rSTgy1gczok56tkzj30m80m8qe4.jpg',
        num: 2,
        price: '288.00',
        selected: false
      },
      {
        id: 4,
        title: '好喝⾼顏值MEOW莫斯卡託⽓泡葡萄酒甜型⾹檳少⼥粉貓起泡酒(v4)',
        image:
          'https://tva1.sinaimg.cn/large/00831rSTgy1gczok56tkzj30m80m8qe4.jpg',
        num: 2,
        price: '388.00',
        selected: false
      }
    ], // 購物車列表
    hascheckList: [], 
    totalPrice: 0, // 總價，初始爲0
    selectAllStatus: true // 全選狀態，默認全選
  }

  componentDidShow() {
    const cart = [
      
    ]
    this.setState({
      carts: cart
    })
    this.getTotalPrice();
  }

  /**
   * 計算總價
   */
  getTotalPrice() {
    let carts = this.state.carts // 獲取購物車列表
    let total = 0
    for (let i = 0; i < carts.length; i++) {
      // 循環列表得到每個數據
      if (carts[i].selected) {
        // 判斷選中才會計算價格
        total += carts[i].num * carts[i].price // 所有價格加起來
      }
    }
    this.setState({
      // 最後賦值到data中渲染到頁面
      carts: carts,
      totalPrice: total.toFixed(2)
    })
  }


  /**
   * 綁定加數量事件
   */
  addCount(e) {
    const index = e.currentTarget.dataset.index
    let carts = this.state.carts
    let num = carts[index].num
    num = num + 1
    carts[index].num = num
    this.setState({
      carts: carts
    })
    this.getTotalPrice()
  }

  /**
   * 綁定減數量事件
   */
  minusCount(e) {
    const index = e.currentTarget.dataset.index
    let carts = this.state.carts
    let num = carts[index].num
    if (num <= 1) {
      return false
    }
    num = num - 1
    carts[index].num = num
    this.setState({
      carts: carts
    })
    this.getTotalPrice()
  }

    /**
   * 刪除購物車當前商品
   */
  deleteList(e) {
    const index = e.currentTarget.dataset.index
    let carts = this.state.carts
    carts.splice(index, 1)
    this.setState({
      carts: carts
    })
    if (!carts.length) {
      this.setState({
        hasList: false
      })
    } else {
      this.getTotalPrice()
    }
  }

   /**
   * 當前商品選中事件
   */
  selectList(id,e) {
    const index = e.currentTarget.dataset.index
    let carts = this.state.carts
    // const selected = carts[index].selected
    // carts[index].selected = !selected

    carts.forEach(item => {
      if (id == item.id) {
        item.selected = !item.selected
      }
    })
    // const checkall = this.data.selectAllStatus === true ? false : false
    this.setState({
      carts: carts, 
      // selectAllStatus: false
    })

    const selectAllStatus = carts.every(item => item.selected)
    this.setState({
      selectAllStatus: selectAllStatus
    })
    this.getTotalPrice()
  }

  /**
   * 購物車全選事件
   */
  selectAll(e) {
    let selectAllStatus = this.state.selectAllStatus
    selectAllStatus = !selectAllStatus
    let carts = this.state.carts

    for (let i = 0; i < carts.length; i++) {
      carts[i].selected = selectAllStatus
    }
    this.setState({
      selectAllStatus: selectAllStatus,
      carts: carts
    })
    this.getTotalPrice()
  }

  // 結算
  closeFun() {
    let list = []
    let listTotal = []
    this.state.carts.map((v, k) => {
      console.log('購物車數據', v)
      if (v.select) {
        list.push(v)
      } else {
        listTotal.push(v)
      }
    })
  }

  render() {
    const { carts, selectAllStatus, totalPrice, hasList } = this.state;
    let count = 0;
    carts.map(it => {
      if(it.selected === true) {
        count++;
      }
    })
    return (
      <View className="main">
        {carts.length > 0 ? (
          <View>
            <View className="cart-box">
              {carts.map((item, index) => {
                return (
                  <View className="cart-list" key={index}>
                    {item.selected ? (
                      <Icon
                        type="success"
                        color="#b30000"
                        data-index={index}
                        className="cart-pro-select"
                        onClick={this.selectList.bind(this,item.id)}
                      ></Icon>
                    ) : (
                      <Icon
                        type="circle"
                        className="cart-pro-select"
                        data-index={index}
                        onClick={this.selectList.bind(this,item.id)}
                      ></Icon>
                    )}
                    <Navigator url={'../details/details?id=' + item.id}>
                      <Image className="cart-thumb" src={item.image}></Image>
                    </Navigator>
                    <Text className="cart-pro-name">{item.title}</Text>
                    <Text className="cart-pro-price">{'￥' + item.price}</Text>
                    <View className="cart-count-box">
                      <Text
                        className="cart-count-down"
                        onClick={this.minusCount}
                        data-index={index}
                      >
                        -
                      </Text>
                      <Text className="cart-count-num">{item.num}</Text>
                      <Text
                        className="cart-count-add"
                        onClick={this.addCount}
                        data-index={index}
                      >
                        +
                      </Text>
                    </View>
                    <Text
                      className="cart-del"
                      onClick={this.deleteList}
                      data-index={index}
                    >
                      刪除
                    </Text>
                  </View>
                )
              })}
            </View>
            <View className="cart-footer">
              {selectAllStatus ? (
                <Icon
                  type="success_circle"
                  color="#b30000"
                  className="total-select"
                  onClick={this.selectAll}
                ></Icon>
              ) : (
                <Icon
                  type="circle"
                  color="#b30000"
                  className="total-select"
                  onClick={this.selectAll}
                ></Icon>
              )}
              <Navigator url="../orders/orders">
                <View className="order-icon"></View>
              </Navigator>
              <Text >{count> 0? `已選(${count})`: '全選'}</Text>
              <Text className="cart-toatl-price">{'合計￥' + totalPrice}</Text>
              <Text className="pay" onClick={this.closeFun} data-index={index}>
               立即下單
              </Text>
            </View>
          </View>
        ) : (
          <View>
            <View className="cart-no-data">購物車是空的哦~</View>
          </View>
        )}
      </View>
    )
  }
} 

export default Cart

src/pages/cart/cart.less

/* pages/cart/cart.wxss */

.cart-box{
  padding-bottom: 100px;
  margin-bottom: 10px
}
.cart-list{
  position: relative;
  padding: 20px 20px 20px 285px;
  height: 185px;
  border-bottom: 1px solid #e9e9e9;
}
.cart-list .cart-pro-select{
  position: absolute;
  left: 20px;
  top: 90px;
  width: 45px;
  height: 45px;
}

.cart-list .cart-thumb{
  position: absolute;
  top: 20px;
  left: 85px;
  width: 185px;
  height: 185px;
  border-radius:5px;
  box-shadow:5px 2px 6px #000
}
.cart-list .cart-pro-name{
  display: inline-block;
  // width: 500px;
  height: 105px;
  line-height: 50px;
  overflow: hidden;
  font-family: Microsoft Yahei, Cochin, Georgia, Times, 'Times New Roman', serif;
  font-size:28px;
  margin-right: 15px
}

.cart-list .cart-pro-price{
  display: inline-block;
  font-size:30px;
  color: #b30000;
  height: 105px;
  line-height: 50px;
}
.cart-list .cart-count-box{
  position: absolute;
  left: 420px;
  bottom: 20px;
  width: 250px;
  height: 80px;
}
.cart-list .cart-count-box text{
  display: inline-block;
  line-height: 80px;
  text-align: center;
}
.cart-count-down,.cart-count-add{
  font-size: 32px;
  width: 60px;
  height: 80px;
  font-family: Microsoft Yahei, Cochin, Georgia, Times, 'Times New Roman', serif;
  border: silver solid 1px;
  border-radius: 10px;
}
.cart-count-num{
  width: 80px;
  font-size: 32px;
  height: 80px;
  border-radius: 10px;
  border: silver solid 1px;
  margin-left: 1px;
  margin-right: 1px;
}
.cart-del{
  position: absolute;
  right: 15px;
  bottom: 20px;
  width: 80px;
  height: 80px;
  line-height: 80px;
  text-align: center;
  font-family: Arial,Helvetica,sans-serif;
  font-size:30px;
  color:  #b30000;
  text-shadow: black;
}
.cart-footer{
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 90px;
  line-height: 90px;
  padding:0 100px 0 80px;
  box-sizing: border-box;
  background: #bfbfbf;
  color: #4d4d4d;
  font-family: Microsoft Yahei, Cochin, Georgia, Times, 'Times New Roman', serif;
  font-size: 30px;
}
.total-select{
  position: absolute;
  left: 20px;
  top: 25px;
  width: 45px;
  height: 45px;
}
.order-icon{
  position: absolute;
  right: 40px;
  top: 25px;
  width: 45px;
  height: 45px;
  background-size: 100%;
}
.cart-toatl-price{
  /* float: right; */
  margin-left:80px;
  text-align: center;
  width: 100px;
  font-family: Microsoft Yahei, Cochin, Georgia, Times, 'Times New Roman', serif;
  color:  #b30000;
  font-size: 30px;
}
.pay {
  position: absolute;
  right: 0;
  background-color: #b30000;
  height:  100%;
  width: 200px;
  text-align: center;
  font-family: Microsoft Yahei, Cochin, Georgia, Times, 'Times New Roman', serif;
  font-size: 26px;
  color: #f2f2f2;
  text-align: center
}

.cart-no-data{
  padding:40px 0;
  color: #999;
  text-align: center;
}

注意：檢查本地電腦taro的版本，電腦需要和項目的taro版本號相同，否則發送編譯錯誤，該項目的taro CLI版本爲v2.1.1

官方提供的兩個解決方案：
1、    對電腦的taro進行升級
      # taro
$ taro update self [version]
# npm
npm i -g @tarojs/cli@[version]
# yarn
yarn global add @tarojs/cli@[version]
2、    對項目的taro進行升級
 $ taro update project [version]
version 爲選填，如：1.x.x/latest 等，將會直接更新到指定版本