小程序中 页面给方法传参 页面给页面传参

对于小程序来说,如果有vue或者react这些框架基础的话,学起来很容易上手. 但是要重点说一说的是小程序中的传参方式, 这篇博客主要从以下两个方面来说说传参

1.页面给方法传参

   比如现在想通过页面给方法传一个id值, .wxml文件中代码如下:

<view bindtap='getData' data-id='1'></view>

   .js文件中代码如下:

       getData(e){
			let id = e.currentTarget.dataset.id
			
		}

 在事件处理对象中,有一个currentTarget的属性,也就是当前的目标对象,通过它就可以获取到我们从页面中传的值.  页面在传值的时候使用的是data-...    要注意的是, 如果传的是data-user-name   那么我们在方法中获取的时候拿到的是userName,它会自动转换为驼峰命名法.

2.页面给页面传参

  比如现在要从A页面跳转到B页面中,那么A页面的跳转代码如下:

   

navigateTo({
			url:'跳转页面的路径?id='+this.data.id
		})

   在路径后,拼接参数,如果有多个参数,那么使用&符号进行连接,要注意,此处传的参数会被强制转换成字符串,所以如果我们想要传一个对象,那么我们可以在传送前,对这个对象进行序列化,使用JSON.stringfy(),把对象转换成json字符串

   B页面在页面加载的时候,也就是触发onLoad生命周期的时候,获取A页面传的值,代码如下:

onLoad(option){
			option是一个对象,里面存储的就是上个页面传过来的参数
		}

如果A页面传的是对象,那么需要使用JSON.parse(),进行反序列化

 

以上就是传参的内容,欢迎补充指正!