登录
使用uni-app框架 写电商商城前端h5静态网站模板项目-手机端-前端项目练习
2025年4月2日 22:09
以前用vue2 分享过一个电商商城前端静态网站项目-电脑端，需要的小伙伴还是很多的，最近又花了几天更新了一个 手机端的 电商商城h5项目，今天也分享一下实现方案。
对于以前写的 电商商城前端静态网站模板-电脑端，有兴趣的小伙伴 可以通过下方链接去考古一下：
jsonll.blog.csdn.net/article/det…
今天我们主要来分享一下 uni-app 写的 手机端的 电商商城前端h5静态网站。
使用的技术
网站使用了 uni-app 框架开发，专注于 H5 移动端网页。通过 uni-app，开发者可以轻松构建响应式页面，并利用框架内置的 UI 组件快速搭建界面。该模板帮助开发者深入了解 uni-app 的使用方法，并快速实现常见的电商商城功能。
接下来说一下网站实现的内容： · 首页 、 分类 、 购物车、 个人中心页、 结算页等等
· 首页：展示热门商品、活动信息和分类导航
· 分类：用户可以搜索和筛选商品
· 购物车：用户可以查看已添加的商品并进行删除或修改数量
· 个人中心页：显示用户的个人信息、订单历史等
· 结算页：展示用户选择的商品和结算信息，支持填写地址、支付方式等
项目目录结构
首页代码：
<!-- 作者：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静态网站模板项目 今天就分享到这里、
完整的代码，有兴趣的小伙伴可以通过下方获取：
