uni-app初学

不会叫的狼2025-04-12 18:51

文章目录

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

小程序开发网址：

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

效果图：

1. pages.json 页面路由

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

js 复制代码 
{
	"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：

css 复制代码 
page {
	background-color: #f2f3f4;
	min-height: 100vh;
}
* {
	box-sizing: border-box;
}

设置背景色为灰色。

4. 首页

4.1 整体框架

4.2 完整代码

html 复制代码 
<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

详见官网 滑块视图容器

html 复制代码 
<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 公告

html 复制代码 
<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

html 复制代码 
<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

html 复制代码 
<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：点击添加到购物车
相关推荐
老李不敲代码5 小时前
榕壹云外卖跑腿系统：基于Spring Boot+MySQL+UniApp的智慧生活服务平台
spring boot·mysql·微信小程序·uni-app·软件需求
老李不敲代码10 小时前
榕壹云在线商城系统：基于THinkPHP+ Mysql+UniApp全端适配、高效部署的电商解决方案
mysql·微信小程序·小程序·uni-app·软件需求
diygwcom12 小时前
uniapp解决上架华为应用市场审核要求-监听权限的申请
uni-app
Json_13 小时前
uni-app 框架 调用蓝牙，获取 iBeacon 定位信标的数据，实现室内定位场景
前端·uni-app·蓝牙
zooKevin14 小时前
前端实现docx格式word文件预览，可以兼容原生、vue2、以及uni-app 项目，详细步骤。
前端·uni-app·word·docx
前端（从入门到入土）1 天前
uniapp加载json动画
uni-app·json
peachSoda71 天前
uniapp小程序生成海报/图片并保存分享
小程序·uni-app
奔跑吧邓邓子1 天前
使用 Spring Boot 和 Uniapp 搭建 NFC 读取系统
spring boot·uni-app·nfc数据读取
sunly_2 天前
uniapp：微信小程序，一键获取手机号
微信小程序·小程序·uni-app
热门推荐
01我决定放弃搞 Java 了02RAG 实践- Ollama+RagFlow 部署本地知识库03从零安装 LLaMA-Factory 微调 Qwen 大模型成功及所有的坑04Vue3 + TypeScript 的 Hooks 实用示例05DeepSeek RAGFlow构建本地知识库系统06如何在WPS和Word/Excel中直接使用DeepSeek功能07【WRF理论第十三期】详细介绍 Registry 的作用、结构和内容08汽车上的各种质量：整备质量、总质量、装载质量、簧上质量、簧下质量09DeepSeek各版本说明与优缺点分析10React 从基础到架构实践