小程序如何在页面之间传递参数呢?
主要有两种方法一种是声明式导航传参,一种是编程式导航传参。
先介绍一下声明式导航传参
使用 navigator组件,url后面的/pages/index1/index1是传递参数后的地址(就是我们要传参的对象)
<navigator url="/pages/index1/index1?name=FZH&number=123456">数据传参</navigator>
?name=FZH&number=123456
注解:
1.其中问号是用来分隔 地址(/pages/index1/index1) 与 参数(name) 的;
2.等号是用来连接参数键(name)和参数值(FZH)的。
3.&是用来连接不同的参数键的;就是name和number
接下来是编程式导航传参
编程式导航传参其实就是使用一个button组件来做一个按钮,然后定义一个函数。
在wxml中:
<button bindtap="chauncan2">传递参数</button> //bindtap后面是函数名
在js文件中
//js文件中是来定义这个函数让它有什么用途的
chauncan2() {
wx.navigateTo({
url: '/pages/index1/index1?student=FZH&number=123456'
})
其实二者思路基本一致,只不过一个在函数中(用到了js和wxml),一个直接声明(只用到wxml而已)罢了。
那么传递过来的参数这么接收呢???
那我们使用js中自带的onLoad函数进行接受
其中 options是用来接受传递过来的参数的,而console.log()的括号中我们可以放入option来现实展示传递过来的参数。
onLoad(options) {
console.log(options)
}
这样就可以在调试器的console面板中查看了
然而however(option存在局限性,请继续看下去)
这个options只能用在onLoad()函数中
那么我们这么把传递的参数用到其他函数中去呢??
那我们需要在同在js文件中data中定义一个query指向空对象,//query一般是导航传递过来的对象
data: {
query:{}
}
在onLoad()函数中添加一个this.setData({})函数 用来将option的值赋予query
onLoad(options) {
this.setData({
query: options
})
}
这样其他函数就可以访问传递过来的值了