taro實(shí)現(xiàn)購物車邏輯的代碼解析
這篇文章主要講解了taro實(shí)現(xiàn)購物車邏輯的代碼解析，內(nèi)容清晰明了，對此有興趣的小伙伴可以學(xué)習(xí)一下，相信大家閱讀完之后會有幫助。
創(chuàng)新互聯(lián)公司堅持“要么做到，要么別承諾”的工作理念，服務(wù)領(lǐng)域包括：成都做網(wǎng)站、成都網(wǎng)站設(shè)計、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣等服務(wù)，滿足客戶于互聯(lián)網(wǎng)時代的興安盟烏蘭浩特網(wǎng)站設(shè)計、移動媒體設(shè)計的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴！
taro 實(shí)現(xiàn)購物車邏輯
效果
.gif)
taro是什么？
Taro 是一套遵循 React 語法規(guī)范的 多端開發(fā) 解決方案。
- 現(xiàn)如今市面上端的形態(tài)多種多樣，Web、React-Native、微信小程序等各種端大行其道，當(dāng)業(yè)務(wù)要求同時在不同的端都要求有所表現(xiàn)的時候，針對不同的端去編寫多套代碼的成本顯然非常高，這時候只編寫一套代碼就能夠適配到多端的能力就顯得極為需要。
- 使用 Taro，我們可以只書寫一套代碼，再通過 Taro 的編譯工具，將源代碼分別編譯出可以在不同端（微信/百度/支付寶/字節(jié)跳動/QQ/京東小程序、快應(yīng)用、H5、React-Native 等）運(yùn)行的代碼。本代碼是基于Taro UI 開發(fā)的，雖然是基于 taro框架開發(fā)的，但購物車的整體邏輯與微信小程序邏輯是基本一樣的
- Taro UI是一款基于 Taro 框架開發(fā)的多端 UI 組件庫
需要安裝taro ui
$ npm install taro-ui
taro官方文檔
taroUI 官方文檔
cart/index.jsx頁面代碼
import Taro, { Component } from '@tarojs/taro'
import { View, Checkbox, CheckboxGroup } from '@tarojs/components'
//用到了taro的三個組件
//想了解可以去查看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: '', //購物車為空時顯示的信息
cartdata: [], //購物車的數(shù)據(jù)列表
isactive: false, //全選按鈕是否選中
check:false, //單個商品購物車是否被選中
totalnum:0, //總數(shù)量
totalprice:0, //總價格
activedata:[] //復(fù)選框選中的數(shù)據(jù)列表
}
}
componentDidShow () {
//獲取購物車數(shù)據(jù)
try {
const token = Taro.getStorageSync('token') //這兩個數(shù)據(jù)是我在登錄頁面，登錄時添加到本地的token和用戶id
const userid = Taro.getStorageSync('userid')
if (token) { //如果登錄了
const usrename = Taro.getStorageSync('username') //同樣登錄時添加到本地的用戶名
Taro.setNavigationBarTitle({ //改變導(dǎo)航欄的標(biāo)題
title: usrename + '---購物車'
})
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)過期，請從新登錄' })
Taro.navigateTo({ //跳轉(zhuǎn)到登錄頁
url: '/pages/login/index'
})
} else if (code === '10012') {
this.setState({
message: '購物車空空如也'
})
} else {
//因?yàn)閠aro是基于react的，在react中，狀態(tài)不能直接改變，要用this.setState
this.setState({ //登錄成功，購物車有數(shù)據(jù)時，將購物車的列表數(shù)據(jù)添加到購物車數(shù)據(jù)中
cartdata: res.data.data
})
}
})
} else { //如果沒登錄
toast({ title: '請登錄' })
Taro.navigateTo({ //跳轉(zhuǎn)到登錄頁面
url: '/pages/login/index'
})
}
} catch (e) {
}
}
componentDidUpdate(){
//計算總數(shù)量，總價格
let num=0;
let price=0;
if(this.state.activedata.length!=0){ //如果選中的數(shù)組長度不為0時，就是有商品被選中了
this.state.activedata.map((item)=>{ //map遍歷數(shù)組
num+= +item.num //將數(shù)量相加 + 號為一元運(yùn)算符，將字符串類型轉(zhuǎn)換為數(shù)值類型
price+=item.num*item.price //求價格
})
this.setState({ //設(shè)置值
totalnum:num,
totalprice:price
})
}else{ //如果沒有商品被選中
this.setState({
totalnum:0,
totalprice:0
})
}
}
render() {
return ( //結(jié)構(gòu)開始
{
this.state.message.length === 0 ? null : //如果 message不為空的話，就代表著購物車沒有數(shù)據(jù)，所以顯示購物車空空如也，去選購，如果為空，代表著購物車有數(shù)據(jù)，不顯示
{ //點(diǎn)擊事件 去主頁選購商品
Taro.switchTab({
url: '/pages/home/index'
})
}}> {this.state.message}去選購
}
{ //全選按鈕 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){ //如果全選，就代表著 購物車的所有商品都被選中，所以，將購物車列表數(shù)據(jù)全給選中的數(shù)組，將單個商品的狀態(tài)全部設(shè)為選中
this.setState({
check:true,
activedata:this.state.cartdata
})
}else{//否則，選中商品數(shù)組為空，將單個商品的狀態(tài)全部設(shè)為未選中
this.setState({
check:false,
activedata:[]
})
}
}}>全選
{ //復(fù)選框組，
刪除
{/* 刪除按鈕 */}
)
}
總數(shù)量：{this.state.totalnum}
總價格：{this.state.totalprice}
)
}
del(item){ //刪除方法
//item代表著商品的數(shù)據(jù)
try{
const token = Taro.getStorageSync('token')
if(token){ //如果有token值
request({ //數(shù)據(jù)請求 刪除接口
url: '/cart/delete',
data: {
token,
cartid: item.cartid
}
}).then(res => {
const { code } = res.data
if (code === '10119') { //后端接口 返回值
toast({ title: '登錄狀態(tài)過期，請重新登錄' })
Taro.navigateTo({ //跳轉(zhuǎn)到登錄頁面
url: '/pages/login/index'
})
}else{
toast({title:'刪除成功!'}) //顯示提示框 封裝的一個方法 其實(shí)到這步，商品就已經(jīng)刪除了，但頁面還沒有發(fā)生變化，所以我們要處理下頁面
let id=item.cartid
let data1=this.state.cartdata.filter(item=>{ //過濾下不等于被刪除的商品id，將未刪除的商品，放到data1中
return item.cartid!=id
})
let data2=this.state.activedata.filter(item=>{ //在選中情況下
return item.cartid!=id
})
this.setState({ //設(shè)置下購物車列表數(shù)據(jù)
cartdata:data1,
activedata:data2
})
}
})
}else{ //如果沒有token值
toast({ title: '請登錄' })
Taro.navigateTo({ //跳轉(zhuǎn)到登錄頁面
url: '/pages/login/index'
})
}
}catch(e){
}
}
change(item,index,evt) {
//數(shù)量改變
console.log(evt)
//item代表著商品的數(shù)據(jù)
//index，為當(dāng)前改變的是那個商品的值，
//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)過期，請重新登錄' })
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)過期，請重新登錄' })
Taro.navigateTo({ //跳轉(zhuǎn)到登錄頁
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 //將購物車?yán)镞厰?shù)據(jù)賦給data ，因?yàn)樵趓eact中，狀態(tài)不能直接改變
data[index]=item // 將新的對象賦給數(shù)組的第index對象
this.setState({ //設(shè)置下
cartdata:data
})
}
})
}
} else {//如果沒有token值
toast({ title: '請登錄' })
Taro.navigateTo({
url: '/pages/login/index'
})
}
} catch (e) {
}
}
}
export default Indexcart/index.scss頁面代碼 @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ù)請求 與小程序類似
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
})
}看完上述內(nèi)容，是不是對taro實(shí)現(xiàn)購物車邏輯的代碼解析有進(jìn)一步的了解，如果還想學(xué)習(xí)更多內(nèi)容，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。
名稱欄目：taro實(shí)現(xiàn)購物車邏輯的代碼解析
當(dāng)前網(wǎng)址：http://www.jiaotiyi.com/article/gpiigc.html