一起创业网-为互联网创业者服务

小程序怎么传递动态参数

在微信小程序中传递动态参数可以通过以下几种方式实现:

URL传参

这是最简单也是最常用的方法。通过在URL中拼接参数来传递数据。例如,在跳转时可以这样写:

```javascript

wx.navigateTo({

url: '/pages/details/details?id=1001'

});

```

在接收页面的`onLoad`方法中,可以通过`options.id`获取传递的参数:

```javascript

onLoad: function(options) {

console.log(options.id); // 输出1001

}

```

路由传参

通过页面路由函数`wx.navigateTo`或`wx.redirectTo`的第二个参数传递数据。例如:

```javascript

wx.navigateTo({

url: '/pages/details/details',

success: function(res) {

res.eventChannel.emit('acceptDataFromOpenerPage', {data: 'test'});

}

});

```

在被打开页面的`onLoad`方法中,使用`wx.onEvent`监听事件,并获取数据:

```javascript

onLoad: function(options) {

var _this = this;

this.getOpenerEventChannel().on('acceptDataFromOpenerPage', function(data) {

console.log(data.data); // 输出'test'

});

}

```

使用`data-*`属性

在小程序的WXML文件中,可以使用`data-*`属性来保存参数,然后在JS文件中通过`event.currentTarget.dataset.*`获取这些值。例如:

```html

```

在对应的JS文件中:

```javascript

buttonClick: function(event) {

let id = event.currentTarget.dataset.id;

console.log("value:" + id); // 输出"value:123"

}

```

通过`wx.setStorageSync`和`wx.getStorageSync`

可以将参数存储在本地,然后在需要的时候取出。例如:

```javascript

wx.setStorageSync('key', 'value');

```

在需要获取参数的地方:

```javascript

var value = wx.getStorageSync('key');

console.log(value); // 输出"value"

```

使用事件传递数据

在跳转时,可以通过`events`对象中的`acceptDataFromOpenerPage`事件向被打开页面传递数据:

```javascript

wx.navigateTo({

url: '/pages/details/details',

events: {

acceptDataFromOpenerPage: function(data) {

console.log(data.data); // 输出传递的数据

}

}

});

```

在被打开页面中监听该事件:

```javascript

onLoad: function(options) {

var _this = this;

this.getOpenerEventChannel().on('acceptDataFromOpenerPage', function(data) {

console.log(data.data); // 输出传递的数据

});

}

```

以上是微信小程序中传递动态参数的几种常见方法,可以根据具体需求选择合适的方式进行参数传递。