在微信小程序中,接收页面参数主要有以下几种方式:
URL传参
通过在URL中携带参数传递数据,例如:`/pages/details/details?id=1001`。
在接收页面的`onLoad`方法中,可以通过`options`参数获取传递的参数:
```javascript
onLoad: function(options) {
console.log(options.id); // 输出1001
}
```
路由传参
通过页面路由函数`wx.navigateTo`或`wx.redirectTo`的第二个参数传递数据。
例如,使用`wx.navigateTo`:
```javascript
wx.navigateTo({
url: '/pages/details/details',
success: function(res) {
// 通过eventChannel向被打开页面传送数据
res.eventChannel.emit('acceptDataFromOpenerPage', {data: 'test'});
}
});
```
在被打开页面的`onLoad`方法中,使用`wx.onEvent`监听事件,并获取数据:
```javascript
onLoad: function(options) {
var _this = this;
// 监听acceptDataFromOpenerPage事件,获取上一页面通过eventChannel传送到当前页面的数据
const eventChannel = this.getOpenerEventChannel();
eventChannel.on('acceptDataFromOpenerPage', function(data) {
console.log(data.data); // 输出'test'
});
}
```
通过`navigator`标签传值
在页面的配置文件(如`wxml`、`js`、`json`文件)中,可以使用`navigator`标签传值或`wx.navigator`。
例如,将`good_id=16`参数传入`detail`页面,然后在`detail`页面的`onLoad`方法内接收:
```javascript
onLoad: function (options) {
this.setData({ good_id: options.good_id });
}
```
使用事件通道(EventChannel)
通过在跳转页面中使用`eventChannel`传递数据,并在目标页面中监听相应的事件来获取数据。
例如,在A页面中:
```javascript
handletap: function() {
var data = JSON.stringify(this.data.userInfo);
wx.navigateTo({
url: '/pages/B/index?data=' + data
});
}
```
在B页面中:
```javascript
onLoad: function(options) {
var data = JSON.parse(options.data);
console.log(data.id); // 输出传递的数据
}
```
建议
URL传参适用于简单的数据传递,但参数会显示在URL中,不适合传递敏感信息。
路由传参和 事件通道适用于需要跨页面传递较大量数据的情况,且数据不会显示在URL中。
通过`navigator`标签传值适用于单页面内的参数传递。
根据具体需求选择合适的传参方式,以确保数据传递的安全性和便捷性。