小程序学习05——uniapp路由和菜单配置

目录

一、路由

二、如何管理页面及路由?

三、pages.json 页面路由

四、 tabBar


一、路由

路由:在前端,往往指代用不同地址请求不同页面,决定了用户如何在应用的不同页面之间导航。

菜单:对于每个路径(路由),跳转

二、如何管理页面及路由?

uniapp管理路由的方式:pages.json维护,框架统一管理。

uni-app 通过 pages 节点配置应用由哪些页面组成,pages 节点接收一个数组,数组每个项都是一个对象,其属性值如下:

 path: String类型,用于配置页面路径,(路由)style: Object类型,用于配置页面窗口表现,配置项参考uniapp中pageStyle,(样式)needLogin:Boolean类型 默认false,表示是否需要登录才可访问

Tips:

  • pages节点的第一项为应用入口页(即首页)

  • 应用中新增/减少页面,都需要对 pages 数组进行修改

  • 文件名不需要写后缀,框架会自动寻找路径下的页面资源

代码示例:

开发目录为:

┌─pages
│  ├─index
│  │  └─index.vue
│  └─login
│     └─login.vue
├─static
├─main.js
├─App.vue
├─manifest.json
└─pages.json

三、pages.json 页面路由

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

导航栏高度为 44px (不含状态栏),tabBar 高度为 50px (不含安全区)。

它类似微信小程序中app.json页面管理部分。注意定位权限申请等原属于app.json的内容,在uni-app中是在manifest中配置。

pages.json文件中页面路由部分代码示意如下 :

"pages": [ //pages数组中第一项表示应用启动页,参考:https://uniapp.dcloud.io/collocation/pages{"path": "pages/index/index","style": {"navigationBarTitleText": "uni-app"}},{"path": "pages/order/index","style": {"navigationBarTitleText": "","navigationBarBackgroundColor": "#FFFFFF"}},{"path": "pages/user/index","style": {"navigationBarTitleText": "","navigationBarBackgroundColor": "#FFFFFF"}}
]

四、 tabBar

如果应用是一个多 tab 应用,可以通过 tabBar 配置项指定一级导航栏,以及 tab 切换时显示的对应页。

代码示例

"tabBar": {"color": "#535353",  //字体颜色"selectedColor": "#0bb584",  //选中的颜色"borderStyle": "white",   //边框(默认为黑色(black)"backgroundColor": "#ffffff","list": [{"pagePath": "pages/index/index","iconPath": "static/resource/tab_index.png","selectedIconPath": "static/resource/tab_index_seled.png","text": "首页"}, {"pagePath": "pages/order/index","iconPath": "static/resource/tab_pub.png","selectedIconPath": "static/resource/tab_pub_seled.png","text": "订单"}, {"pagePath": "pages/user/index","iconPath": "static/resource/tab_user.png","selectedIconPath": "static/resource/tab_user_seled.png","text": "我的"}]
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/65848.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【网络安全实验室】SQL注入实战详情

如果额头终将刻上皱纹,你只能做到,不让皱纹刻在你的心上 1.最简单的SQL注入 查看源代码,登录名为admin 最简单的SQL注入,登录名写入一个常规的注入语句: 密码随便填,验证码填正确的,点击登录…

使用 ThinkPHP 和 Vue.js 开发现代 Web 应用的指南

使用 ThinkPHP 和 Vue.js 开发现代 Web 应用的指南 在当今的 Web 开发中,前后端分离架构逐渐成为一种主流趋势。结合 ThinkPHP 和 Vue.js,可以高效地构建现代化的 Web 应用。本文将详细介绍如何使用这两种技术栈,从环境搭建到基本功能实现&a…

_使用CLion的Vcpkg安装SDL2,添加至CMakelists时报错,编译报错

语言:C20 编译器:gcc 14.2 摘要:初次使用Vcpkg添加SDL2,出现CMakelists找不到错误、编译缺失main错误、运行失败错误。 CMakelists缺失错误: 使用CLion的Vcpkg安装SDL2时,按照指示把对应代码添加至CMakel…

可解释性:走向透明与可信的人工智能

随着深度学习和机器学习技术的迅速发展,越来越多的行业和领域开始应用这些技术。然而,这些技术的“黑盒”特性也带来了不容忽视的挑战🎲。在许多任务中,尽管这些模型表现出色,取得了相当高的精度,但其决策过…

SQL Server导出和导入可选的数据库表和数据,以sql脚本形式

一、导出 1. 打开SQL Server Management Studio,在需要导出表的数据库上单击右键 → 任务 → 生成脚本 2. 在生成脚本的窗口中单击进入下一步 3. 如果只需要导出部分表,则选择第二项**“选择具体的数据库对象(Select specific database objects)”**&am…

uniapp——App下载文件,打开文档(一)

uniapp如何下载文件、打开文件 文章目录 uniapp如何下载文件、打开文件下载文件下载文件成功返回数据格式 打开文档处理 iOS 打开文件可能失败问题 相关API: uni.downloadFileuni.openDocument 注意: 只支持 GET 请求,需要 POST的&#xff…

Eclipse下载安装图文教程

一、下载Eclipse 1、打开 Eclipse官网 2、下载免安装版; 3、切换国内下载源 4、下载压缩包到本地; 5、下载完成后直接解压就可以使用了; 二、汉化 1、打开eclipse,点击 ‘Help’ → ‘Install new software…’ 2、点击A…

【开源免费】基于SpringBoot+Vue.JS音乐网站(JAVA毕业设计)

本文项目编号 T 109 ,文末自助获取源码 \color{red}{T109,文末自助获取源码} T109,文末自助获取源码 目录 一、系统介绍二、数据库设计三、配套教程3.1 启动教程3.2 讲解视频3.3 二次开发教程 四、功能截图五、文案资料5.1 选题背景5.2 国内…

Sonic:开源Go语言开发的高性能博客平台

Sonic:一个用Go语言开发的高性能博客平台 简介 Sonic,一个以其速度如声速般快速而命名的博客平台,是一个用Go语言开发的高性能博客系统。正如其名字所暗示的,Sonic旨在提供一个简单而强大的博客解决方案。这个项目受到了Halo项目…

Pygame Zero(pgzrun)详解(简介、使用方法、坐标系、目录结构、语法参数、安装、实例解释)

Pygame Zero(pgzrun)详解 (简介、使用方法、坐标系、目录结构、语法参数、安装、实例解释) 本文目录: 零、时光宝盒 一、Pygame Zero简介 二、Pygame Zero的编写游戏的一般流程 三、Pygame Zero 的坐标系 四、Py…

Java jni调用nnom rnn-denoise 降噪

介绍&#xff1a;https://github.com/majianjia/nnom/blob/master/examples/rnn-denoise/README_CN.md 默认提供了一个wav的例子 #include <stdint.h> #include <stdlib.h> #include <stdio.h> #include <math.h> #include <string.h>#include …

图像处理-Ch7-小波函数

个人博客&#xff01;无广告观看&#xff0c;因为这节内容太多了&#xff0c;有点放不下&#xff0c;分了三节 文章目录 多分辨率展开(Multi-resolution Expansions)序列展开(Series Expansions)尺度函数(Scaling Function)例&#xff1a;哈尔尺度函数(Haar scaling func)多分…

深度学习在文本情感分析中的应用

引言 情感分析是自然语言处理&#xff08;NLP&#xff09;中的一个重要任务&#xff0c;旨在识别和提取文本中的主观信息。随着深度学习技术的发展&#xff0c;我们可以使用深度学习模型来提高情感分析的准确性和效率。本文将介绍如何使用深度学习进行文本情感分析&#xff0c…

solr9.7 单机安装教程

1.环境要求:jdk11以上 2.下载wget https://dlcdn.apache.org/solr/solr/9.7.0/solr-9.7.0.tgz 3.解压 4.修改solr.in.sh配置 5.启动命令 bin/solr start 6.创建core bin/solr create -c <core名称> 注意:用solr ui界面创建&#xff0c;会提示找不到solrconfig.xml和m…

arm rk3588 升级glibc2.31到2.33

一、查看glibc版本 rootztl:~# ldd --version ldd (Ubuntu GLIBC 2.31-0ubuntu9.2) 2.31 Copyright (C) 2020 Free Software Foundation, Inc. This is free software; see the source for copying conditions. There is NO warranty; not even for MERCHANTABILITY or FITNE…

Python爬虫(一)- Requests 安装与基本使用教程

文章目录 前言一、简介及安装1. 简介2. 安装 Requests2.1 安装2.2 检查安装是否成功 二、使用 Requests 发送 HTTP 请求1. 发送 GET 请求2. 发送 POST 请求3. 发送 PUT 请求4. 发送 DELETE 请求5. 发送 HEAD 请求6. 发送 OPTIONS 请求 三、传递参数1. GET 请求传递 URL 参数1.1…

人工智能:AI技术的发展阶段以及展望

目前&#xff0c;人工智能&#xff08;AI&#xff09;技术的发展阶段主要可以分为三类&#xff1a;ANI&#xff08;Artificial Narrow Intelligence&#xff09;、AGI&#xff08;Artificial General Intelligence&#xff09;和ASI&#xff08;Artificial Superintelligence&a…

使用exe4j将jar转成exe、java打包exe

1、maven打包 需要配置以下插件&#xff0c;注意skip为false 插件配置中设置 <skip>true</skip> 时&#xff0c;实际上是告诉 Maven 在构建过程中跳过 spring-boot-maven-plugin 插件的执行。也就是说&#xff0c;Maven 在打包时不会将项目打包成可执行的 JAR 文…

基本算法——分类

目录 创建项目 导入依赖 加载数据 特征选择 学习算法 对新数据分类 评估与预测误差度量 混淆矩阵 通过模型的预测结果生成 ROC 曲线数据 选择分类算法 完整代码 结论 创建项目 首先创建spring boot项目&#xff0c;我这里用的JDK8&#xff0c;springboot2.7.6&…

Debian 系统中解决中文日志乱码问题

在 Debian 系统中&#xff0c;打印中文日志时经常会遇到乱码问题。这通常是因为系统的 locale 设置不正确&#xff0c;或者缺少所需的字体支持。本文将详细介绍如何解决此类问题&#xff0c;以确保你的 Debian 系统能够正确显示和处理中文字符。 一 乱码问题 问题描述当你尝试…