2025 后端自学UNIAPP【项目实战:旅游项目】1、创建项目框架

1、创建项目

①项目名称:自定义,【我是travel】

②vue版本:vue3

③其他默认,最后创建

2、创建页面

①展开自己刚才创建的项目

②单击选中pages文件夹 --->鼠标右键---->新建页面

③页面名称:自定义favourite、like、collect......(这里是个收藏/点赞/喜欢的类似意义的页面)

④勾选:创建同名目录

⑤选择模版:使用scss的页面

⑥勾选:在pages.json中注册

⑦最后一步:创建(其他自选或者默认)

我们用类似方法在创建一个类似"我的/个人中心"意义的页面,my、personal_center......

3、pages.json中注册tarbar ,将代码添加进去

需要添加的代码

复制代码
// 底部导航tabBar
	"tabBar": {
		// 所有底部导航文字颜色
		"color": "#8183ff",
		// 所有底部导航文字选中后的颜色
		"selectedColor": "#0901ff",
		// 所有底部导航背景色颜色
		"backgroundColor": "#fff",
		// 底部导航列表
		"list": [
			// 第一个导航:
			// text:底部导航文本,
			// pagePath:底部导航链接路径,例如如果是favourte页面路径,那么点击就会跳转到我的收藏页面
			// iconPath:底部导航图标,这里是uniapp默认的
			{

				"text": "首页",
				"pagePath": "pages/index/index",
				"iconPath": "static/logo.png"
			},
			{
				"text": "我的收藏",
				"pagePath": "pages/favourite/favourite",
				"iconPath": "static/logo.png"
			},
			{
				"text": "个人中心",
				"pagePath": "pages/personal_center/personal_center",
				"iconPath": "static/logo.png"
			}
		]
	},

完整代码

复制代码
{
	"pages": [ //pages数组中第一项表示应用启动页,参考:https://uniapp.dcloud.io/collocation/pages
		{
			// 页面路径
			"path": "pages/index/index",
			"style": {
				// 页面标题
				"navigationBarTitleText": "首页"
			}
		},
		{
			// 页面路径
			"path": "pages/favourite/favourite",
			"style": {
				// 页面标题
				"navigationBarTitleText": "我的收藏"
			}
		},
		{
			// 页面路径
			"path": "pages/personal_center/personal_center",
			"style": {
				// 页面标题
				"navigationBarTitleText": "个人中心"
			}
		}
	],
	// 底部导航tabBar
	"tabBar": {
		// 所有底部导航文字颜色
		"color": "#8183ff",
		// 所有底部导航文字选中后的颜色
		"selectedColor": "#0901ff",
		// 所有底部导航背景色颜色
		"backgroundColor": "#fff",
		// 底部导航列表
		"list": [
			// 第一个导航:
			// text:底部导航文本,
			// pagePath:底部导航链接路径,例如如果是favourte页面路径,那么点击就会跳转到我的收藏页面
			// iconPath:底部导航图标,这里是uniapp默认的
			{

				"text": "首页",
				"pagePath": "pages/index/index",
				"iconPath": "static/logo.png"
			},
			{
				"text": "我的收藏",
				"pagePath": "pages/favourite/favourite",
				"iconPath": "static/logo.png"
			},
			{
				"text": "个人中心",
				"pagePath": "pages/personal_center/personal_center",
				"iconPath": "static/logo.png"
			}
		]
	},
	"globalStyle": {
		"navigationBarTextStyle": "black",
		"navigationBarTitleText": "uni-app",
		"navigationBarBackgroundColor": "#F8F8F8",
		"backgroundColor": "#F8F8F8"
	},
	"uniIdRouter": {}
}

4、运行到内置浏览器

顶部菜单栏---->运行----->运行到内置浏览器------>最右边会有页面效果,预览按钮下边(如图)

(其他也可以选如果你会的话,可能需要配置或者下载,这里不过多赘述)

可以点击tabbar尝试一下,选中前的颜色,选中后的颜色,以及切换页面的效果

(也可以自己更改背景颜色以及字体颜色效果,或者自行查询其他效果哦)

相关推荐
小妖6665 小时前
uni-app 引入vconsole web端正常,安卓端报错 Cannot read property ‘sendBeacon‘ of undefined
android·前端·uni-app
源码宝7 小时前
ERP进销存系统源码,SaaS模式多租户ERP管理系统,SpringBoot、Vue、UniAPP技术框架
vue.js·spring boot·uni-app·源代码管理·erp·erp系统·进销存
七七小报7 小时前
uniapp-商城-43-shop 后台管理 页面
uni-app
牧杉-惊蛰7 小时前
uniapp 震动功能实现
uni-app
yrldjsbk15 小时前
uniapp开发09-设置一个tabbar底部导航栏且配置icon图标
前端·uni-app
济南壹软网络科技-专注源码开发数十年!20 小时前
盲盒源码_盲盒系统_盲盒定制开发 盲盒搭建前端教程
开发语言·前端·uni-app·php
象骑士Hack21 小时前
Uni-app小程序 hello world示例
小程序·uni-app
源码云商1 天前
【旅游网站设计与实现】基于SpringBoot + Vue 的前后端分离项目 | 万字详细文档 + 源码 + 数据库 + PPT
vue.js·spring boot·旅游
CIb0la1 天前
同质化的旅游内核
程序人生·生活·旅游