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

news2025/4/2 20:16:57

以前用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) {
				// 跳转到商品详情页,传递商品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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2325961.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

远心镜头原理

文章目录 原理特点分类应用领域 参考&#xff1a;B站优致谱视觉 原理 远心镜头的工作原理基于其特殊的光学设计&#xff0c;旨在解决普通镜头存在的视差问题。它通过将镜头的光轴与成像面垂直&#xff0c;并使主光线平行于光轴&#xff0c;从而确保在一定的物距范围内&#xf…

centos7修复漏洞CVE-2023-38408

漏洞描述&#xff1a; CVE-2023-38408 是 OpenSSH 组件中的一个远程代码执行&#xff08;RCE&#xff09;漏洞&#xff0c;影响 OpenSSH 代理&#xff08;ssh-agent&#xff09;的安全性。该漏洞被发现于 2023 年 7 月&#xff0c;并被标记为 高危&#xff08;CVSS 评分 7.3&a…

uniapp微信小程序封装navbar组件

一、 最终效果 二、实现了功能 1、nav左侧返回icon支持自定义点击返回事件&#xff08;默认返回上一步&#xff09; 2、nav左侧支持既显示返回又显示返回首页icon 3、nav左侧只显示返回icon 4、nav左侧只显示返回首页icon 5、nav左侧自定义left插槽 6、nav中间支持title命名 7…

系统思考与心智模式

我们的生命为什么越来越长&#xff1f;因为有了疫苗&#xff0c;有了药物。可这些是怎么来的&#xff1f;是因为我们发现了细菌的存在。但在很久以前&#xff0c;医生、助产士甚至都不洗手——不是他们不负责&#xff0c;而是根本不知道“细菌”这回事。那细菌是怎么被发现的&a…

数据库--数据库设计

目录&#xff1a; 1.数据库设计和数据模型 2.概念结构设计&#xff1a;E-R模型 3.逻辑结构设计&#xff1a;从E-R图到关系设计 4.数据库规范化设计理论 5.数据库规范化设计实现 1.数据库设计和数据模型 数据库设计会影响数据库自身和上层应用的性能。 一个好的数据库设计可以提…

[Mac]利用hexo-theme-fluid美化个人博客

接上文,使用Fluid美化个人博客 文章目录 一、安装hexo-theme-fluid安装依赖指定主题创建「关于页」效果展示 二、修改个性化配置1. 修改网站设置2.修改文章路径显示3.体验分类和标签4.左上角博客名称修改5.修改背景图片6.修改关于界面 欢迎大家参观 一、安装hexo-theme-fluid 参…

黑盒测试的场景法(能对项目业务进行设计测试点)

定义: 通过运用场景来对系统的功能点或业务流程的描述&#xff0c;设计用例遍历场景&#xff0c;验证软件系统功能的正确性从而提高测试效果的一种方法。 场景法一般包含基本流和备用流。 基本流:软件功能的正确流程&#xff0c;通常一个业务只存在一个基本流且基本流有一个…

通过Anaconda Prompt激活某个虚拟环境并安装第三方库

打开 Anaconda Prompt 在Windows中&#xff0c;可以通过开始菜单搜索 Anaconda Prompt 来打开。&#xff08;红色箭头指向的地方。&#xff09; 激活虚拟环境 输入以下命令来激活您的虚拟环境&#xff08;假设虚拟环境名称为 myenv&#xff09;&#xff1a; conda activate…

全长约8.3公里!宁波象山港跨海大桥南中塔柱云端合龙

快科技3月31日消息&#xff0c;据报道&#xff0c;由中国交建二航局承建的宁波象山港跨海大桥顺利完成南中塔柱合龙施工&#xff0c;标志着这一重大交通工程取得阶段性突破。 这座连接宁波鄞州区与象山县的跨海通道全长8.3公里&#xff0c;其标志性的南主塔采用创新"钻石…

使用 2 端口探头测量 40 uOhm(2000 安培)PDN 的挑战 – 需要多少 CMRR?

部分 1 / 3 本文是 3 部分系列的第一部分&#xff1a; 第 2 部分 - 测量结果&#xff01; 第 3 部分 - 使用另一台 VNA 的测量结果 介绍 我们大多数人都知道 2 端口测量中的接地回路。我们大多数人也都知道&#xff0c;我们需要引入接地回路隔离器来纠正错误。如果没有&…

蓝桥杯——统计子矩阵

解法&#xff1a;二维前缀和双指针 代码&#xff1a; #include <iostream> using namespace std; typedef long long ll; ll prefix[505][505], a[250010]; int main() {ll n, m, k, ans 0; cin >> n >> m >> k;for(int i 1; i < n; i)for(int …

吾爱破解安卓逆向学习笔记(4p)

学习目标&#xff0c;了解安卓四大组件&#xff0c;activity生命周期&#xff0c;同时了解去除部分广告和更新提示。 广告类型 1.启动页广告 2.更新广告 3.横幅广告 安卓四大组件 组件描述Activity(活动)在应用中的一个Activity可以用来表示一个界面&#xff0c;意思可以…

stm32第十天外部中断和NVIC讲解

一&#xff1a;外部中断基础知识 1.STM32外部中断框架 中断的概念&#xff1a;在主程序运行过程中&#xff0c;出现了特点的中断触发条件&#xff0c;使得CPU暂停当前正在运行的程序&#xff0c;转而去处理中断程序&#xff0c;处理完成后又返回原来被暂停的位置继续运行 1&…

26考研——线性表_ 线性表的链式表示_单链表(2)

408答疑 文章目录 三、 线性表的链式表示单链表概念单链表的结构头结点 单链表上基本操作的实现单链表的初始化带头结点和不带头结点的初始化操作注意 求表长操作按序号查找结点按值查找表结点插入结点操作扩展&#xff1a;对某一结点进行前插操作 删除结点操作扩展&#xff1a…

MATLAB 控制系统设计与仿真 - 31

二次型最优控制 考虑到系统如果以状态空间方程的形式给出&#xff0c;其性能指标为&#xff1a; 其中F,Q,R是有设计者事先选定。线性二次最优控制问题简称LQ(Linear Quadractic)问题,就是寻找一个控制,使得系统沿着由指定初态出发的相应轨迹,其性能指标J取得最小值。 LQ问题分…

蓝桥杯15届JAVA_A组

将所有1x1转化为2x2 即1x1的方块➗4 然后计算平方数 记得-1 2 import java.io.BufferedReader; import java.io.InputStreamReader; import java.io.OutputStreamWriter; import java.io.PrintWriter;public class Main{static BufferedReader in new BufferedReader(new In…

deepseek v3 0324实现工作流编辑器

HTML 工作流编辑器 以下是一个简单的工作流编辑器的HTML实现&#xff0c;包含基本的拖拽节点、连接线和可视化编辑功能&#xff1a; <!DOCTYPE html> <html lang"zh-CN"> <head><meta charset"UTF-8"><meta name"viewp…

20250331-智谱-沉思

背景 收到GLM沉思的消息&#xff0c;立马试用下。感觉真的太及时了。 &#xff08;背景&#xff1a;为了客户的需求“AI辅助写作”实验了2款开源workflow&#xff0c;2款在线workflow&#xff0c;好几款多智能体框架后&#xff0c;心中无底之际。。。&#xff09; 1. GLM(开启…

Java EE(17)——网络原理——IP数据报结构IP协议解析(简述)

一.IP数据报结构 (1)版本&#xff1a;指明协议的版本&#xff0c;IPv4就是4&#xff0c;IPv6就是6 (2)首部长度&#xff1a;单位是4字节&#xff0c;表示IP报头的长度范围是20~60字节 (3)8位区分服务&#xff1a;实际上只有4位TOS有效&#xff0c;分别是最小延时&#xff0c;最…

26考研|高等代数:线性空间

线性空间这一章在整个高等代数学习过程中是非常精华的部分&#xff0c;在学习这一章的过程中会有部分的概念较为抽象&#xff0c;一定要抓紧抓牢对于概念的理解&#xff0c;反复阅读与感受&#xff0c;同时也可以根据已知的解析几何中介绍的二维空间或者三维空间进行类推比较&a…