微信小程序是一种全新的连接用户与服务的方式，它可以在微信内被便捷地获取和传播，同时具有出色的使用体验，其中购物车为电商小程序的核心，本文章通过uni-app进行简单购物车的开发。

后端接口的编写（使用node进行编写），本处暂时不进行详细说明。封装公共的请求数据的方法，涉及到uni-app中提供的uni.request()

export function request(options){
	const {url,data={},method="GET",header={}}=options
	uni.showLoading({
		title:'Loading~~'
	})
	return new Promise((resolve,reject)=>{
		uni.request({
			url:baseUrl+url,//请求路径
			data,//请求参数
			method,//请求方法
			header,
			timeout:6000,
			success: (res) => {
				resolve(res)
			},
			fail: (err) => {
				reject(err)
			},
			complete: () => {
				uni.hideLoading()
			}
		})
	})
}

实现购物车的登陆添加、修改商品数量、删除功能。在使用购物车前，需要获取当前账户的唯一标识–存储在本地的token，以下是登陆成功后后端返回的数据格式：

// 登陆成功
{
code: ‘10008’,
message: ‘登陆成功’,
“data”: {
“userid”: “user_73e91fc0-157b-11ea-9536-db1ce873a934”,
“username”: “wudaxun”,
“token”: “eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ0ZWwiOiIxODgxMzAwNzgxNCIsImlhdCI6MTU3NjIyMDM2NiwiZXhwIjoxNTc2ODI1MTY2fQ.AbkxGcEbD4zD_UaP3Y_dty38E8ZKEuAyjo9IKsJRFEI”
}
}
// 密码错误
{
code: ‘10007’,
message: ‘密码错误’
}
// 用户未注册
{
code: ‘10006’,
message: ‘用户未注册’
}
后端返回数据后数据后通过uni-app中提供的API将token，当前用户的id保存到本地

//将token,userid保存到本地
uni.setStorageSync('token',token);
uni.setStorageSync('userid',userid);

购物车页面数据需要我们通过请求获取到当前用户的购物车数据。此处涉及到适合的生命周期进行请求数据，通过查询ui-app官方文档

购物车涉及到数据的频繁修改，采用OnShow()来请求数据进行渲染，此处需要用到之前登陆时保存在本地的userid和token。

onShow(){
//通过uni-app的官方API了解到，使用uni.getStorageSync()从本地缓存中同步获取指定key对应的内容。
			try{
				const token = uni.getStorageSync('token');
				//此处将token的值绑定到当前实例的属性上，便于后续频繁使用token
				this.token=token
				const userid = uni.getStorageSync('userid');
				//请求购物车数据，接口详情在此处代码结束后
				request({
					url:'/cart',
					data:{
						token,userid
					}
				}).then(res=>{
					
					let {data:{code}}=res
					switch (code){
						case '10012':
						toast({
							title:'购物车空空如也'
						})
						break
						case '10119':
						toast({
							title:'请先登陆'
						})
						uni.navigateTo({
							url:'/pages/login/login'
						})
						break
						case '200':
						//将获取到的数据赋值给实例的cartlist数据
						this.cartlist=res.data.data
					}
				})
			}catch(e){
				console.log(e)
			}
		},

请求购物车数据接口返回内容：
res.send({
code: ‘10012’,
message: ‘购物车空空如’
})
res.send({
code: ‘10119’,
message: ‘无效的token’
})

res.send({
code: ‘200’,
message: ‘购物车的列表数据’,
data
})

此处使用了uni-ui中的NumberBox 数字输入框，具体介绍：https://github.com/dcloudio/uni-ui，具体步骤：

1.引入组件
import {uniNumberBox} from '@dcloudio/uni-ui'
2.注册组件
components:{
			uniNumberBox
		}

<view class="cartlist" v-if="cartlist.length!==0"> 
		<view class="cartitem" v-for="(item) in cartlist" :key="item.proid" >
			<view class="cartimg">
				<image :src="item.proimg" mode=""></image>
			</view>
			<view class="cartinfo">
				<view class="cartname">
					{{item.proname}}
				</view>
				<view class="cartprice">
					{{item.price}}
				</view>
				<uni-number-box :min="1" :max="100" :value="item.num" @change="change($event,item.cartid)" ></uni-number-box>
				<image id="del" src="../../static/icon/del.png" mode="" @click="del(item.cartid)"></image>
			</view>
		</view>
		<view class="totalnum" v-show="totalnum!==0">
			{{totalnum}}
		</view>
		<view class="totalprice" v-show="totalprice!==0">
			总价:￥{{totalprice}}
		</view>
	</view>
	<view class="tips" v-else>
		购物车空空如也~~
		<view class="shopping" style="color: red;font-size: 18px;" @click="goto">
			去选购
		</view>
	</view>

	页面效果如图：

//更新购物车
//当触发数字输入框时，会把当前商品数量以及商品id作为参数进行传递，触发change方法
			//购物车数量的加减
			change(num,cartid){
			//请求购物车数据更新的接口
				request({
					url:'/cart/update',
					data:{
						token:this.token,
						cartid,
						num
					}
				}).then(res=>{
					this.cartlist.map((item)=>{
					//购物车数量进行修改-->主要用于商品总量的计算
						if(item.cartid===cartid){
							item.num=num*1
						}
					})
				})
			}
			//删除商品，将当前商品id作为参数传递
			del(e){
				//console.log(this.token,e)
				//请求购物车删除数据的接口
				request({
					url:'/cart/delete',
					data:{
						token:this.token,
						cartid:e
					}
				}).then(res=>{
				//用于购物车页面的重新渲染
					this.cartlist=this.cartlist.filter((item)=>{
						return item.cartid!=e
					})
				})
			},

由于本人刚接触小程序这方面，上述内容存在错误或不足之处希望大家尽量指出，也希望这篇文章能对你有所帮助。在疫情期间，停工不停学，让我们一起逆战加油。