相关icon的网站：https://www.iconfont.cn/
1、在开发app或者是小程序中，最常见的一个场景就是需要开发一个底部栏，少废话直接上代码
在uniapp的pages.json中：
{
"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
{
"path": "pages/index/index",
"style": {
"app-plus": {
"titleNView": false
}
}
},
{
"path": "pages/index/home",
"style": {
"navigationBarTitleText": "主页面"
}
}
,{
"path" : "pages/cart/cart",
"style" :
{
"navigationBarTitleText": "",
"enablePullDownRefresh": false,
"app-plus": {
// "titleNView":false,
// "navigationBarTextStyle": "white"
}
}
}
,{
"path" : "pages/user/user",
"style" :
{
"navigationBarTitleText": "",
"enablePullDownRefresh": false
}
}
,{
"path" : "pages/category/category",
"style" :
{
"navigationBarTitleText": "分类",
"enablePullDownRefresh": false,
"h5": {
"titleNView": {
"titleText": "H5分类",
"backgroundColor": "#36f",
"titleColor": "#fff"
}
},
"app-plus": {
"titleNView": {
"titleText": "app分类",
"titleAlign": "left"
}
}
}
}, {
"path" : "pages/log/log",
"style" :
{
"navigationBarTitleText": "",
"enablePullDownRefresh": false
}
}
,{
"path" : "pages/login/login",
"style" :
{
"navigationBarTitleText": "",
"enablePullDownRefresh": false
}
}
,{
"path" : "pages/detail/detail",
"style" :
{
"navigationBarTitleText": "",
"enablePullDownRefresh": false
}
}
,{
"path" : "pages/order/create",
"style" :
{
"navigationBarTitleText": "",
"enablePullDownRefresh": false
}
}
],
"tabBar": {
"color":"#777",
"selectedColor": "#36f",
"list": [
{
"text": "首页",
"pagePath": "pages/index/index",
"iconPath": "static/images/bar_icon_home.png",
"selectedIconPath": "static/images/bar_icon_home_active.png"
},
{
"text": "分类",
"pagePath": "pages/category/category",
"iconPath": "static/images/bar_icon_classify.png",
"selectedIconPath": "static/images/bar_icon_classify_active.png"
},
{
"text": "购物车",
"pagePath": "pages/cart/cart",
"iconPath": "static/images/bar_icon_shoppingcart.png",
"selectedIconPath": "static/images/bar_icon_shoppingcart_active.png"
},
{
"text": "我的",
"pagePath": "pages/user/user",
"iconPath": "static/images/bar_icon_mine.png",
"selectedIconPath": "static/images/bar_icon_mine_active.png"
}
]
},
// "easycom": {
// "autoscan": true,
// "custom": {
// "^tui-(.*)": "@/components/thorui/tui-$1/tui-$1.vue"
// }
// },
"globalStyle": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "uni-app2",
"navigationBarBackgroundColor": "#F8F8F8",
"backgroundColor": "#F8F8F8"
},
"uniIdRouter": {}
}
2、页面之间的跳转也是一个比较常用的功能，上代码
<navigator open-type="navigateBack">返回</navigator>
<navigator url="../log/log" open-type="redirect">日志</navigator>点击 <navigator> 组件时，执行 navigateBack 类型的跳转，即返回到上一个页面。
请注意，navigateBack 类型的跳转需要在目标页面中定义返回操作，例如使用 uni.navigateBack() 函数来返回上一个页面。
open-type 属性被设置为 "redirect"，这意味着跳转将导致页面重新加载。在 UniApp 中，redirect 类型的跳转会强制重新加载目标页面，而不是使用缓存。
<navigator url="../login/login">登录</navigator>跳转方式：直接写 URL 不会导致页面重新加载，而是使用缓存进行页面跳转。而设置 open-type="redirect" 会强制重新加载目标页面。
页面状态：直接写 URL 的跳转方式不会改变页面的状态，例如 URL 中的查询参数等。而设置 open-type="redirect" 的跳转方式会改变页面的状态，例如 URL 中的查询参数等。
// 跳转到用户页面
uni.switchTab({
url:"/pages/user/user"
})switchTab 专门用于 tabBar 页面的跳转，可以在不同的 tabBar 选项卡之间进行切换。而其他的方法，例如 redirectTo 和 navigateTo，则适用于普通的页面跳转，不会改变 tabBar 的选项卡状态。
在 uniapp 中，navigateTo 和 redirectTo 的区别如下：
- navigateTo：保留当前页面，跳转到应用内的某个页面，并返回原页面。只能跳转应用内非 tabBar 的页面的路径，路径后可以带参数。
- redirectTo：关闭当前页面，跳转到应用内的某个页面，并打开到应用内的某个页面。需要跳转的应用内非 tabBar 的页面的路径，路径后可以带参数。
总之，在 uniapp 中，navigateTo 和 redirectTo 都可以实现页面跳转，但它们在跳转方式和页面状态上有所不同。navigateTo 保留当前页面，可以返回原页面；而 redirectTo 关闭当前页面，无法返回原页面。
reLaunch 是关闭当前页面，打开到应用内的某个页面。它不依赖于任何页面，是一个全局的方法。使用 reLaunch 跳转时，无论是 tabBar 页面还是非 tabBar 页面，都可以通过参数传递数据。
switchTab 是切换 tabBar 页面，只能打开 tabBar 页面。它依赖于 tabBar 组件，需要在页面的 tabBar 属性中定义对应的 tabBar 页面。使用 switchTab 跳转时，不能传递参数。
总结起来，reLaunch 可以跳转到任意页面，而 switchTab 只能跳转到 tabBar 页面。此外，reLaunch 可以传递参数，而 switchTab 不能