uni-app初学

news2025/4/13 11:22:22

文章目录

  • 1. pages.json 页面路由
  • 2. 图标
  • 3. 全局 CSS
  • 4. 首页
    • 4.1 整体框架
    • 4.2 完整代码
    • 4.3 轮播图 swiper
      • 4.3.1 image
    • 4.4 公告
      • 4.4.1 uni-icons
    • 4.5 分类 uni-row、uni-col
    • 4.6 商品列表 uni-row、uni-col

小程序开发网址:

注册小程序账号
微信开发者工具下载
uniapp 官网
HbuilderX 下载
色彩网站
图标网站
Postimage-免费转换图片比例

效果图:

在这里插入图片描述

1. pages.json 页面路由

pages.json 文件用来对 uni-app 进行全局配置,决定页面文件的路径、窗口样式、原生的导航栏、底部的原生tabbar 等。

{
	"pages": [ //pages数组中第一项表示应用启动页,参考:https://uniapp.dcloud.io/collocation/pages
		{
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "首页"
			}
		},
		{
			"path" : "pages/category/category",
			"style" : 
			{
				"navigationBarTitleText" : "分类"
			}
		},
		{
			"path" : "pages/user/user",
			"style" : 
			{
				"navigationBarTitleText" : "我的"
			}
		}
	],
	"globalStyle": {
		"navigationBarTextStyle": "white",
		"navigationBarTitleText": "校园小程序",
		"navigationBarBackgroundColor": "#3cb371",
		"backgroundColor": "#F8F8F8"
	},
	"uniIdRouter": {},
	"tabBar": {
		"selectedColor": "#3cb371",
		"list": [
			{
				"pagePath": "pages/index/index",
				"iconPath": "/static/icons/首页.png",
				"selectedIconPath": "/static/icons/首页-高亮.png",
				"text": "首页"
			},
			{
				"pagePath": "pages/category/category",
				"iconPath": "/static/icons/分类.png",
				"selectedIconPath": "/static/icons/分类-高亮.png",
				"text": "分类"
			},
			{
				"pagePath": "pages/user/user",
				"iconPath": "/static/icons/我的.png",
				"selectedIconPath": "/static/icons/我的-高亮.png",
				"text": "我的"
			}
		]
	}
}
  • pages:设置页面路径及窗口表现
    • path:配置页面路径
    • style:配置页面窗口表现
      • navigationBarTitleText:导航栏标题文字内容
    • needLogin:是否需要登录才可访问
  • globalStyle:设置默认页面的窗口表现
    • navigationBarTextStyle:导航栏标题颜色及状态栏前景颜色,仅支持 black/white
    • navigationBarTitleText:导航栏标题文字内容
    • navigationBarBackgroundColor:导航栏背景颜色
    • backgroundColor:窗口的背景色
  • tabBar:设置底部 tab 的表现
    • color:tab 上的文字默认颜色
    • selectedColor:tab 上的文字选中时的颜色
    • list:tab 的列表,详见 list 属性说明,最少2个、最多5个 tab
      • pagePath:页面路径,必须在 pages 中先定义
      • iconPath:图片路径,icon 大小限制为40kb,建议尺寸为 81px * 81px
      • selectedIconPath:选中时的图片路径,icon 大小限制为40kb,建议尺寸为 81px * 81px
      • text:tab 上按钮文字

2. 图标

1、访问 图标网站,搜索选择喜欢的图标
在这里插入图片描述
在这里插入图片描述

2、点击作者
在这里插入图片描述

3、点击图标集
在这里插入图片描述

4、选择所有需要的图标
在这里插入图片描述

5、加入购物车
在这里插入图片描述

6、添加到个人项目中
在这里插入图片描述

7、个人主页 > 我的项目
在这里插入图片描述

8、下载所需图标
在这里插入图片描述

9、选择颜色,下载灰色图标,做为未选中时图标。
在这里插入图片描述

10、选择绿色,下载绿色图标,做为选中时图标。
在这里插入图片描述

3. 全局 CSS

global.css:

page {
	background-color: #f2f3f4;
	min-height: 100vh;
}
* {
	box-sizing: border-box;
}

设置背景色为灰色。

4. 首页

4.1 整体框架

在这里插入图片描述

4.2 完整代码

<template>
	<view>
		<!-- 轮播图 -->
		<view>
			<swiper circular autoplay :interval="3000" :duration="500" indicator-dots style="height: 350rpx;"
			  indicator-color="rgba(255, 255, 255, 0.6)" indicator-active-color="#3CB371">
			  <swiper-item v-for="item in imgs" :key="item" >
			    <image :src="item" alt="" mode="widthFix" style="width: 100%;" />
			  </swiper-item>
			</swiper>
		</view>
		<!-- 公告 -->
		<view style="margin: 10px;">
			<view style="padding: 5px 10px; background-color: white; font-size: 12px; border-radius: 5px; display: flex; align-items: center;">
			    <uni-icons type="sound" size="20"></uni-icons>
			    <view>{{ notice }}</view>
			  </view>
		</view>
		<!-- 分类 -->
		<view style="margin: 10px; padding: 5px 10px; background-color: white; border-radius: 5px;">
		  <uni-row>
		    <uni-col :span="6">
		      <view class="grid-item-box" @click="clickItem('时令水果')">
		        <image mode="widthFix" style="width: 50%;" src="../../static/imgs/时令水果.png"></image>
		        <text style="font-size: 13px; margin-top: 5px;">时令水果</text>
		      </view>
		    </uni-col>
		    <uni-col :span="6">
		      <view class="grid-item-box" @click="clickItem('品质肉禽')">
		        <image mode="widthFix" style="width: 50%;" src="../../static/imgs/品质肉禽.png"></image>
		        <text style="font-size: 13px; margin-top: 5px;">品质肉禽</text>
		      </view>
		    </uni-col>
		    <uni-col :span="6">
		      <view class="grid-item-box" @click="clickItem('新鲜水产')">
		        <image mode="widthFix" style="width: 50%;" src="../../static/imgs/新鲜水产.png"></image>
		        <text style="font-size: 13px; margin-top: 5px;">新鲜水产</text>
		      </view>
		    </uni-col>
		    <uni-col :span="6">
		      <view class="grid-item-box" @click="clickItem('蔬菜蛋品')">
		        <image mode="widthFix" style="width: 50%;" src="../../static/imgs/蔬菜蛋品.png"></image>
		        <text style="font-size: 13px; margin-top: 5px;">蔬菜蛋品</text>
		      </view>
		    </uni-col>
		  </uni-row>
		</view>
		<!-- 商品列表 -->
		<view style="margin: 10px; font-size: 12px;">
		  <uni-row :gutter='10'>
		    <uni-col :span='12' v-for="item in goodsList" :key="item.name">
		      <view style="margin-bottom: 5px; background-color: white; padding: 10px; border-radius: 10px;">
		        <image :src="item.img" mode="widthFix" style="width: 100%;"></image>
		        <view class="lineEllipsis">{{ item.name }}</view>
		        <view style="color: red; margin-top: 5px; font-weight: bold; font-size: 14px;">¥{{ item.price }}</view>
		        <view style="text-align: right;"><uni-icons type="plus" size="25" style="color: #666;" @click="addShoppingCart(item)"></uni-icons></view>
		      </view>
		    </uni-col>
		  </uni-row>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				imgs: [
				  'https://m.360buyimg.com/babel/jfs/t20260719/200274/27/38564/103066/64b8a92bF9ff64827/86b0873317ff1670.jpg',
				  'https://m.360buyimg.com/babel/jfs/t20260720/127672/11/35840/78112/64ba27ceF7f110966/ec2e2c6c366fa94c.jpg',
				  'https://m.360buyimg.com/babel/jfs/t20260713/161699/23/38353/136417/64b0a7dbF5e25fcdd/ba43ddee33949c1c.png',
				],
				notices: [
				  {content: "时令水果今日半价"},
				  {content: "百亿补贴限时抢购"},
				  {content: "9块9特卖专场"},
				],
				notice: '',
				goodsList: [
				  { name: '固伦天原 农家土鸡蛋现捡新鲜谷物虫草柴鸡蛋初生蛋简装 20枚装', price: 19.9,
				    img: 'https://m11.360buyimg.com/babel/s522x456_jfs/t1/147254/20/37798/87316/6458689bF5bb085ce/f1177ea39ce03322.jpg' },
				  { name: '大口鲜 熟冻帝王蟹礼盒装 海鲜礼包 整只 3.2-3.6斤现货 海产礼盒', price: 79.9,
				    img: 'https://m11.360buyimg.com/babel/s522x456_jfs/t1/210206/31/4285/246694/61614b6bE8e495865/1b801854736d9736.jpg' },
				  { name: '仙泉湖三去星洲红 500g*1条 净膛冷冻罗非鱼海鲜食材 刺少', price: 99.9,
				    img: 'https://m11.360buyimg.com/babel/s522x456_jfs/t1/139489/10/25554/185007/61d68c23Eef30e5c7/86fac8623b27de32.jpg' },
				  { name: '洛川苹果80mm大果 净重4.2斤 陕西延安红富士新鲜时令生鲜水果', price: 19.9,
				    img: 'https://m11.360buyimg.com/babel/s561x561_jfs/t1/206463/33/3190/152008/6155d86eE00924ef0/8e955e07ea8d1942.jpg' },
				  { name: '妙果樱广西青芒新鲜水果大青芒果当季时令生鲜芒果 3斤大果(单果250g+)', price: 29.9,
				    img: 'https://m11.360buyimg.com/babel/s561x561_jfs/t1/142695/20/37414/69619/64b8d41bF0e06aea0/8961fde6fe2b619b.jpg' },
				]
			}
		},
		onLoad() {
			this.loadNotice();
		},
		methods: {
			loadNotice() {
				let i = 0
				this.notice = this.notices[i++].content
				setInterval(() => {
					this.notice = this.notices[i++].content
					if (i === this.notices.length) {
						i = 0
					}
				}, 5000)
			},
			// 点击分类,跳转页面
			clickItem(name) {
				console.log(name)
			},
			// 点击添加到购物车
			addShoppingCart(item) {
				console.log(item.name)
			}
		}
	}
</script>

<style>
	.grid-item-box {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	.lineEllipsis {
		word-break: break-all;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		/* 超出几行省略 */
		overflow: hidden;
	}
</style>

4.3 轮播图 swiper

在这里插入图片描述

详见官网 滑块视图容器

<view>
	<swiper circular autoplay :interval="3000" :duration="500" indicator-dots style="height: 350rpx;"
	  indicator-color="rgba(255, 255, 255, 0.6)" indicator-active-color="#3CB371">
	  <swiper-item v-for="item in imgs" :key="item" >
	    <image :src="item" alt="" mode="widthFix" style="width: 100%;" />
	  </swiper-item>
	</swiper>
</view>

imgs: [
  'https://m.360buyimg.com/babel/jfs/t20260719/200274/27/38564/103066/64b8a92bF9ff64827/86b0873317ff1670.jpg',
  'https://m.360buyimg.com/babel/jfs/t20260720/127672/11/35840/78112/64ba27ceF7f110966/ec2e2c6c366fa94c.jpg',
  'https://m.360buyimg.com/babel/jfs/t20260713/161699/23/38353/136417/64b0a7dbF5e25fcdd/ba43ddee33949c1c.png',
]
  • circular :是否采用衔接滑动,即播放到末尾后重新回到开头
  • autoplay :是否自动切换
  • interval:自动切换时间间隔
  • duration:滑动动画时长
  • indicator-dots:是否显示面板指示点
  • indicator-color:指示点颜色
  • indicator-active-color:当前选中的指示点颜色

4.3.1 image

  • src:图片资源地址
  • mode:图片裁剪、缩放的模式。widthFix:宽度不变,高度自动变化,保持原图宽高比不变

4.4 公告

在这里插入图片描述

<view style="margin: 10px;">
	<view style="padding: 5px 10px; background-color: white; font-size: 12px; border-radius: 5px; display: flex; align-items: center;">
	    <uni-icons type="sound" size="20"></uni-icons>
	    <view>{{ notice }}</view>
	 </view>
</view>

notices: [
  {content: "时令水果今日半价"},
  {content: "百亿补贴限时抢购"},
  {content: "9块9特卖专场"},
],
notice: '',
	
loadNotice() {
	let i = 0
	this.notice = this.notices[i++].content
	setInterval(() => {
		this.notice = this.notices[i++].content
		if (i === this.notices.length) {
			i = 0
		}
	}, 5000)
}

onLoad() {
	this.loadNotice();
}

4.4.1 uni-icons

下载安装 扩展组件 uni-icons
在这里插入图片描述

在这里插入图片描述

4.5 分类 uni-row、uni-col

在这里插入图片描述

<view style="margin: 10px; padding: 5px 10px; background-color: white; border-radius: 5px;">
  <uni-row>
    <uni-col :span="6">
      <view class="grid-item-box" @click="clickItem('时令水果')">
        <image mode="widthFix" style="width: 50%;" src="../../static/imgs/时令水果.png"></image>
        <text style="font-size: 13px; margin-top: 5px;">时令水果</text>
      </view>
    </uni-col>
	
    ... 省略
  </uni-row>
</view>

clickItem(name) {
	console.log(name)
}

.grid-item-box {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
  • uni-row:流式栅格系统,随着屏幕或视口分为 24 份,可以迅速简便地创建布局。
  • span:栅格占据的列数
  • display: flex;:使图片和文字垂直居中。
  • width: 50%;:图片排版更好看。
  • @click=“clickItem(‘时令水果’)”:点击事件可以用于跳转页面。

4.6 商品列表 uni-row、uni-col

在这里插入图片描述

<view style="margin: 10px; font-size: 12px;">
  <uni-row :gutter='10'>
    <uni-col :span='12' v-for="item in goodsList" :key="item.name">
      <view style="margin-bottom: 5px; background-color: white; padding: 10px; border-radius: 10px;">
        <image :src="item.img" mode="widthFix" style="width: 100%;"></image>
        <view class="lineEllipsis">{{ item.name }}</view>
        <view style="color: red; margin-top: 5px; font-weight: bold; font-size: 14px;">¥{{ item.price }}</view>
        <view style="text-align: right;"><uni-icons type="plus" size="25" style="color: #666;" @click="addShoppingCart(item)"></uni-icons></view>
      </view>
    </uni-col>
  </uni-row>
</view>

goodsList: [
  { name: '固伦天原 农家土鸡蛋现捡新鲜谷物虫草柴鸡蛋初生蛋简装 20枚装', price: 19.9,
    img: 'https://m11.360buyimg.com/babel/s522x456_jfs/t1/147254/20/37798/87316/6458689bF5bb085ce/f1177ea39ce03322.jpg' },
  { name: '大口鲜 熟冻帝王蟹礼盒装 海鲜礼包 整只 3.2-3.6斤现货 海产礼盒', price: 79.9,
    img: 'https://m11.360buyimg.com/babel/s522x456_jfs/t1/210206/31/4285/246694/61614b6bE8e495865/1b801854736d9736.jpg' },
  { name: '仙泉湖三去星洲红 500g*1条 净膛冷冻罗非鱼海鲜食材 刺少', price: 99.9,
    img: 'https://m11.360buyimg.com/babel/s522x456_jfs/t1/139489/10/25554/185007/61d68c23Eef30e5c7/86fac8623b27de32.jpg' },
  { name: '洛川苹果80mm大果 净重4.2斤 陕西延安红富士新鲜时令生鲜水果', price: 19.9,
    img: 'https://m11.360buyimg.com/babel/s561x561_jfs/t1/206463/33/3190/152008/6155d86eE00924ef0/8e955e07ea8d1942.jpg' },
  { name: '妙果樱广西青芒新鲜水果大青芒果当季时令生鲜芒果 3斤大果(单果250g+)', price: 29.9,
    img: 'https://m11.360buyimg.com/babel/s561x561_jfs/t1/142695/20/37414/69619/64b8d41bF0e06aea0/8961fde6fe2b619b.jpg' },
]

addShoppingCart(item) {
	console.log(item.name)
}

.lineEllipsis {
	word-break: break-all;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	/* 超出几行省略 */
	overflow: hidden;
}
  • gutter:栅格间隔
  • width: 100%;:图片占满栅格
  • .lineEllipsis:文字超出 2 行省略处理
  • addShoppingCart:点击添加到购物车

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

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

相关文章

PHP多维数组

在 PHP 中&#xff0c;多维数组是数组的数组&#xff0c;允许你存储和处理更复杂的数据结构。多维数组可以有任意数量的维度&#xff0c;但通常我们最常用的是二维数组&#xff08;数组中的数组&#xff09;。 首先来介绍一下一维数组&#xff0c; <?php//一维数组 $strAr…

数学建模:针对汽车行驶工况构建思路的延伸应用

前言&#xff1a; 汽车行驶工况构建的思简单理解为将采集的大量数据进行“去除干扰、数据处理&#xff0c;缩减至1800S的数据”&#xff0c;并可达到等效替换的目的&#xff0c;可以使在试验室快速复现&#xff1b;相应的解决思路、办法可应用在 “通过能量流采集设备大量采集…

go语言内存泄漏的常见形式

go语言内存泄漏 子字符串导致的内存泄漏 使用自动垃圾回收的语言进行编程时&#xff0c;通常我们无需担心内存泄漏的问题&#xff0c;因为运行时会定期回收未使用的内存。但是如果你以为这样就完事大吉了&#xff0c;哪里就大错特措了。 因为&#xff0c;虽然go中并未对字符串…

当DRAM邂逅SSD:新型“DRAM+”存储技术来了!

在当今快速发展的科技领域&#xff0c;数据存储的需求日益增长&#xff0c;对存储设备的性能和可靠性提出了更高的要求。传统DRAM以其高速度著称&#xff0c;但其易失性限制了应用范围&#xff1b;而固态硬盘SSD虽然提供非易失性存储&#xff0c;但在速度上远不及DRAM。 为了解…

JS实现文件点击或者拖拽上传

B站看到了渡一大师课的切片&#xff0c;自己实现了一下&#xff0c;做下记录 效果展示 分为上传前、上传中和上传后 实现 分为两步 界面交互网络请求 源码如下 upload.html <!DOCTYPE html> <html lang"zh-CN"><head><meta charset&q…

Centos7.9 升级内核,安装RTX5880驱动

系统镜像下载 https://vault.centos.org/7.9.2009/isos/x86_64/CentOS-7-x86_64-DVD-2009.iso 系统安装步骤省略 开始安装显卡驱动 远程登录查看内核 [root192 ~]# uname -a Linux 192.168.119.166 3.10.0-1160.el7.x86_64 #1 SMP Mon Oct 19 16:18:59 UTC 2020 x86_64 x8…

Xdocreport实现根据模板导出word

只使用freemaker生成简单的word文档很容易&#xff0c;但是当word文档需要插入动态图片&#xff0c;带循环数据&#xff0c;且含有富文本时解决起来相对比较复杂&#xff0c;但是使用Xdocreport可以轻易解决。 Xdocreport既可以实现文档填充也可以实现文档转换&#xff0c;此处…

当当平台商品详情接口设计与调用指南

当当平台商品详情接口设计与调用指南 接口名称 GET /api/product/detail 图书商品核心信息查询接口 请求参数说明 参数名称 类型 是否必填 说明 isbn string 是 国际标准书号(支持13位/10位) product_id string 否 平台内部商品编号&#xff08;与…

sql server分析表大小

使用自动存储过程查询 EXEC sp_spaceused YourTableName; rows&#xff1a;表中的行数。reserved&#xff1a;表占用的总空间&#xff08;包括数据和索引&#xff09;。data&#xff1a;表数据占用的空间。index_size&#xff1a;索引占用的空间。unused&#xff1a;未使用的空…

《AI大模型应知应会100篇》第13篇:大模型评测标准:如何判断一个模型的优劣

第13篇&#xff1a;大模型评测标准&#xff1a;如何判断一个模型的优劣 摘要 近年来&#xff0c;大语言模型&#xff08;LLMs&#xff09;在自然语言处理、代码生成、多模态任务等领域取得了显著进展。然而&#xff0c;随着模型数量和规模的增长&#xff0c;如何科学评估这些模…

【区块链安全 | 第三十七篇】合约审计之获取私有数据(一)

文章目录 私有数据访问私有数据实例存储槽Solidity 中的数据存储方式1. storage(持久化存储)定长数组变长数组2. memory(临时内存)3. calldata可见性关键字私有数据存储风险安全措施私有数据 私有数据(Private Data)通常指的是只对特定主体可见或可访问的数据,在区块链…

项目管理(高软56)

系列文章目录 项目管理 文章目录 系列文章目录前言一、进度管理二、配置管理三、质量四、风险管理五、真题总结 前言 本节主要讲项目管理知识&#xff0c;这些知识听的有点意思啊。对于技术人想创业&#xff0c;单干的都很有必要听听。 一、进度管理 二、配置管理 三、质量 四…

OpenCV边缘检测方法详解

文章目录 引言一、边缘检测基础概念边缘类型 二、OpenCV中的边缘检测方法1. Sobel算子2. Scharr算子3. Laplacian算子4. Canny边缘检测 三、性能比较与选择建议四、总结 引言 边缘检测是计算机视觉和图像处理中的基础技术&#xff0c;它能有效识别图像中物体的边界&#xff0c…

Linux:shell运行原理+权限

1.shell的运行原理 如果我们打开了命令终端或者是xshell进行远程登录服务器&#xff0c;就会看到命令行&#xff0c;如下图所示&#xff1a; 这个命令行本身也是系统中一个运行起来的程序&#xff0c;它用来接收用户的输入&#xff0c;帮用户来执行指令&#xff0c;将运行结果展…

【LeetCode Solutions】LeetCode 160 ~ 165 题解

CONTENTS LeetCode 160. 相交链表&#xff08;简单&#xff09;LeetCode 162. 寻找峰值&#xff08;中等&#xff09;LeetCode 164. 最大间距&#xff08;中等&#xff09;LeetCode 165. 比较版本号&#xff08;中等&#xff09; LeetCode 160. 相交链表&#xff08;简单&#…

Openssl升级至openssl9.8p1含全部踩坑内容

1、安装依赖包基础条件 yum install gcc yum install gcc-c yum install perl yum install perl-IPC-Cmd yum install pam yum install pam-devel sudo yum install perl-Data-Dumper 问题一&#xff1a;提示yum不可用 镜像源问题更换阿里源即可 wget -O /etc/yum.repos.d/…

二战蓝桥杯所感

&#x1f334; 前言 今天是2025年4月12日&#xff0c;第十六届蓝桥杯结束&#xff0c;作为二战的老手&#xff0c;心中还是颇有不甘的。一方面&#xff0c;今年的题目比去年简单很多&#xff0c;另一方面我感觉并没有把能拿的分都拿到手&#xff0c;这是我觉得最遗憾的地方。不…

查看手机在线状态,保障设备安全运行

手机作为人们日常生活中不可或缺的工具&#xff0c;承载着沟通、工作、娱乐等多种功能。保障手机设备的安全运行是我们每个人都非常重要的任务&#xff0c;而了解手机的在线状态则是其中的一环。通过挖数据平台提供的在线查询工具&#xff0c;我们可以方便快捷地查询手机号的在…

#关于数据库中的时间存储

✅ 一、是否根据“机器当前时区”得到本地时间再转 UTC&#xff1f; 结论&#xff1a;是的&#xff0c;但仅对 TIMESTAMP 字段生效。 数据库&#xff08;如 MySQL&#xff09;在插入 TIMESTAMP 类型数据时&#xff1a; 使用当前会话的时区&#xff08;默认跟随系统时区&#…

第16届蓝桥杯省赛python B组个人题解

文章目录 前言ABCDEFGH 前言 仅个人回忆&#xff0c;不保证正确性 貌似都是典题&#xff0c;针对python的长代码模拟题也没有&#xff0c;一小时速通了&#xff0c;希望不要翻车。 更新&#xff1a;B、G翻车了。。 A 答案&#xff1a;103 B 应该是按长度排序&#xff0c;然后…