网站更新和维护怎么做,山西响应式网站设计,专业商城网站设计制作,成都网站设计公司近期在做微信小程序开发#xff0c;在页面跳转时#xff0c;需要携带参数到下一个页面#xff0c;尤其是将对象传入页面。为了方便重温#xff0c;特此记录。
路由传字符串参数
原始页面
传递字符串参数比较简单。路由跳转有两种方式#xff0c;一种是通过navigator组件…近期在做微信小程序开发在页面跳转时需要携带参数到下一个页面尤其是将对象传入页面。为了方便重温特此记录。
路由传字符串参数
原始页面
传递字符串参数比较简单。路由跳转有两种方式一种是通过navigator组件的url完成另一种是使用wx.navigateTo()跳转。wxml代码如下
!--pages/tim/index/index.wxml--
viewAuthor益添/view
viewnavigator url/pages/tim/demo/demo?nameTimsex男 hover-classnavigator-hovernavigator携带字符串参数/navigator
/view
button bind:taptapStringParameter传递字符串参数/button 需要通过按钮的方法响应传递则在js中定义一个tapStringParameter方法处理点击后的工作 tapStringParameter(){console.log(tapStringParameter)wx.navigateTo({url: /pages/tim/demo/demo?nameTimsex男})},
接收参数的页面
在对应的pages/tim/demo/demo页面在onLoad方法中接收参数代码和示例如下 onLoad(options) {console.log(options)console.log(options.name, options.sex)}
效果如下分别点击navigator和按钮都可以获取到对应的参数。 路由传递对象
由于字符串传递的参数需要转换且参数的长度有限路由字符串具体长度笔者未看到说明可能和http的get方法一样在实际开发过程中遇到过超限无法完整传递的情况。因此要传递对象就需要使用wx.navigateTo()中的回调函数。
原始页面
接下来在上述的wxml页面上增加一个按钮
!--pages/tim/index/index.wxml--
viewAuthor益添/view
viewnavigator url/pages/tim/demo/demo?nameTimsex男 hover-classnavigator-hovernavigator携带字符串参数/navigator
/view
button bind:taptapStringParameter传递字符串参数/button
button bind:taptapObjectParameter传递对象参数/button
在js中我们增加“tapObjectParameter”方法。在方法中创建一个对象并在wx.navigateTo()的success回调中添加一个事件命名为“acceptDataFromOpenerPage”将对象传入。在url中我们还是可以通过字符串传递参数。
// pages/tim/index/index.ts
Page({tapStringParameter(){console.log(tapStringParameter)wx.navigateTo({url: /pages/tim/demo/demo?nameTimsex男})},tapObjectParameter(){console.log(tapObjectParameter)let person {name: 益添,sex: 男}wx.navigateTo({url: /pages/tim/demo/demo?nameTimsex男,success: function(res) {// 通过eventChannel向被打开页面传送数据res.eventChannel.emit(acceptDataFromOpenerPage, person)}})}
})
接收参数的页面
在onLoad函数中使用this.getOpenerEventChannel()获取当前的事件频道然后监听“acceptDataFromOpenerPage”事件在回调中即可获取传递过来的参数。
// pages/tim/demo/demo.ts
Page({onLoad(options) {console.log(options)console.log(options.name, options.sex)const eventChannel this.getOpenerEventChannel()// 监听acceptDataFromOpenerPage事件获取上一页面通过eventChannel传送到当前页面的数据eventChannel.on(acceptDataFromOpenerPage, function (data) {console.log(acceptDataFromOpenerPage)console.log(data)console.log(data.name, data.sex)})}
})
点击按钮可以看到各页面传入的中的参数能正常输出。 参考链接
导航 / navigator (qq.com)
路由 / wx.navigateTo (qq.com)
