uniapp中的路由、本地存储与网络请求

navigator

在UniApp中，navigator 组件用于页面跳转和应用内导航。

基本使用

  • 属性：
    • url: 需要跳转的目标页面路径，路径可以是相对路径或绝对路径。
    • open-type: 跳转的方式，默认为 navigateTo。其他可选值包括：redirectTo, switchTab, reLaunch, navigateBack。

open-type

  1. navigateTo: 推入目标页面到栈顶，即打开新页面（默认）。

    • 示例: <navigator url="/pages/index/index" open-type="navigate-to">跳转到首页</navigator>

  2. redirectTo: 关闭当前页面，跳转到应用内的某个页面。

    • 示例: <navigator url="/pages/index/index" open-type="redirect-to">重定向到首页</navigator>

  3. switchTab: 跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面。

    • 示例: <navigator url="/pages/tabBarPagePath" open-type="switch-tab">切换到tabBar页面</navigator>

  4. reLaunch: 关闭所有页面，打开到应用内的某个页面。

    • 示例: <navigator url="/pages/reLaunchPagePath" open-type="reLaunch">重启并跳转到指定页面</navigator>

  5. navigateBack: 返回上一页面或多级页面。

    • 可以通过 delta 属性指定返回的层级，默认为1。
    • 示例: <navigator open-type="navigate-back" delta="2">返回上两级</navigator>

注意事项

  • 使用 navigator 时，确保目标页面已经在 pages.json 中注册。
  • 当使用 switchTab 作为 open-type 时，url 参数需要是一个已经定义在 tabBar 列表中的路径。
  • 在小程序环境中，页面栈的最大深度是有限制的（通常是10层），超过限制后无法继续使用 navigateTo 进行跳转。

事件

  • tap: 点击事件，可以用来处理点击跳转前的逻辑。
  • success: 成功后的回调函数。
  • fail: 失败后的回调函数。
  • complete: 不管成功或失败都会执行的回调函数。
1. uni.setStorage(OBJECT)

将数据存储到本地缓存中指定的key中，会覆盖掉原来该key对应的内容，这是一个异步接口。

  • 参数:
    • key: String 类型，必填，指定存储的键。
    • data: Any 类型，必填，需要存储的数据，只支持原生类型及能够通过JSON.stringify序列化的对象。
    • success: Function 类型，选填，接口调用成功的回调函数。
    • fail: Function 类型，选填，接口调用失败的回调函数。
    • complete: Function 类型，选填，接口调用结束的回调函数（无论成功或失败都会执行）。
uni.setStorage({key: 'storage_key',data: 'hello',success: function () {console.log('success');}
});

注意：避免使用以uni-、uni_、dcloud-、dcloud_为前缀的key，这些是系统保留的关键字。

同步版本为uni.setStorageSync(KEY, DATA)。

2. uni.getStorage(OBJECT)

从本地缓存中异步获取指定key对应的内容。

  • 参数:
    • key: String 类型，必填，指定要获取的键。
    • success: Function 类型，必填，接口调用成功的回调函数，返回值包含data字段。
    • fail: Function 类型，选填，接口调用失败的回调函数。
    • complete: Function 类型，选填，接口调用结束的回调函数。
uni.getStorage({key: 'storage_key',success: function (res) {console.log(res.data);}
});

同步版本为uni.getStorageSync(KEY)。

3. uni.getStorageInfo(OBJECT)

异步获取当前storage的相关信息，包括所有key、当前占用空间大小以及限制的空间大小。

  • 参数:
    • success: Function 类型，必填，接口调用成功的回调函数，返回值包含keys、currentSize和limitSize字段。
    • fail: Function 类型，选填，接口调用失败的回调函数。
    • complete: Function 类型，选填，接口调用结束的回调函数。
uni.getStorageInfo({success: function (res) {console.log(res.keys);console.log(res.currentSize);console.log(res.limitSize);}
});

同步版本为uni.getStorageInfoSync()。

4. uni.removeStorage(OBJECT)

从本地缓存中异步移除指定key的数据。

  • 参数:
    • key: String 类型，必填，指定要移除的键。
    • success: Function 类型，必填，接口调用成功的回调函数。
    • fail: Function 类型，选填，接口调用失败的回调函数。
    • complete: Function 类型，选填，接口调用结束的回调函数。
uni.removeStorage({key: 'storage_key',success: function (res) {console.log('success');}
});

同步版本为uni.removeStorageSync(KEY)。

5. 清理本地数据缓存
  • 异步清理：uni.clearStorage()
  • 同步清理：uni.clearStorageSync()

网络请求

在UniApp中进行网络请求是一个核心的功能，它允许开发者与服务器进行数据交互。UniApp提供了多种方式进行网络请求，主要包括uni.request、uni.uploadFile和uni.downloadFile等方法。

1. 使用 uni.request 发起网络请求

uni.request 是 UniApp 提供的一个用于发起 HTTP 请求的方法，支持 GET、POST 等常见的 HTTP 方法。该方法可以配置请求头、请求参数，并处理响应数据。

uni.request({url: '请求URL', // 必填，请求的URL地址method: 'GET', // 可选，默认为GETheader: {'content-type': 'application/json' // 默认值},data: {// 请求的数据},success: function(res) {console.log('请求成功', res.data);},fail: function(err) {console.error('请求失败', err);}
});
  • url: 开发者服务器接口地址。
  • data: 请求的参数。对于GET方法，会转换成query string；对于POST方法且header[‘content-type’]为application/json的数据，会进行JSON序列化。
  • header: 设置请求头信息，例如设置Content-Type来指定请求体格式。
  • method: 支持包括GET、POST在内的常见HTTP方法。不同平台对某些方法的支持可能有所不同，请参照官方文档。
  • timeout: 超时时间，单位ms。H5端需要HBuilderX 2.9.9+版本支持。
  • success: 请求成功的回调函数，包含返回的数据、状态码及响应头等信息。
  • fail: 请求失败的回调函数，提供错误代码、消息等信息。

2. 文件上传：使用 uni.uploadFile

当需要上传文件时，可以使用 uni.uploadFile 方法。它可以用来上传图片、音频等多媒体文件。

uni.uploadFile({url: '上传URL',filePath: '要上传的文件路径',name: '上传文件对应的key',formData: {'user': 'test'},success: function(res) {console.log('上传成功', res.data);}
});

3. 文件下载：使用 uni.downloadFile

对于需要从服务器下载文件的情况，可以使用 uni.downloadFile 方法。

uni.downloadFile({url: '下载URL',success: function(res) {if (res.statusCode === 200) {console.log('下载成功');}}
});

4. 封装网络请求

为了简化代码和提高复用性，通常会对网络请求进行封装。例如，可以创建一个 request.js 文件来统一管理所有的网络请求逻辑。

export const request = (options) => {return new Promise((resolve, reject) => {uni.request({...options,success: resolve,fail: reject});});
};

然后，在页面中可以通过这种方式调用：

import { request } from '@/utils/request.js';async function fetchData() {try {const response = await request({url: '/api/data',method: 'GET'});console.log(response);} catch (error) {console.error(error);}
}

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

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

相关文章

python3使用lxml解析xml时踩坑记录

python3使用lxml解析xml时踩坑记录

文章目录 你的 XML 数据解析 XML----------------------------1. 获取 mlt 根元素的属性--------------------------------------------------------2. 获取 chain 元素的属性--------------------------------------------------------3. 获取所有 property 的值-------------…
阅读更多...
【DeepSeek 学c++】dynamic_cast 原理

【DeepSeek 学c++】dynamic_cast 原理

用于向下转化。 父类引用指向指类对象 假设父亲是a, 子类是b. B* pb new B; 子类对象 A* pa 父类引用指向子类对象&#xff0c; 那么向上转化 Apa pb 这个是自动完成的&#xff0c;隐式转化&#xff0c;不需要dynamic_cast 向下转化指的是 A pa new B。 这个是指向子类对象…
阅读更多...
c++ 数组索引越界检查

c++ 数组索引越界检查

用 c 编写了一些程序&#xff0c;发现 c 不会自动检查数组的索引越界问题。有时候程序运行错误&#xff0c;提示的错误信息莫名其妙&#xff0c;但很可能是某个数组越界的问题。 例如&#xff1a; #include <iostream>int main() {double arr[5] {1.1, 2.2, 3.3, 4.4,…
阅读更多...
Touch Diver:Weart为XR和机器人遥操作专属设计的触觉反馈动捕手套

Touch Diver:Weart为XR和机器人遥操作专属设计的触觉反馈动捕手套

在虚拟现实&#xff08;VR&#xff09;和扩展现实&#xff08;XR&#xff09;领域&#xff0c;触觉反馈技术正逐渐成为提升沉浸感和交互体验的重要因素。Weart作为这一领域的创新者&#xff0c;凭借其TouchDIVER Pro和TouchDIVER G1触觉手套&#xff0c;为用户带来了高度逼真的…
阅读更多...
基于deepseek的智能语音客服【第二讲】后端异步接口调用封装

基于deepseek的智能语音客服【第二讲】后端异步接口调用封装

本篇内容主要讲前端请求&#xff08;不包含&#xff09;访问后端服务接口&#xff0c;接口通过检索知识库&#xff0c;封装提示词&#xff0c;调用deepseek的&#xff0c;并返回给前端的全过程&#xff0c;非完整代码&#xff0c;不可直接运行。 1.基于servlet封装异步请求 为…
阅读更多...
归并排序的思路与实现

归并排序的思路与实现

归并排序主要是两大模块 分治 和 合并 即将已有序的子序列合并&#xff0c;得到完全有序的序列&#xff1b;即先使每个子序列有序&#xff0c;再使子序列段间有序。若将两个有序表合并成一个有序表&#xff0c;称为二路归并 由于使用了新的数组 那么空间复杂度就为O(n) 但这…
阅读更多...
Word中公式自动标号带章节编号

Word中公式自动标号带章节编号

&#xff08;1&#xff09;插入一行三列的表格&#xff0c;设置宽度分别为0.5&#xff0c;13.39和1.5&#xff0c;设置纵向居中&#xff0c;中间列居中对齐&#xff0c;最右侧列靠右对齐&#xff0c;设置段落如下 &#xff08;2&#xff09;插入域代码 【Word】利用域代码快速实…
阅读更多...
阿里云服务器环境部署 四 MySQL主从配置

阿里云服务器环境部署 四 MySQL主从配置

安装MySQL 导入mysql镜像 docker load -i /opt/dockerinstall/mysql/mysql-8.1.0.tar docker run --privilegedtrue --name mysql8 --restartunless-stopped -e MYSQL_ROOT_PASSWORD123456 -p 3306:3306 -v /usr/local/mysql/logs:/var/log/mysql -v /usr/local/mysql/d…
阅读更多...
[RH342]iscsi配置与排错

[RH342]iscsi配置与排错

[RH342]iscsi配置与排错 1. 服务端配置1.1 安装targetcli1.2 准备磁盘1.3 服务端配置1.4 防火墙配置 2. 客户端配置2.1 安装客户端软件2.2 配置客户端2.3 连接登录服务端2.4 挂载使用 3. 安全验证扩展3.1 服务端3.2 客户端 4. 常见的排错点4.1 服务端常见错误4.2 客户端常见错误…
阅读更多...
服装零售行业数字化时代的业务与IT转型规划P111（111页PPT）（文末有下载方式）

服装零售行业数字化时代的业务与IT转型规划P111（111页PPT）（文末有下载方式）

服装零售行业数字化时代的业务与IT转型规划P111 详细资料请看本解读文章的最后内容。 随着数字化技术的迅猛发展&#xff0c;服装零售行业正经历着前所未有的变革。本文将对《服装零售行业数字化时代的业务与IT转型规划P111》进行详细解读&#xff0c;探讨未来几年内该行业的…
阅读更多...
基于javaweb的SSM+Maven宠物领养宠物商城流浪动物管理系统与实现(源码+文档+部署讲解）

基于javaweb的SSM+Maven宠物领养宠物商城流浪动物管理系统与实现(源码+文档+部署讲解）

技术范围&#xff1a;SpringBoot、Vue、SSM、HLMT、Jsp、PHP、Nodejs、Python、爬虫、数据可视化、小程序、安卓app、大数据、物联网、机器学习等设计与开发。 主要内容&#xff1a;免费功能设计、开题报告、任务书、中期检查PPT、系统功能实现、代码编写、论文编写和辅导、论…
阅读更多...
PostgreSQL 数据库中导入大量数据

PostgreSQL 数据库中导入大量数据

在 PostgreSQL 数据库中导入大量数据，可根据数据来源和格式选择不同的方法。以下为你详细介绍几种常见的方式： 1. 使用 COPY 命令（适用于本地数据文件） COPY 命令是 PostgreSQL 内置的高效数据导入工具，适合处理本地的数据文件。 步骤 准备数据文件 确保你的数据文件格…
阅读更多...
C++语法之命名空间二

C++语法之命名空间二

A.h头文件中代码&#xff1a; namespace a {void 输出(); }; A.cpp源文件中代码&#xff1a; #include <iostream> #include "A.h" void a::输出() {std::cout << "A.h里的输出函数" << std::endl; } B.h头文件中代码&#xff1a; …
阅读更多...
基于FPGA的DDS连续FFT 仿真验证

基于FPGA的DDS连续FFT 仿真验证

基于FPGA的 DDS连续FFT 仿真验证 1 摘要 本文聚焦 AMD LogiCORE IP Fast Fourier Transform (FFT) 核心，深入剖析其在 FPGA 设计中的应用。该 FFT 核心基于 Cooley - Tukey 算法，具备丰富特性，如支持多种数据精度、算术类型及灵活的运行时配置。文中详细介绍了其架构选项、…
阅读更多...
美团Leaf分布式ID生成器使用教程：号段模式与Snowflake模式详解

美团Leaf分布式ID生成器使用教程：号段模式与Snowflake模式详解

引言 在分布式系统中&#xff0c;生成全局唯一ID是核心需求之一。美团开源的Leaf提供了两种分布式ID生成方案&#xff1a;号段模式&#xff08;高可用、依赖数据库&#xff09;和Snowflake模式&#xff08;高性能、去中心化&#xff09;。本文将手把手教你如何配置和使用这两种…
阅读更多...
Swift 并发任务的协作式取消

Swift 并发任务的协作式取消

在 Swift 并发&#xff08;Swift Concurrency&#xff09;中&#xff0c;任务&#xff08;Task&#xff09;不会被强行终止&#xff0c;而是采用**协作式取消&#xff08;cooperative cancellation&#xff09;**机制。这意味着任务会被标记为“已取消”&#xff0c;但是否真正…
阅读更多...
大数据（1.1）纽约出租车大数据分析实战：从Hadoop到Azkaban的全链路解析与优化

大数据（1.1）纽约出租车大数据分析实战：从Hadoop到Azkaban的全链路解析与优化

目录 一、背景与数据价值‌ ‌二、技术选型与组件分工‌ ‌三、数据准备与预处理‌ 四、实战步骤详解‌ ‌1. 数据上传至HDFS ‌2. Hive数据建模与清洗‌ 4‌.2.1 建表语句&#xff08;分区表按年份&#xff09;‌&#xff1a; ‌4‌.2.2 数据清洗&#xff08;剔除无效…
阅读更多...
代码随想录刷题day50|（回溯算法篇）131.分割回文串▲

代码随想录刷题day50|（回溯算法篇）131.分割回文串▲

目录 一、回溯算法基础知识 二、分割回文串思路 2.1 如何切割 2.2 判断回文 2.3 回溯三部曲 2.4 其他问题 三、相关算法题目 四、总结 一、回溯算法基础知识 详见&#xff1a;代码随想录刷题day46|&#xff08;回溯算法篇&#xff09;77.组合-CSDN博客 二、分割回文…
阅读更多...
VS Code PowerShell、Windows PowerShell、CMD 的区别与联系

VS Code PowerShell、Windows PowerShell、CMD 的区别与联系

VS Code PowerShell、Windows PowerShell、CMD 的区别与联系? VS Code PowerShell、Windows PowerShell、CMD 的区别与联系&#xff1a; 一、核心概念对比 名称 全称 类型 定位 VS Code PowerShell Visual Studio Code PowerShell 代码编辑器集成终端 开发/脚本编写…
阅读更多...
关于Unity的CanvasRenderer报错

关于Unity的CanvasRenderer报错

MissingReferenceException: The object of type ‘CanvasRenderer’ has been destroyed but you are still trying to access it. Your script should either check if it is null or you should not destroy the object. UnityEngine.UI.GraphicRaycaster.Raycast (UnityEng…
阅读更多...
最新文章

Copyright @ 2022~2023