【uni-app】路由

(1)路由配置

uni-app 页面路由全部交给框架统一管理,开发者需要在pages.json里配置每个路由页面的路径及页面样式(类似小程序在 app.json 中配置页面路由)。


"pages": [{"path": "pages/index","style": {"navigationBarTitleText": "路由配置","navigationBarBackgroundColor": "#FFFFFF","navigationBarTextStyle": "black","backgroundColor": "#FFFFFF","enablePullDownRefresh": true}},{"path": "pages/user","style": {"navigationBarTitleText": "路由配置","navigationBarBackgroundColor": "#FFFFFF","navigationBarTextStyle": "black","backgroundColor": "#FFFFFF","enablePullDownRefresh": true}}
]

可以在这里配置底部导航栏:

"tabBar": {"color": "#7A7E83","selectedColor": "#3cc51f","borderStyle": "white","backgroundColor": "#ffffff","list": [{"pagePath": "pages/index/index","iconPath": "static/resource/images/tab_index.png","selectedIconPath": "static/resource/images/tab_index_seled.png","text": "首页"},{"pagePath": "pages/order/index","iconPath": "static/resource/images/tab_pub.png","selectedIconPath": "static/resource/images/tab_pub_seled.png","text": "订单"}, {"pagePath": "pages/user/index","iconPath": "static/resource/images/tab_user.png","selectedIconPath": "static/resource/images/tab_user_seled.png","text": "我的"}]},

当然还可以配置全局样式等等。

(2)路由跳转

uni-app 有两种页面路由跳转方式:使用navigator组件跳转(标签式导航)、调用API跳转(编程式导航)

框架以栈的形式管理当前所有页面, 当发生路由切换的时候,页面栈的表现如下:

路由方式页面栈表现触发时机
初始化新页面入栈uni-app 打开的第一个页面
打开新页面新页面入栈调用 API uni.navigateTo
使用组件 <navigator open-type="navigate" />
页面重定向当前页面出栈,新页面入栈调用 API uni.redirectTo 、
使用组件
页面返回页面不断出栈,直到目标返回页调用 API uni.navigateBack 、
使用组件 、
用户按左上角返回按钮、安卓用户点击物理back按键
Tab 切换页面全部出栈,只留下新的 Tab 页面调用 API uni.switchTab 、
使用组件 、
用户切换 Tab
重加载页面全部出栈,只留下新的页面调用 API uni.reLaunch 、
使用组件

(3)获取当前页面栈

getCurrentPages() 函数用于获取当前页面栈的实例,以数组形式按栈的顺序给出,第一个元素为首页,最后一个元素为当前页面。

注意: getCurrentPages() 仅用于展示页面栈的情况,请勿修改页面栈,以免造成页面状态错误。

(4)路由传参与接收

说明:页面生命周期的 onLoad()监听页面加载,其参数为上个页面传递的数据,如:


//页面跳转并传递参数
uni.navigateTo({url: 'page2?name=liy&message=Hello'
});

url为将要跳转的页面路径 ,路径后可以带参数。参数与路径之间使用?分隔,参数键与参数值用=相连,不同参数用&分隔。如 ‘path?key1=value2&key2=value2’,path为下一个页面的路径,下一个页面的onLoad函数可得到传递的参数。


// 页面 2 接收参数
onLoad: function (option) { //option为object类型,会序列化上个页面传递的参数console.log(option.name); //打印出上个页面传递的参数。console.log(option.message); //打印出上个页面传递的参数。
}

注意:url 有长度限制,太长的字符串会传递失败,并且不规范的字符格式也可能导致传递失败,所以对于复杂参数建议使用 encodeURI、decodeURI 进行处理后传递

(5)小程序路由分包配置

因小程序有体积和资源加载限制,各家小程序平台提供了分包方式,优化小程序的下载和启动速度。

所谓的主包,即放置默认启动页面及 TabBar 页面,而分包则是根据 pages.json 的配置进行划分。

在小程序启动时,默认会下载主包并启动主包内页面,当用户进入分包内某个页面时,会把对应分包自动下载下来,下载完成后再进行展示,此时终端界面会有等待提示。


"subPackages": [{"root": "news","pages": [{"path": "index","style": {"navigationBarTitleText": "新闻中心","navigationBarBackgroundColor": "#FFFFFF","navigationBarTextStyle": "black","backgroundColor": "#FFFFFF"}}]}... 
],
// 预下载分包设置
"preloadRule": {"pages/index": {"network": "all","packages": ["activities"]}
}

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

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

相关文章

蓝桥杯倒计时47天!DFS基础——图的遍历

倒计时47天&#xff01; 深度优先搜索——DFS 温馨提示&#xff1a;学习dfs之前最好先了解一下递归的思想。 DFS基础——图的遍历 仙境诅咒 问题描述 在一片神秘的仙境中&#xff0c;有N位修仙者&#xff0c;他们各自在仙境中独立修炼&#xff0c;拥有自己独特的修炼之道…

websocket在django中的运用

14-2 聊天室实现思路&#xff1a;轮训、长轮训、websocket_哔哩哔哩_bilibili 参考大佬的B站学习笔记 https://www.cnblogs.com/wupeiqi/p/6558766.html 参考博客 https://www.cnblogs.com/wupeiqi/articles/9593858.html 参考博客 http: 是短连接&#xff0c;无状态的&…

探索网络通信的遗产:AppleTalk Data Stream Protocol (ADSP) 的全面解析

ADSP简介 AppleTalk Data Stream Protocol (ADSP) 是AppleTalk网络协议套件的一部分&#xff0c;设计用于在AppleTalk网络中提供端到端的可靠数据流服务。在1980年代和1990年代&#xff0c;AppleTalk是Apple计算机用于局域网通信的主要网络技术。ADSP提供了一种类似于现代TCP协…

conda 导出/导出配置好的虚拟环境

一. 导出环境配置&#xff08;yml文件&#xff09; 1. 在主目录下激活虚拟环境&#xff08;UE4是我的虚拟环境名称&#xff0c;请根据你自己的名称进行修改&#xff09; conda activate UE4 2. 运行此代码 conda env export > environment.yml 二. 导入环境配置&#xf…

创建第一个React项目

React脚手架 npx create-react-app react-demonpx是直接从互联网网上拉最新的脚手架进行创建react 运行React项目 npm start若想找到Webpack配置文件 npm ejectReact的基本使用 基本步骤 导入react和react-dom vue 创建react元素 渲染react元素到页面中导入 import React…

python统计分析——多解释变量的方差分析

参考资料&#xff1a;用python动手学统计学 1、导入库 # 导入库 # 用于数值计算的库 import numpy as np import pandas as pd import scipy as sp from scipy import stats # 用于绘图的库 from matplotlib import pyplot as plt import seaborn as sns sns.set() # 用于估计…

Android 10 音量UI更新解析

1 VolumeUI 的启动 由于VolumeUI 是继承 SystemUI 的&#xff0c;所以它的启动方式和 SystemUI 的启动方式一样。 直接看 VolumeUI 的start()方法 frameworks/base/packages/SystemUI/src/com/android/systemui/volume/VolumeUI.java Override public void start() {boolean …

Linux基础命令—进程管理

基础知识 linux进程管理 什么是进程 开发写代码->代码运行起来->进程 运行起来的程序叫做进程程序与进程区别 1.程序是一个静态的概念,主要是指令集和数据的结合,可以长期存放在操作系统中 2.进程是一个动态的概念,主要是程序的运行状态,进程存在生命周期,生命周期结…

YY调音台:直播主播的体验

我是直播平台的主播&#xff0c;日常工作就是在直播间里打游戏、唱歌、聊天之类的。刚开始的时候我的直播工具只有一台电脑&#xff0c;收音也是用的我自己常用的耳机&#xff0c;设备比较简陋&#xff0c;直播间的用户留存率也不高。但是我相信天道酬勤&#xff0c;每天晚上坚…

javaScript数组去重的几种实现方式——适用非引用数据去重

最传统的使用循环遍历 //最传统的使用循环遍历 function getUnique(arr) {let newArr [];for (let i 0; i < arr.length; i) {for (let j i 1; j < arr.length; j) {if (arr[i] arr[j]) {i; //相同丢掉前面的元素}}newArr.push(arr[i]);}return newArr; } 利用Set实…

Seata分布式事务实战XATCC模式

目录 XA模式 XA 模式的使用 Spring Cloud Alibaba整合Seata XA TCC模式 TCC模式接口改造 TCC如何控制异常 Spring Cloud Alibaba整合Seata TCC XA模式 整体机制 在 Seata 定义的分布式事务框架内&#xff0c;利用事务资源&#xff08;数据库、消息服务等&#xff09;对…

【Python从入门到进阶】49、当当网Scrapy项目实战(二)

接上篇《48、当当网Scrapy项目实战&#xff08;一&#xff09;》 上一篇我们正式开启了一个Scrapy爬虫项目的实战&#xff0c;对当当网进行剖析和抓取。本篇我们继续编写该当当网的项目&#xff0c;讲解刚刚编写的Spider与item之间的关系&#xff0c;以及如何使用item&#xff…

【python】0、超详细介绍:json、http

文章目录 一、json二、http2.1 json 读取 request 序列化 三、基本类型3.1 decimal 四、图像4.1 颜色格式转换 一、json import json f open(data.json) # open json file data json.load(f) # 读出 json object for i in data[emp_details]: # 取出一级属性 emp_details, …

云尚办公-0.3.0

5. controller层 import pers.beiluo.yunshangoffice.model.system.SysRole; import pers.beiluo.yunshangoffice.service.SysRoleService;import java.util.List;//RestController&#xff1a;1.该类是控制器&#xff1b;2.方法返回值会被写进响应报文的报文体&#xff0c;而…

ChatRTX安装教程

介于本人一直想将现有的智慧城市的文档结合大模型RAG实现知识库问答助手&#xff0c;借着Chat With RTX的风潮正好将机器人和知识库合二为一&#xff0c;方便以后对众多文件进行查阅。 一、概要 Chat With RTX 是一个 Demo&#xff0c;用来将您自己的资料&#xff08;文档、笔…

关于硅的制造芯片的过程

芯片是如何制作的&#xff1f; 先将硅融化制成硅晶片&#xff0c;再用光刻机印压电路。 bilibili芯片制作视频 硅晶片作为现代芯片的主要元件&#xff0c;广泛用于集成电路。 首先将多晶硅放入特制的密封炉&#xff0c;排除其中空气后加热到1420摄氏度&#xff0c;将融化的硅放…

第三节:kafka sarama 遇到Bug?

文章目录 前言一、先上结果二、刨根问底总结 前言 前面两节&#xff0c;我们已经简单应用了sarama的两个类型Client和ClusterAdmin&#xff0c;其中有一个案例是获取集群的ControllerId&#xff0c;但是在后面的测试过程过程中&#xff0c;发现一个问题&#xff0c;返回的Cont…

vue菜单栏跳转方案

vue菜单栏跳转方案 <template><div><el-container style"height: 100vh"><el-aside width"200px" style"background-color: #b3c0d1"><el-menuopen"handleOpen"close"handleClose"select"h…

MongoDB聚合运算符:$bitXor

文章目录 语法用法举例 $bitXor聚合运算符返回整数或长整数数组元素按位异或的结果。 语法 { $bitXor: { [ <expression1>, <expression2>, ... ] }用法 如果操作数包括整型和长整型值&#xff0c;MongoDB会对计算出的整数结果进行符号扩展&#xff0c;并返回长…

处理器分支预测(Branch predictor)原理和实现

C++实例 我们先给一个实例,在windows系统下,使用VisualStudio的debug模式,编译和运行程序: #include <algorithm> #include <ctime> #include <iostream>int main(){// Generate dataconst unsigned arraySize = 32768;int data[arraySize];for (unsig…