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

以前用vue2 分享过一个电商商城前端静态网站项目-电脑端，需要的小伙伴还是很多的，最近又花了几天更新了一个 手机端的 电商商城h5项目，今天也分享一下实现方案。
对于以前写的 电商商城前端静态网站模板-电脑端，有兴趣的小伙伴 可以通过下方链接去考古一下：
https://jsonll.blog.csdn.net/article/details/145716381

今天我们主要来分享一下 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) {// 跳转到商品详情页，传递商品IDuni.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