小程序传参有限制和组件式传参不一样,所以写下我自己经历的,并解决的示例。
Page
这种page与page页面之间传参,相对比较方便,但是有一种限制,用?拼接的参数,只能在onload函数中用options接收!
//e.target.dataset.id 在wxml页面设置 data-id=‘参数值’ 即可
//或者用e.currentTarget.dataset.id接收,两种方式选其一
//此种为接收当前页面点击函数返回的属性值
wx.navigateTo({
// 传递参数
url: '../logs/logs?uesrname='+qu //qu是上面input输入的值
})
Page({
data: {
motto: 'Hello',
userInfo: {},
answer: stringAns,
uesrname:'' //设置一下接收的变量
},
onLoad: function (options) {
// 接收参数
this.setData({
uesrname:option.uesrname
})
},
其实这种也可以给组件components传参(父级传递给子级)
// 子级若是想要接收父级参数(?拼接的-跳转子级组件页面参数传递)
// 需要定义properties列表,对应传递的key,即可自动接收
Component({
/**
* 组件的一些选项
*/
options: {
addGlobalClass: true,
multipleSlots: true
},
/**
* 组件的对外属性
*/
properties: {
bgColor: {
type: String,
default: ''
},
isCustom: {
type: [Boolean, String],
default: false
},
isBack: {
type: [Boolean, String],
default: false
},
bgImage: {
type: String,
default: ''
},
isType: {
type: String,
default: ''
}
},
组件之间传参也可以用组件引用的方式传参
<cu-custom bgColor="bg-gradual-white text-bold" isBack="{{false}}" isType="">
</cu-custom>
组件接收参数,一样是自动定义properties对象,即可自动接收参数,微信小程序,大小写区分!!!
供参考!