使用uni-app框架写电商商城前端h5静态网站模板项目-手机端-前端项目练习

以前用vue2 分享过一个电商商城前端静态网站项目-电脑端，需要的小伙伴还是很多的，最近又花了几天更新了一个手机端的电商商城h5项目，今天也分享一下实现方案。

对于以前写的电商商城前端静态网站模板-电脑端，有兴趣的小伙伴可以通过下方链接去考古一下：
https://jsonll.blog.csdn.net/article/details/145716381

今天我们主要来分享一下 uni-app 写的手机端的电商商城前端h5静态网站。
使用的技术

网站使用了 uni-app 框架开发，专注于 H5 移动端网页。通过 uni-app，开发者可以轻松构建响应式页面，并利用框架内置的 UI 组件快速搭建界面。该模板帮助开发者深入了解 uni-app 的使用方法，并快速实现常见的电商商城功能。

接下来说一下网站实现的内容：

· 首页、分类、购物车、个人中心页、结算页等等

· 首页：展示热门商品、活动信息和分类导航。

· 分类：用户可以搜索和筛选商品。

· 购物车：用户可以查看已添加的商品并进行删除或修改数量。

· 个人中心页：显示用户的个人信息、订单历史等。

· 结算页：展示用户选择的商品和结算信息，支持填写地址、支付方式等

项目目录结构

首页代码：

bash 复制代码

<!-- 作者：json -->
<template>
	<view class="index-container">
		<!-- 搜索栏 -->
		<view >
			<search-bar @search="onSearch" />
		</view>

		<!-- 轮播图 -->
		<swiper class="banner" circular :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
			<swiper-item v-for="(item, index) in banners" :key="index">
				<view class="banner-item" :style="{background: item.bg}"></view>
			</swiper-item>
		</swiper>

		<!-- 热卖专区 -->
		<view class="hot-section">
			<view class="section-title">热卖专区</view>
			<view class="hot-list">
				<product-item 
					v-for="(item, index) in hotProducts" 
					:key="index" 
					:product="{
						...item,
						sales: Math.floor(Math.random() * 1000) + 100
					}" 
					@click="goToDetail" 
					@add-to-cart="addToCart"
				/>
			</view>
		</view>

		<!-- 猜你喜欢 -->
		<view class="recommend-section">
			<view class="section-title">猜你喜欢</view>
			<view class="recommend-list">
				<product-item 
					v-for="(item, index) in recommendProducts" 
					:key="index" 
					:product="{
						...item,
						sales: Math.floor(Math.random() * 500) + 50
					}" 
					@click="goToDetail" 
					@add-to-cart="addToCart"
				/>
			</view>
		</view>
	</view>
</template>

<script>
	import SearchBar from '@/components/SearchBar.vue';
	import ProductItem from '@/components/ProductItem.vue';
	import cartService from '@/utils/cartService.js';
	export default {
		components: {
			SearchBar,
			ProductItem
		},
		data() {
			return {
				banners: [{
					bg: 'linear-gradient(45deg, #ff9a9e 0%, #fad0c4 99%, #fad0c4 100%)'
				}, {
					bg: 'linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%)'
				}, {
					bg: 'linear-gradient(120deg, #d4fc79 0%, #96e6a1 100%)'
				}],
				hotProducts: [{
					id: 1,
					name: '热卖商品1',
					price: '99.00',
					bg: 'linear-gradient(45deg, #ff9a9e 0%, #fad0c4 99%, #fad0c4 100%)'
				}, {
					id: 2,
					name: '热卖商品2',
					price: '199.00',
					bg: 'linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%)'
				}],
				recommendProducts: [{
					id: 3,
					name: '推荐商品1',
					price: '89.00',
					bg: 'linear-gradient(120deg, #d4fc79 0%, #96e6a1 100%)'
				}, {
					id: 4,
					name: '推荐商品2',
					price: '129.00',
					bg: 'linear-gradient(45deg, #ff9a9e 0%, #fad0c4 99%, #fad0c4 100%)'
				}]
			}
		},
		methods: {
			onSearch(e) {
				console.log('搜索关键词：', e)
			},
			goToDetail(item) {
				// 跳转到商品详情页，传递商品ID
				uni.navigateTo({
					url: `/pages/detail/index?id=${item.id || 1}`
				});
			},
			addToCart(item) {
				// 添加商品到购物车
				console.log('添加到购物车：', item);
				
				// 为商品添加必要的SKU信息
				const product = {
					...item,
					skus: [{
						name: item.name,
						price: item.price
					}]
				};
				
				// 调用购物车服务添加商品
				const result = cartService.addToCart(product, 0, 1);
				
				if (result) {
					uni.showToast({
						title: '已添加到购物车',
						icon: 'success'
					});
				} else {
					uni.showToast({
						title: '添加失败',
						icon: 'none'
					});
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
.index-container {
	padding-bottom: 1.25rem;
}

.search-box {
	padding: 0.5rem 1.25rem;
}

.banner {
	height: 12rem;
	margin: 0 1.25rem;
	border-radius: 0.75rem;
	overflow: hidden;

	.banner-item {
		height: 100%;
		width: 100%;
	}
}

.section-title {
	font-size: 1rem;
	font-weight: bold;
	padding: 1.875rem 1.25rem 1.25rem;
}

.hot-list {
	padding: 0 1.25rem;
	display: flex;
	gap: 1.25rem;

	.hot-item {
		flex: 1;
		background: #fff;
		border-radius: 0.75rem;
		overflow: hidden;

		.product-img {
			height: 8rem;
			width: 100%;
		}

		.product-info {
			padding: 1rem;

			.product-name {
				font-size: 0.875rem;
				color: #333;
				display: block;
			}

			.product-price {
				font-size: 1rem;
				color: #409EFF;
				font-weight: bold;
				margin-top: 0.625rem;
				display: block;
			}
		}
	}
}

.recommend-list {
	padding: 0 1.25rem;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1.25rem;

	.recommend-item {
		background: #fff;
		border-radius: 0.75rem;
		overflow: hidden;

		.product-img {
			height: 8rem;
			width: 100%;
		}

		.product-info {
			padding: 1rem;

			.product-name {
				font-size: 0.875rem;
				color: #333;
				display: block;
			}

			.product-price {
				font-size: 1rem;
				color: #409EFF;
				font-weight: bold;
				margin-top: 0.625rem;
				display: block;
			}
		}
	}
}
</style>

这个手机端商城项目代码还是挺多的。这里就不一一分享了。大概实现的功能和电脑端的 vue2写的那个差不多。

后续如果有小伙伴需要，慢慢我把这套前端电商商城项目再结合后端写成一个完整的项目。

好了，这个商商城前端h5静态网站模板项目今天就分享到这里、
完整的代码，有兴趣的小伙伴可以通过下方获取：

https://wwwoop.com/home/Index/projectInfo?goodsId=63&typeParam=2&subKey=1

使用uni-app框架 写电商商城前端h5静态网站模板项目-手机端-前端项目练习

使用uni-app框架写电商商城前端h5静态网站模板项目-手机端-前端项目练习