uniapp踩坑小伎俩记录

1. 页面路径和文件名大小写问题

// 假设你有一个页面路径是 '/pages/Home/index'
this.$router.push('/pages/home/index'); // 小写的 'home' 会导致找不到页面

2. 小程序平台差异

// 微信小程序中使用
uni.getSystemInfo({success: (res) => {console.log(res);}
});
// 支付宝小程序中使用
if (uni.getSystemInfoSync().platform === 'devtools') {// 特殊处理支付宝小程序
}

3.uniapp跨页面传值

  • 使用 URL 参数传值
  • 使用全局状态管理(Vuex)
  • 全局对象传值
  • 本地存储传值
  • 使用事件总线(Event Bus)
  1. 使用 URL 参数传值
uni.navigateTo({url: '/pages/detail/detail?id=123&name=Alice'
});
//接受页面
onLoad(options) {const { id, name } = options;console.log(id, name); // 输出: 123 'Alice'
}

2. 全局对象传值 ( 可以使用全局对象 getApp() 或全局变量。 )

const app = getApp();
app.globalData.userInfo = { id: 123, name: ‘Alice’ };

uni.navigateTo({
url: ‘/pages/detail/detail’
});
// 接受页
 

onLoad() {
const app = getApp();
const userInfo = app.globalData.userInfo;
console.log(userInfo); // 输出: { id: 123, name: ‘Alice’ }
}

3. 本地存储传值 ( 适用于需要跨页面、甚至跨应用会话的数据传递。 )

uni.setStorageSync('userInfo', { id: 123, name: 'Alice' });uni.navigateTo({url: '/pages/detail/detail'
});
//接受页面
onLoad() {const userInfo = uni.getStorageSync('userInfo');console.log(userInfo); // 输出: { id: 123, name: 'Alice' }
}

3. bus传值

// eventBus.jsimport Vue from 'vue';export default new Vue();**传值页面:**```javascriptimport eventBus from '@/eventBus';eventBus.$emit('sendUserInfo', { id: 123, name: 'Alice' });uni.navigateTo({url: '/pages/detail/detail'});```**接收值页面:**```javascriptimport eventBus from '@/eventBus';onLoad() {eventBus.$on('sendUserInfo', (userInfo) => {console.log(userInfo); // 输出: { id: 123, name: 'Alice' }});}

uniapp跳转的几种方式

  1. uni.navigateTo:保留当前页面,跳转到应用内的某个页面,使用 `uni.navigateBack` 可以返回到原页面。 “`javascript uni.navigateTo({ url: ‘/pages/detail/detail?id=123&name=Alice’ });

2. uni.redirectTo:关闭当前页面,跳转到应用内的某个页面。 “`javascript uni.redirectTo({ url: ‘/pages/detail/detail?id=123&name=Alice’ });

3. uni.switchTab:跳转到 `tabBar` 页面,并关闭其他所有非 tabBar页面。 uni.switchTab({ url: '/pages/tabbar/index' });

4. uni.reLaunch:关闭所有页面,打开到应用内的某个页面。 javascript uni.reLaunch({ url: ‘/pages/detail/detail?id=123&name=Alice’ });

5. uni.navigateBack:关闭当前页面,返回上一页面或多级页面。 `javascript uni.navigateBack({ delta: 1 // 返回一级页面 }); `

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

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

相关文章

原创音乐小程序的设计

管理员账户功能包括:系统首页,个人中心,用户管理,歌曲类型管理,歌曲信息管理,热门歌手管理,音乐资讯管理,系统管理 微信端账号功能包括:系统首页,歌曲信息&a…

数学建模·Topsis优劣解距离法

Topsis优劣解 一种新的评价方法,特点就是利用原有数据,客观性强。 相较于模糊评价和层次评价 更加客观,充分利用原有数据,精确反映方案差距 基本原理 离最优解最近,离最劣解越远 具体步骤 正向化 代码与原理与熵权…

链接追踪系列-08.mac m1安装logstash-番外

下载地址:https://elasticsearch.cn/download/ 配置es相关: #安装plugin: jelexbogon bin % ./logstash-plugin install logstash-codec-json_lines启动:指定配置文件运行 jelexbogon bin % nohup ./logstash -f ../config…

SSM学习7:SpringMVC简介、SpringMVC入门案例、SpringMVC bean加载控制

SpringMVC简介 Spring MVC 是 Spring 框架的一部分,它是一个用于构建 Web 应用程序的模型-视图-控制器(Model-View-Controller,MVC)框架。Spring MVC 提供了一种清晰的方式来分离业务逻辑、用户界面和控制流程,使得应…

leetcode 513. 找树左下角的值

给定一个二叉树的 根节点 root&#xff0c;请找出该二叉树的 最底层 最左边 节点的值。 假设二叉树中至少有一个节点。 示例 1: 输入: root [2,1,3] 输出: 1示例 2: 输入: [1,2,3,4,null,5,6,null,null,7] 输出: 7提示: 二叉树的节点个数的范围是 [1,104]-231 < Node.val &…

Go语言指针及不支持语法汇总

本文为Go语言中指针定义和示例及不支持语法汇总。 目录 指针 定义指针 关键字new定义 函数返回指针 空指针 Go不支持语法汇总 总结 指针 Go语言也有指针&#xff0c;结构体成员调用时&#xff0c;obj.name Go语言在使用指针时&#xff0c;会使用内容的垃圾回收机制&am…

线程池操作数据库存在线程安全问题

目录 1、前言 2、问题 3、解决方法 3.1、方法一&#xff1a;数据库约束 3.2、方法二&#xff1a;使用锁进行线程的约束 4、总结 1、前言 当前需求为&#xff1a;处理数据&#xff0c;将数据存储到数据库中&#xff0c;在存储的过程中&#xff0c;会先查询该数据是否已经存…

Hadoop数仓中常用端口详解:(第36天)

前言 在数仓&#xff08;数据仓库&#xff09;开发中&#xff0c;不同的组件和服务会使用不同的端口号进行通信。由于数仓的实现可能依赖于多种技术和框架&#xff08;如Hadoop、Hive、HBase、Spark等&#xff09;&#xff0c;因此涉及的端口号也会有所不同。以下是一些数仓开…

node.js的安装及学习(node/nvm/npm的区别)

一、什么是node、nvm和npm 1.Node.js node.js 一种Javascript编程语言的运行环境&#xff0c;能够使得javascript能够脱离浏览器运行。以前js只能在浏览器&#xff08;也就是客户端&#xff09;上运行&#xff0c;node.js将浏览器中的javascript运行环境进行封装的&#xff0c;…

张雪峰高考志愿填报

描述 张雪峰&#xff0c;一个富有才华的老师&#xff01; 对于大家的学习有不可多得的帮助。 内容 目前主要的内容以自愿填报为主&#xff0c;对于学习自愿填报有比较大的帮助&#xff01; 但是网络上面错综复杂&#xff0c;很多老旧的版本影响学习&#xff01; 而这里我整…

vue3 快速入门 (一) : 环境配置与搭建

1. 本文环境 Vue版本 : 3.4.29Node.js版本 : v20.15.0系统 : Windows11 64位IDE : VsCode 2. 安装Node.Js 首先&#xff0c;我们需要安装Node.Js。Node.js提供了运行 JavaScript 代码的环境。并且Node.js 带来了 npm&#xff0c;它是JavaScript世界的包管理工具。开发vue时&…

使用Copilot 高效开发繁忙的一天

在现代软件开发的世界里&#xff0c;使用AI工具如GitHub Copilot可以显著提高开发效率。 早晨&#xff1a;规划与启动 7:00 AM - 起床与准备 开发者早早起床&#xff0c;享用健康的早餐&#xff0c;并浏览新闻和技术博客&#xff0c;了解最新的科技动态。快速整理思路&#x…

设计模式使用场景实现示例及优缺点(行为型模式——责任链模式)

责任链模式&#xff08;Chain of Responsibility Pattern&#xff09; 责任链模式是一种行为设计模式&#xff0c;允许对象将请求沿着处理器链传递&#xff0c;直到一个处理器决定处理该请求为止。这种模式的核心在于解耦发送者和接收者之间的关系&#xff0c;通过多个对象共同…

MICS2024|少样本学习、多模态技术以及大语言模型在医学图像处理领域的研究进展|24-07-14

小罗碎碎念 本期推文主题 今天的会议很多主题都集中在大模型、多模态这两个方面&#xff0c;很明显&#xff0c;这两个方向都是目前的研究热点。 所以&#xff0c;我这一期推文会先简单的分析一下秦文健&#xff08;中科院&#xff09;和史淼晶&#xff08;同济大学&#xff09…

解释方法重载和方法重写的区别。然后,给出一个简单的递归方法实例。

方法重载&#xff08;Overloading&#xff09;与方法重写&#xff08;Overriding&#xff09;的区别 在Java编程中&#xff0c;方法重载和方法重写是两个非常重要的概念&#xff0c;它们分别体现了面向对象编程中的多态性&#xff08;Polymorphism&#xff09;的不同方面&…

【STM32开发笔记】搭建VSCode+PyOCD的STM32开发环境

【STM32开发笔记】搭建VSCodePyOCD的STM32开发环境 一、安装软件1.1 安装STM32CubeMX1.2 安装VSCode1.3 安装Arm GNU Toolchain1.4 安装Make for Windows1.5 安装Python1.6 安装PyOCD 二、安装插件2.1 VSCode插件2.2 PyOCD支持包 三、创建项目3.1 创建STM32CubeMX项目3.2 查阅原…

Spring常见问题一:IOC和DI

IOC和DI IOC和DI之间到底是什么关系&#xff1f; 什么是依赖关系&#xff1f;依赖关系会带来什么问题&#xff1f;Spring是怎么来支持依赖注入的&#xff1f; 引言 在现代软件开发中&#xff0c;面向对象编程&#xff08;OOP&#xff09;已经成为主流编程范式。然而&#xff0…

口袋算法的示例

原理 口袋算法是感知器(Perceptron)算法的一种改进。感知器算法是一种线性分类算法,但在训练数据不是线性可分的情况下,它可能无法收敛,即无法找到一个线性分类器来正确分类所有的训练样本。为了解决这个问题,口袋算法引入了一个"口袋"(Pocket),用来存储迄…

java.io.RandomAccessFile 介绍

java.io.RandomAccessFile 是 Java 标准库中提供的一个类&#xff0c;允许对文件进行随机访问读写操作。与 FileInputStream 和 FileOutputStream 不同&#xff0c;RandomAccessFile 可以读取和写入同一个文件&#xff0c;并且可以在文件的任意位置进行读写操作。它既可以作为输…

【Java】字符与字符串

文章目录 1.字符char1.1 编码1.2 转义字符1.3 char的类型转换1.4 字符的比较1.5 Character类 2.String类型2.1 String对象常用的方法&#xff1a;2.2 从控制台读取字符串2.3 从控制台读取字符2.4 字符串的比较2.5 子串和字符2.6 字符串的转化2.7 格式化控制台输出 1.字符char …