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

这篇具有很好参考价值的文章主要介绍了微信小程序路由跳转,API调用,页面传值。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

路由跳转

  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请求**

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

微信小程序通过 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文件传递的值:文章来源地址https://www.toymoban.com/news/detail-525919.html

到了这里,关于微信小程序路由跳转,API调用,页面传值的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 微信小程序 跳转页面经常会遇到判断是否登录情况。基于此需求,做了一个路由跳转拦截的jump组件

    组件代码非常简单 在根目录创建components目录 在components目录新建jump目录 在jump目录新建四个文件 index.js index.json index.wxml index.wxss 这个样式文件内容空就行

    2024年02月09日
    浏览(53)
  • 微信小程序前后页面传值

    从前一个页面跳转到下一个页面,如何传递参数? 从后一个页面返回前一个页面,如何回调参数? 从前一个页面跳转到下一个页面并传值。 前页面:在跳转链接中添加参数并传递 后页面:在onLoad()函数中接收参数 这种方式适合小规模的传参,适合传输“较大”的数据吗?例

    2024年02月14日
    浏览(40)
  • 微信小程序 - 实时监听路由发生变化,当页面跳转发生变化时执行一段代码或函数,可获取目标页面的路径 URL 、路由参数、跳转方式、该页面的配置等(支持 “全局“ 和 “局部“ 两种写法)

    有时候,我们需要实时监听页面的跳转,并且拿到路由地址及参数。 实现了 在微信小程序开发中,每次切换页面时都触发一个函数,当路由发生变化后执行一段代码, 简单来说,相当于一个 “路由监听器”,当页面跳转时立即触发,然后拿到路由的 URL 和携带的参数,进行

    2024年02月12日
    浏览(92)
  • 微信小程序页面传值的5种方式

    微信小程序页面传值的方式有以下几种: 1.URL参数传值:通过在跳转链接中附加参数,在目标页面的onLoad函数中获取参数。 2.全局变量:通过在app.js文件中定义全局变量,在源页面设置变量的值,目标页面通过getApp().globalData获取变量的值。 3.缓存存储:使用wx.setStorageSync()在

    2024年02月15日
    浏览(41)
  • 微信小程序详细讲解页面传值,globalData,wx,web前端开发基础

    在其他非app.js文件中修改: var app = getApp() ​ app.globalData.hasLogin = true 二、 使用 wx.navigateTo 与 wx.redirectTo 的时候,可以将部分数据放在 url 里面,并在新页面 onLoad 的时候初始化 // Navigate wx.navigateTo({ url: ‘…/pageD/pageD?name=raymondgender=male’, }) ​ // Redirect wx.redirectTo({ url: ‘…/p

    2024年04月25日
    浏览(56)
  • Flutter中GetX系列九--路由/页面跳转,传值,中间件(GetPage)

    1.1.使用to方法实现页面基本跳转  1.2.使用Get.toNamed()跳转到命名路由 系统跳转方式  Getx跳转方式 1.3.返回上一级页面Get.back() 系统跳转方式 Getx跳转方式​​​​​​​ 1.4.返回到根路由 系统跳转方式   Getx跳转方式 1.5.跳转到下一个页面的,但是没有返回按钮(一般应用于闪屏

    2024年02月16日
    浏览(50)
  • 微信小程序:跳转页面

    实际调用需要根据自己业务实际情况决定,虽然各种方式一定程度上能减少内存损耗,但是业务上面流转优化才是最终要满足的,一定要从业务流转去优化去考虑,不要为了性能增加了流转复杂度 1、wx.navigateTo 保留当前页面,跳转到应用内的某个页面。可以通过调用  wx.na

    2024年02月03日
    浏览(66)
  • 微信小程序页面跳转方式+跳转小程序

    官方文档:https://developers.weixin.qq.com/miniprogram/dev/api/route/wx.switchTab.html 跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面 跳转到其他页面(非tabBar页) 返回上一页面或返回多级页面 首先需要在当前小程序app.json中定义:需要跳转的小程序的app-id app.josn文件: 第一种方法:wx.

    2024年02月12日
    浏览(74)
  • 微信小程序之页面跳转

    1、wx.navigateTo( ): 功能:保留当前页面,跳转到应用内的某个页面。 特点:跳转后原页面保留在后台,可以通过 wx.navigateBack() 返回到原页面,新页面显示在原页面之上,有返回按钮。 2、wx.redirectTo( ): 功能:关闭当前页面,跳转到应用内的另一个页面。 特点:跳转后原页面

    2024年04月23日
    浏览(57)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包