UniApp实现电商商品展示与购物车功能的配置与使用指南
如果你的APP需要实现电商商品展示、购物车等功能，那么UniApp是一个不错的选择。UniApp是基于Vue.js开发的跨端开发框架，开发者只需要使用Vue语法进行开发，就可以同时实现iOS、安卓和H5等多个端的应用。本篇文章将为你介绍如何用UniApp实现电商商品展示与购物车功能。
1.创建UniApp项目
在开发前，我们需要先创建一个UniApp项目。可以在HBuilderX中选择"创建UniApp项目"，或者在UniApp官网中下载UniApp插件创建项目。
2.配置商品展示页面
在创建完项目后，我们需要先配置商品展示页面。我们可以创建一个商品展示的Vue组件，在页面上展示商品列表，包括商品名称、价格、图片等信息。
<template>
<view class="goods-list">
<view v-for="(item,index) in goodsList" :key="index" class="goods-item">
<image class="goods-img" :src="item.imgUrl"></image>
<view class="goods-info">
<view class="goods-title">{{item.title}}</view>
<view class="goods-price">￥{{item.price}}</view>
<view class="goods-btn" @click="addToCart(index)">加入购物车</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
goodsList: [{
imgUrl: "https://img.yzcdn.cn/vant/ipad.jpeg",
title: "iPad",
price: 2888
}, {
imgUrl: "https://img.yzcdn.cn/vant/ipad.jpeg",
title: "iPhone",
price: 6888
}]
}
},
methods: {
addToCart(index) {
// 加入购物车
}
}
}
</script>
<style>
.goods-list {
display: flex;
flex-wrap: wrap;
padding: 20rpx;
}
.goods-item {
display: flex;
flex-direction: column;
align-items: center;
width: 50%;
padding: 20rpx;
}
.goods-img {
width: 100%;
height: 400rpx;
object-fit: cover;
}
.goods-info {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin-top: 20rpx;
width: 100%;
height: 120rpx;
border: 1rpx solid #ccc;
}
.goods-title {
font-size: 30rpx;
margin-bottom: 10rpx;
}
.goods-price {
font-size: 26rpx;
}
.goods-btn {
margin-top: 10rpx;
font-size: 26rpx;
color: #fff;
background-color: #f00;
border-radius: 5rpx;
padding: 10rpx;
}
</style>
上述代码中，我们先在data中定义了一个goodsList数组，里面包含了两个商品的信息（包括图片、标题和价格）。在template中，我们通过v-for指令遍历goodsList数组，生成商品列表。每个商品都包含商品图片、商品信息和加入购物车按钮。其中，加入购物车按钮通过@click事件绑定addToCart方法，用于将商品添加到购物车。
3. 配置购物车页面
接下来，我们需要配置购物车页面。我们可以创建一个购物车的Vue组件，实现购物车展示和结算功能。
<template>
<view class="cart">
<view v-if="cartList.length===0" class="cart-empty">购物车是空的</view>
<view v-if="cartList.length>0" class="cart-list">
<view v-for="(item,index) in cartList" :key="index" class="cart-item">
<image class="cart-img" :src="item.imgUrl"></image>
<view class="cart-info">
<view class="cart-title">{{item.title}}</view>
<view class="cart-price">￥{{item.price}}</view>
<view class="cart-count">
<view @click="changeCount(index,false)" class="cart-btn">-</view>
<view class="cart-num">{{item.count}}</view>
<view @click="changeCount(index,true)" class="cart-btn">+</view>
</view>
</view>
</view>
</view>
<view v-if="cartList.length>0" class="cart-bottom">
<view class="cart-total">总价：￥{{totalPrice}}</view>
<view class="cart-paybtn">结算</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
cartList: []
}
},
computed: {
totalPrice() {
return this.cartList.reduce((sum, item) => {
return sum + item.price * item.count
}, 0)
}
},
methods: {
changeCount(index, isAdd) {
const item = this.cartList[index]
if (isAdd) {
item.count++
} else {
item.count--
if (item.count === 0) {
this.cartList.splice(index, 1)
}
}
}
}
}
</script>
<style>
.cart {
padding: 20rpx;
}
.cart-empty {
font-size: 30rpx;
text-align: center;
}
.cart-list {
margin-top: 20rpx;
}
.cart-item {
display: flex;
align-items: center;
height: 200rpx;
margin-bottom: 20rpx;
}
.cart-img {
width: 160rpx;
height: 160rpx;
object-fit: cover;
}
.cart-info {
margin-left: 20rpx;
flex: 1;
}
.cart-title {
font-size: 30rpx;
margin-bottom: 10rpx;
}
.cart-price {
font-size: 26rpx;
margin-bottom: 10rpx;
}
.cart-count {
display: flex;
justify-content: space-between;
align-items: center;
width: 160rpx;
height: 60rpx;
background-color: #f0f0f0;
border-radius: 5rpx;
}
.cart-btn {
font-size: 36rpx;
color: #444;
}
.cart-num {
font-size: 26rpx;
}
.cart-bottom {
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 120rpx;
display: flex;
justify-content: space-between;
align-items: center;
background-color: #fff;
border-top: 1rpx solid #ccc;
}
.cart-total {
margin-left: 20rpx;
font-size: 30rpx;
}
.cart-paybtn {
margin-right: 20rpx;
font-size: 36rpx;
color: #fff;
background-color: #f00;
border-radius: 5rpx;
padding: 10rpx 20rpx;
}
</style>
上述代码中，我们先在data中定义了一个cartList数组，用来存储购物车中的商品信息。在computed中，我们定义totalPrice计算属性，用来计算所有商品价格的总和。在methods中，我们定义了changeCount方法，用于增加或减少商品数量。其中，操作加减按钮时，我们会修改数据中的count属性，同时会实时计算总价；如果count为0，则会从cartList数组中删除该商品。
4.配置路由
将商品展示页面和购物车页面配好后，我们需要将它们进行路由配置。可以在manifest.json文件中配置路由信息。
"pages": [
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "首页"
}
},
{
"path": "pages/cart/cart",
"style": {
"navigationBarTitleText": "购物车"
}
}
],
"globalStyle": {
"navigationBarBackgroundColor": "#f00",
"navigationBarTextStyle": "white"
},
上述代码中，我们在pages数组中配置了两个页面：index和cart，对应商品展示页面和购物车页面。在globalStyle中，我们设置了导航栏颜色为红色，文本颜色为白色。
5.配置路由跳转
配置完路由信息后，我们需要进行路由跳转。在商品展示页面中，我们可以通过uni.navigateTo方法进行路由跳转，将用户跳转到购物车页面。
methods: {
addToCart(index) {
const item = this.goodsList[index]
const cartItem = this.cartList.find((cartItem) => cartItem.title === item.title)
if (cartItem) {
cartItem.count++
} else {
this.cartList.push({
...item,
count: 1
})
}
uni.showToast({
title: '添加成功',
icon: 'none'
})
uni.navigateTo({
url: '/pages/cart/cart'
})
}
}
上述代码中，我们先判断该商品是否已在购物车中，如果已经存在，则只增加数量；否则，将该商品添加到cartList数组中。在添加商品成功后，我们通过uni.navigateTo方法跳转到购物车页面。
6.进一步完善
上述代码完成了商品展示与购物车功能，当然还有很多进一步完善的地方，比如将购物车数据保存到本地、添加商品动画效果等等。希望开发者们可以在此基础上，不断完善并优化APP的功能。
本文介绍了如何使用UniApp实现电商商品展示与购物车功能，包括商品展示页面、购物车页面、路由配置和路由跳转等。希望对开发者们有所帮助。