当前位置: 开发笔记 > 前端 > 正文

使用Taro实现小程序商城的购物车功能模块的实例代码

作者：温暖我心好吗_646 | 来源：互联网 | 2022-03-10 04:04

这篇文章主要介绍了使用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: '好喝&＃12220;颜值MEOW莫斯卡托&＃12115;泡葡萄酒甜型&＃12217;槟少&＃12069;粉猫起泡酒(v1)',
 image:
  'https://tva1.sinaimg.cn/large/00831rSTgy1gczok56tkzj30m80m8qe4.jpg',
 num: 3,
 price: '88.00',
 selected: true
 },
 {
 id: 2,
 title: '好喝&＃12220;颜值MEOW莫斯卡托&＃12115;泡葡萄酒甜型&＃12217;槟少&＃12069;粉猫起泡酒(v2)',
 image:
  'https://tva1.sinaimg.cn/large/00831rSTgy1gczok56tkzj30m80m8qe4.jpg',
 num: 1,
 price: '188.00',
 selected: true
 },
 {
 id: 3,
 title: '好喝&＃12220;颜值MEOW莫斯卡托&＃12115;泡葡萄酒甜型&＃12217;槟少&＃12069;粉猫起泡酒(v3)',
 image:
  'https://tva1.sinaimg.cn/large/00831rSTgy1gczok56tkzj30m80m8qe4.jpg',
 num: 2,
 price: '288.00',
 selected: false
 },
 {
 id: 4,
 title: '好喝&＃12220;颜值MEOW莫斯卡托&＃12115;泡葡萄酒甜型&＃12217;槟少&＃12069;粉猫起泡酒(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  {
 if (id == item.id) {
 item.selected = !item.selected
 }
 })
 // const checkall = this.data.selectAllStatus === true &＃63; 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  {
 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 (
 
 {carts.length > 0 &＃63; (
  
  
  {carts.map((item, index) => {
  return (
   
   {item.selected &＃63; (
   
   ) : (
   
   )}
   
   
   
   {item.title}
   {'￥' + item.price}
   
   
   -
   
   {item.num}
   
   +
   
   
   
   删除
   
   
  )
  })}
  
  
  {selectAllStatus &＃63; (
  
  ) : (
  
  )}
  
  
  
  {count> 0&＃63; `已选(${count})`: '全选'}
  {'合计￥' + totalPrice}
  
  立即下单
  
  
  
 ) : (
  
  购物车是空的哦~
  
 )}
 
 )
 }
} 
 
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 等，将会直接更新到指定版本

总结

到此这篇关于使用Taro实现的小程序商城的购物车功能模块的文章就介绍到这了,更多相关Taro实现小程序商城的购物车内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持！

推荐阅读

vue.js
个人总结_软件工程课程——个人总结

本文由编程笔记#小编为大家整理，主要介绍了软件工程课程——个人总结相关的知识，希望对你有一定的参考价值。前言时长4个与的软件工程实践结束。Alpha与B ... [详细]

蜡笔小新 2024-10-17 09:18:58
vue.js
从0到1搭建大数据平台

从0到1搭建大数据平台 ... [详细]

蜡笔小新 2024-11-12 15:26:03
chrome
Vue 开发入门：环境配置与初步搭建

本文介绍了 Vue 开发的入门指南，重点讲解了开发环境的配置与项目的基本搭建。推荐使用 WebStorm 作为 IDE，其下载地址为。安装时请选择适合您操作系统的版本，并通过获取激活码。WebStorm 是前端开发者的理想选择，提供了丰富的功能和强大的代码编辑能力。 ... [详细]

蜡笔小新 2024-11-07 15:02:54
chrome
专业人士如何做自媒体

专业人士如何做自媒体 ... [详细]

蜡笔小新 2024-11-13 20:59:44
html
浅析python实现布隆过滤器及Redis中的缓存穿透原理_python

本文带你了解了位图的实现，布隆过滤器的原理及Python中的使用，以及布隆过滤器如何应对Redis中的缓存穿透，相信你对布隆过滤 ... [详细]

蜡笔小新 2024-11-13 16:43:07
html
单元测试：使用mocha和should.js搭建nodejs的单元测试

2019独角兽企业重金招聘Python工程师标准BDD测试利器：mochashould.js众所周知对于任何一个项目来说，做好单元测试都是必不可少 ... [详细]

蜡笔小新 2024-11-12 11:08:57
bootstrap
秒建一个后台管理系统？用这5个开源免费的Java项目就够了

秒建一个后台管理系统？用这5个开源免费的Java项目就够了 ... [详细]

蜡笔小新 2024-11-12 03:21:33
node.js
利用 Node.js 和 Express（4.x 及以上版本）构建高效文件上传功能

本文介绍了如何使用 Node.js 和 Express（4.x 及以上版本）构建高效的文件上传功能。通过引入 `multer` 中间件，可以轻松实现文件上传。首先，需要通过 `npm install multer` 安装该中间件。接着，在 Express 应用中配置 `multer`，以处理多部分表单数据。本文详细讲解了 `multer` 的基本用法和高级配置，帮助开发者快速搭建稳定可靠的文件上传服务。 ... [详细]

蜡笔小新 2024-11-11 18:02:17
html
Mac系统中安装Hexo时遇到“Error: Cannot find module './build/Release/DTraceProviderBindings’”问题的解决方案

在Mac系统中安装Hexo时，如果遇到“Error: Cannot find module './build/Release/DTraceProviderBindings’”错误，可以通过以下步骤解决：首先确保已正确安装Node.js和npm，然后尝试运行`npm install hexo --no-optional`。若问题依然存在，建议检查环境变量配置，并参考Hexo官方文档进行进一步排查。 ... [详细]

蜡笔小新 2024-11-09 13:53:35
html
在GitHub上克隆vue-element-admin项目时遇到依赖安装错误

在 GitHub 上克隆 vue-element-admin 项目后，使用 `npm install` 安装依赖时遇到了未知的 Git 错误。具体错误信息为 `npm ERR! code 128`，提示命令执行失败。这可能是由于网络问题、Git 配置不正确或某些依赖包的仓库地址无效导致的。建议检查网络连接、更新 Git 版本并确保所有依赖项的 URL 正确无误。 ... [详细]

蜡笔小新 2024-11-04 17:01:47
html
深入解析微信小程序开发中的全局配置文件设置与优化技巧

本文深入探讨了微信小程序开发中全局配置文件的设置与优化技巧，详细解析了 `app.js`、`app.json`、`app.wxss` 和 `project.config.json` 的功能与最佳实践。通过合理配置这些文件，开发者可以显著提升小程序的性能和用户体验。文章还介绍了如何利用这些配置文件进行模块化开发和调试，帮助开发者更好地管理和维护小程序项目。 ... [详细]

蜡笔小新 2024-11-03 20:00:36
bootstrap
如何撰写PHP电商项目的实战经验？

如何撰写PHP电商项目的实战经验？ ... [详细]

蜡笔小新 2024-11-02 19:29:46
node.js
基于Node.js的高性能实时消息推送系统：利用Socket.IO与Express实现高并发消息转发

基于Node.js的高性能实时消息推送系统通过集成Socket.IO和Express框架，实现了高效的高并发消息转发功能。该系统能够支持大量用户同时在线，并确保消息的实时性和可靠性，适用于需要即时通信的应用场景。 ... [详细]

蜡笔小新 2024-11-01 11:20:11
build
基于POI的Java Maven项目中实现Excel数据的高效导入与导出功能

本项目在Java Maven框架下，利用POI库实现了Excel数据的高效导入与导出功能。通过优化数据处理流程，提升了数据操作的性能和稳定性。项目已发布至GitHub，当前最新版本为0.0.5。该项目不仅适用于小型应用，也可扩展用于大型企业级系统，提供了灵活的数据管理解决方案。GitHub地址：https://github.com/83945105/holygrail，Maven坐标：`com.github.83945105:holygrail:0.0.5`。 ... [详细]

蜡笔小新 2024-10-31 18:52:27
css
三周学会小程序第七讲：提交问题

截止到上一讲可以支持数据库存储了，所以这一讲开始讲解怎么从小程序发布一个问题并存储到服务器端。下面简单罗列一下本讲的知识点。对了老规矩，文末附源码。对小 ... [详细]

蜡笔小新 2024-10-18 17:39:50

温暖我心好吗_646

这个家伙很懒，什么也没留下！

Tags | 热门标签

RankList | 热门文章