当前位置：首页 > news >正文

微信小程序页面传递参数方法

news 2025/8/19 12:02:32

说明

页面跳转方法有很多中，但经常会通过一个页面传递参数给另一个页面，非常的常见。但数据量大的时候，通常用字符串传递，但会显得过于臃肿，下面介绍页面传递参数的各种方式。

一、页面跳转链接携带参数

例如：A跳转到B页面携带参数

特点：只能传递单个页面，数据量少

A页面:
wx.navigateTo({url: '/pages/login/login?id=XXX'
});B页面接收数据
onLoad(options) {if (options.id) {console.log(options.id)//接收到参数}
}

当然，如果过多的参数时候，将会显示url: '/pages/login/login?id=XXX&id2=XXX&id3=XXX...'就会显得很臃肿，不易于维护和修改数据。

二、使用对象进行传递

将过多的数据进行对象化，然后再转成字符类型进行传递，传递之后再换成json格式

特点：只能传递单个页面，数据量可大

A页面:handletap: function() {var data = JSON.stringify(obj);wx.navigataTo({url: ‘url?data=’ + data    })
}B页面：
onload: function(option) { var data = JSON.parse(option.data)//传递参数
}

三、监听acceptDataFromOpenerPage事件

监听acceptDataFromOpenerPage事件，获取上一页面通过eventChannel传送到当前页面的数据

特点：只能传递单个页面，数据量可大

A页面:handletap: function() {wx.navigateTo({url: '/pages/set_up/set_up',success: function(res) {// 通过eventChannel向被打开页面传送数据res.eventChannel.emit('adviser_list', adviser_list)}})
}B页面：
onload: function(option) { const eventChannel = this.getOpenerEventChannel()// 监听acceptDataFromOpenerPage事件，获取上一页面通过eventChannel传送到当前页面的数据eventChannel.on('adviser_list', function (data) {console.log(adviser_list)//传递参数});
}

四、通过公共js来缓存传递方法

在app.js文件里面，声明一个对象，然后将需要的数值存储进该方法里面，在需要的页面进行调用即可

特点：可以跨页面、多页面使用、关闭小程序自动清空

app.js{globalData: {adviser_list："";//数据}
}
A页面:const App = getApp();handletap: function() {App.globalData.adviser_list="小明";//重点wx.navigateTo({url: '/pages/set_up/set_up',})
}B页面：
onload: function(option) { let adviser_lis = App.globalData.adviser_lis//传递的参数
}

五、通过缓存来进行数据传递

通过上一个页面缓存到内存里面，然后在需要的页面进行数据获取，可以跨多页面使用，数据永久有效，但是会增加多余缓存，需要清理，传递少的数据，建议使用前面方法

特点：可以跨页面、多页面使用、增加缓存，关闭小程序不会清空，永久使用

A页面:handletap: function() {let adviser_list={name:1,age:100}wx.setStorageSync('adviser_list',userInfo);//重点wx.navigateTo({url: '/pages/set_up/set_up',})
}B页面：
onload: function(option) { let adviser_list= wx.getStorageSync('adviser_list')||'';//获得参数，可以在想要的方法里面获取，不一定需要在onload方法里面。
}

还有组件传递参数，以及数据监听传递参数等，将不作过多的介绍，感兴趣的小伙伴可以在文章中寻找查看。