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尝试一下,选中前的颜色,选中后的颜色,以及切换页面的效果

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

相关推荐
一枚小小程序员哈1 天前
基于springboot/java/VUE的旅游管理系统/旅游网站的设计与实现
spring boot·spring·java-ee·maven·intellij-idea·旅游
自由随风飘2 天前
旅游城市数量最大化 01背包问题
数据结构·c++·算法·动态规划·旅游
2501_916007472 天前
iPhone查看App日志和系统崩溃日志的完整实用指南
android·ios·小程序·https·uni-app·iphone·webview
2501_915918412 天前
iOS 抓不到包怎么办?全流程排查思路与替代引导
android·ios·小程序·https·uni-app·iphone·webview
HebyH_2 天前
uniapp如何封装uni.request 全局使用
uni-app
随笔记3 天前
uniapp蓝牙连接设备并发送接收信息
javascript·uni-app·app
脑袋大大的3 天前
从“PPT动画”到“丝滑如德芙”——uni-app x 动画性能的“终极奥义”
前端·javascript·nginx·uni-app·uniapp·app开发·混合开发
随笔记3 天前
uniapp开发的app原生操作手机系统文件
前端·javascript·uni-app
于慨3 天前
uniapp上传文件
前端·uni-app
猫头_3 天前
uni-app 转微信小程序 · 避坑与实战全记录
前端·微信小程序·uni-app