微信小程序路由跳转,API调用,页面传值

news2025/1/8 4:02:34

路由跳转

  1. wx.switchTab

跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面。

wx.switchTab({
	url: '/pages/tarbar/index'
})
  1. wx.reLaunch

关闭所有页面,打开到应用内的某个页面。

wx.reLaunch({
	url: '/pages/index/index'
})
  1. wx.redirectTo

关闭当前页面,跳转到应用内的某个页面。但是不能跳转到 tabbar 页面。

wx.redirectTo({
	url: '/pages/index/index'
})
  1. wx.navigateTo

保留当前页面,跳转到应用内的某个页面。但是不能跳到 tabbar 页面。小程序的页面栈最多只能存储10个页面。

wx.navigateTo({
	url: '/pages/index/index'
})
  1. wx.navigateBack

关闭当前页面,返回上一页面或多级页面。使用delta参数确定返回的页数,默认为1,若delta大于现有页面数,则返回至首页。

// 此处是A界面,前往B界面
wx.navigateTo({
	url: '/pages/B/B'
}

// 此处是B界面,前往C界面
wx.navigateTo({
	url: '/pages/C/C'
})

// 此处是C界面,返回到A界面
wx.navigateBack({
	delta: 2
})

API调用

微信小程序默认已经封装了相关的请求方法,在使用微信开发工具时,在微信开发工具右上角的详情,本地设置中设置不检验合法域名…即可使用开发工具进行调试调用。
** 注:在提交代码至微信小程序平台后,若要调用服务器接口,则需配置https,微信小程序不支持http请求**

请添加图片描述

微信小程序通过 wx.request() 方法调用服务器接口,通过指定 url 指定接口,通过 method 指定调用方法。

GET请求

GET请求一般使用头参法传递数据,GET请求相对POST请求速度较快,但是安全性不高,凡是设计用户隐私的数据,都不能使用GET请求。

bindTestGet() {
	// 为确保this指向不发生改变,可以固定下this指向
	// 使用this的时候用that代替即可
	var that = this;
	wx.request({
		// 注意,如果小程序开启校验合法域名时必须使用https协议
		// 在测试的情况下可以不开启域名校验
		url: 'http://127.0.0.1:4523/mock/370607/testGet?id=1',

		// 请求的方法
		// 常用方法'GET','POST','PUT','DELETE'
		method: 'GET', 
		// 设置请求头,不能设置 Referer
		header: {
			// 默认值
			'content-type': 'application/json' 
		},
		// 请求成功时的处理
		success: function (res) {
		// 一般在这一打印下看看是否拿到数据
			console.log("testGet");
			console.log(res.data);
			if (res.statusCode == 200) {
				var array = res.data;
				that.setData({
				// 将res.data保存在listDate方便我们去循环遍历
					listDate: res.data
				// 统计所有数据
				});
			};
		},
		// 请求失败时的一些处理
		fail: function () {
			wx.showToast({
				icon: "none",
				mask: true,
				title: "接口调用失败,请稍后再试。",
			});
		}
	});
}

POST请求

POST请求一般使用Body传参法,Body请求速度相对GET请求相对较慢,但是POST请求胜在隐私性高,可传递数据量大。

bindTestPost() {
	var that = this;
	wx.request({
      		url: 'http://127.0.0.1:4523/mock/370607/testPost',
      		data: {
        		param: '1',
      		},
	      	method: 'POST', 
      		header: {
    			'content-type': 'application/json'
		},
      		success: function (res) {
        		console.log("testPost");
		        console.log(res.data);
        		if (res.statusCode == 200) {
				var array = res.data;
          			that.setData({
            				listDate: res.data
	          		});
        		}
	      	},
      		fail: function () {
      			wx.showToast({
            			icon: "none",
	            		mask: true,
        	  		title: "接口调用失败,请稍后再试。",
         		});
      		}
   	});
  }

其他场景API调用方法如’PUT’,'DELETE’本质是’POST’请求的延伸,‘PUT’请求和’DELETE’请求使用方法同’POST’,只需修改method中的方法即可。


页面传参

  1. 通过微信小程序组件的公有属性data-[key]="value"的形式,可以从wxml文件中向js文件中传值;
  2. 在同一个标签中,需要向js文件中传递多个值的时候,可以使用多个data-[key]="value"的形式传值;
  3. 在js文件中,通过[res].currentTarget.dataset.key[res].currentTarget.dataset[key]的形式,获取从wxml中传递到js文件的值;
  4. 在页面跳转时,使用头参法向要跳转的页面进行传值;
  5. 在js的文件的onLoad生命周期函数中,通过[res].[key]的形式获取从父页面传递的参数。
  6. 在使用**data-[key]="value"**的形式传参时,[key]中不能出现大写字母,不然js文件中识别不到相关的key,这里建议使用下划线命名法进行key的命名

示例:
wxml文件中:

<view bindtap="goChild" data-id="{{item.id}}" data-key="1">

父js文件中获取wxml文件传递的值:

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

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

相关文章

13服务端实战:初始化项目

本章开始将进行服务端的实战开发&#xff0c;包含了 Devops、服务端以及其他涉及到的中间件的模块。 由于 NestJS 的文档非常完善以及之前有写过比较完整的 NestJS 的小册&#xff0c;如果对 NestJS 非常熟悉的同学可以快速跳过本章&#xff0c;另外整个实战篇的代码都会按照流…

shell命令以及运行原理、Linux权限、粘滞位

今天我带来Linux重点知识&#xff1a;shell命令以及运行原理、Linux权限、粘滞位的知识点。 目录 shell命令以及运行原理Linux权限的概念Linux下的用户su命令 Linux权限管理文件访问者的分类文件的类型和访问权限文件权限值的表达方法 Linux关于权限的知识点补充1.Linux创建用户…

Unity3d C#使用XCharts数据显示格式说明(如:数据类型、数据显示为百分比%等)

前言 XCharts是开源且比较强大的插件&#xff0c;在Unity3d中搭建UI时常常使用的数据图表的制作插件&#xff0c; 特别是当下的数字沙盘、数字孪生等项目中应用较广。笔者公司也一直在使用该插件&#xff0c;本文主要是在开发过程中的一个小需求引发的整理分享。在项目中需要将…

vue2 若依项目,使用plotly.js-dist图表库,将数据图表一键导出为图片

此代码适用的场景是一个页面有多个数据图表。 首先需要拿到你生成数据图表的数据&#xff0c; 然后赋值给一个数组&#xff0c;数组需要在data定义&#xff0c;还需要去重。 // 检查是否有相同的parameter值const hasDuplicate this.toImageArr.some(iiem > iiem.paramete…

由于找不到xinput1_3.dll,无法继续执行代码的解决方法都有哪些?

关于由于找不到xinput1_3.dll,无法继续执行代码这个问题&#xff0c;其实在网上经常看别人提及&#xff0c;要解决这个问题&#xff0c;还是不难的&#xff0c;今天小编就来给大家详细的说说关于这个问题的解决方法吧&#xff0c;本文会介绍多种的修复方法&#xff0c;下面一起…

商品数据封装接口(PHP/Java/Python)

封装 在面向对象程式设计方法中&#xff0c;封装是指—种将抽象性函式接口的实现细节部分包装、隐藏起来的方法 封装可以被认为是一个保护屏障&#xff0c;防止该类的代码和数据被外部类定义的代码随机访问 要访问该类的代码和数据&#xff0c;必须通过严格的接口控制 封装最…

提升生产效率的关键:如何选择适合您企业的设备管理系统?

在现代工业生产中&#xff0c;设备管理对于提升生产效率和降低成本至关重要。一个高效的设备管理系统可以帮助企业实现设备的有效监控、维护和优化&#xff0c;从而提高设备的可靠性、降低停机时间&#xff0c;并最终提升生产效率。选择适合企业的设备管理系统可能是一个复杂的…

Vision Pro:多人XR协作这样玩才对味

早在iOS 15系统更新中&#xff0c;苹果就推出了SharePlay功能&#xff0c;该功能主要针对多人协作和社交&#xff0c;允许用户在FaceTime会话中一起看剧、听歌、共享屏幕。Vision Pro头显也支持该功能&#xff0c;允许用户共享AR图像和空间上下文信息&#xff0c;实现远程可视化…

LeetCode 每日一题——2178. 拆分成最多数目的正偶数之和

1.题目描述 2178. 拆分成最多数目的正偶数之和 给你一个整数 finalSum 。请你将它拆分成若干个 互不相同 的正偶数之和&#xff0c;且拆分出来的正偶数数目 最多 。 比方说&#xff0c;给你 finalSum 12 &#xff0c;那么这些拆分是 符合要求 的&#xff08;互不相同的正偶…

Spring Boot 中的服务发现

Spring Boot 中的服务发现 Spring Boot 是一个非常流行的 Java Web 开发框架&#xff0c;它提供了很多工具和组件来简化 Web 应用程序的开发。其中&#xff0c;服务发现是 Spring Boot 中的一个非常重要的组件&#xff0c;它可以帮助我们自动地发现和管理应用程序中的服务。 什…

Prometheus 时序数据

一 时序索引 Prometheus 存储的是时序数据&#xff0c;时间戳&#xff08;timestamp&#xff09;来源于服务端本地的系 统时间。Prometheus 使用 Unix 时间戳&#xff08;即自 1970 年 1 月 1 日 00:00:00 UTC 起经过的秒数&#xff09;表示时间。 数 据 格 式 &#xff1a; …

C#核心知识回顾——10.List、Dictionary、数据结构、LinkedList

1.List List<int> list new List<int>(); List<String> strings new List<String>();//增list.Add(0);list.Add(1);List<int> ints new List<int>();ints.Add(0);list.AddRange(ints);//插入list.Insert(0, 1);// 位置0插入1//删//1.移…

Java内存模型—工作流程、volatile原理

导入 最近在做项目的时候发现很多业务上用到了多线程&#xff0c;通过多线程去提升程序的一个运行效率&#xff0c;借此机会来复盘一下关于并发编程的相关内容。为什么要使用volatile&#xff1f;volatile底层原理是什么&#xff1f;JMM内存模型解决的是什么问题&#xff1f;带…

基于 OpenCV 开发实现眨眼计数器

文末提供免费的源代码下载链接 在本教程中,我们将了解如何使用 Dlib、Python 和 OpenCV 创建眨眼检测器/计数器。 我们将首先使用 Dlib 的人脸检测器来检测视频中的人脸。然后我们将使用 Dlib 中的形状预测器来确定眼睛在面部的位置。 最后,我们将使用眼睛的标志来计算眼睛…

小白必看:这些项目可以让你轻松月入过万

月入五W的互联网副业野路子。总有一个适合你!刷到这篇回答的。就不要在看其他的了。 这些互联网项目你也能做 1、认识个哥们&#xff0c;每天去一些热门的寺庙拍视频开直播&#xff0c;帮人代请手串&#xff0c;每串赚15元&#xff0c;月入5万多&#xff0c;非常非常稳定。 2…

基于SpringBoot+vue的口腔管家平台设计与实现

博主介绍&#xff1a; 大家好&#xff0c;我是一名在Java圈混迹十余年的程序员&#xff0c;精通Java编程语言&#xff0c;同时也熟练掌握微信小程序、Python和Android等技术&#xff0c;能够为大家提供全方位的技术支持和交流。 我擅长在JavaWeb、SSH、SSM、SpringBoot等框架…

Image Sensor的像素时钟计算

本文介绍Image Sensor的像素时钟计算。 在配置Image Sensor寄存器的过程中&#xff0c;像素时钟至关重要&#xff0c;它的正确设置关系到帧率&#xff0c;曝光参数的正确与否。我们从相关资料中了解到像素时钟有多种方法&#xff0c;究竟该选择哪一种呢&#xff0c;本文来对常…

【C++】函数绑定器技术

1. 函数绑定器技术&#xff0c;什么情况可以用到这种技术实现? 占位符和函数绑定器技术&#xff08;如std::bind&#xff09;可以在以下情况下使用&#xff1a; 参数绑定&#xff1a;当你想要绑定函数的某些参数&#xff0c;但又不想立即提供这些参数的值时&#xff0c;可以…

在idea中使用Git技术

1.配置git环境 打开idea,点击file->setting->搜索git&#xff0c; 将git的安装路径填写进去 2.去gitee创建一个远程仓库 3.拉入一个.gitignore文件&#xff0c;过滤掉不需要管理的文件 4.在idea进行如下操作 5.选择要提交的内容 目前只是保存在了本地仓库 6.推送到远端…

简单尝试将go项目用宝塔部署到服务器

最近写了一个go项目的小demo打算放到服务器上&#xff0c;但是中间遇到一些问题&#xff0c;这里我记录下&#xff1a; 一、找一个文件夹将打包后的go项目放进去&#xff0c;如图 二、安装执行exe文件的wine 终端执行命令 yum install wine 终端在这&#xff0c;如图&#xf…