当前位置：首页 > news >正文

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

news 2025/7/3 10:48:23

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": {}
}