微信小程序使用路由传参和传对象的方法

近期在做微信小程序开发,在页面跳转时,需要携带参数到下一个页面,尤其是将对象传入页面。为了方便重温,特此记录。

路由传字符串参数

原始页面

传递字符串参数比较简单。路由跳转有两种方式,一种是通过navigator组件的url完成,另一种是使用wx.navigateTo()跳转。wxml代码如下:

html 复制代码
<!--pages/tim/index/index.wxml-->
<view>Author:益添</view>
<view>
	<navigator url="/pages/tim/demo/demo?name=Tim&sex=男" hover-class="navigator-hover">navigator携带字符串参数</navigator>
</view>
<button bind:tap="tapStringParameter">传递字符串参数</button>

需要通过按钮的方法响应传递,则在js中,定义一个tapStringParameter方法,处理点击后的工作

TypeScript 复制代码
  tapStringParameter(){
    console.log("tapStringParameter")
    wx.navigateTo({
      url: '/pages/tim/demo/demo?name=Tim&sex=男'
    })
  },

接收参数的页面

在对应的pages/tim/demo/demo页面,在onLoad方法中接收参数,代码和示例如下:

TypeScript 复制代码
  onLoad(options) {
    console.log(options)
    console.log(options.name, options.sex)
  }

效果如下,分别点击navigator和按钮,都可以获取到对应的参数。

路由传递对象

由于字符串传递的参数需要转换,且参数的长度有限(路由字符串具体长度笔者未看到说明,可能和http的get方法一样,在实际开发过程中遇到过超限无法完整传递的情况)。因此要传递对象,就需要使用wx.navigateTo()中的回调函数。

原始页面

接下来,在上述的wxml页面上,增加一个按钮

html 复制代码
<!--pages/tim/index/index.wxml-->
<view>Author:益添</view>
<view>
	<navigator url="/pages/tim/demo/demo?name=Tim&sex=男" hover-class="navigator-hover">navigator携带字符串参数</navigator>
</view>
<button bind:tap="tapStringParameter">传递字符串参数</button>
<button bind:tap="tapObjectParameter">传递对象参数</button>

在js中,我们增加"tapObjectParameter"方法。在方法中创建一个对象,并在wx.navigateTo()的success回调中,添加一个事件,命名为"acceptDataFromOpenerPage",将对象传入。在url中,我们还是可以通过字符串传递参数。

TypeScript 复制代码
// pages/tim/index/index.ts
Page({
  tapStringParameter(){
    console.log("tapStringParameter")
    wx.navigateTo({
      url: '/pages/tim/demo/demo?name=Tim&sex=男'
    })
  },
  tapObjectParameter(){
    console.log("tapObjectParameter")
    let person = {
      name: '益添',
      sex: '男'
    }
    wx.navigateTo({
      url: '/pages/tim/demo/demo?name=Tim&sex=男',
      success: function(res) {
        // 通过eventChannel向被打开页面传送数据
        res.eventChannel.emit('acceptDataFromOpenerPage', person)
      }
    })
  }
})

接收参数的页面

在onLoad函数中,使用this.getOpenerEventChannel()获取当前的事件频道,然后监听"acceptDataFromOpenerPage"事件,在回调中,即可获取传递过来的参数。

TypeScript 复制代码
// 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)

相关推荐
软希网分享源码5 小时前
校园跑腿小程序源码 | 跑腿便利店小程序(源码下载)
小程序·跑腿便利店小程序·校园跑腿小程序源码
说私域12 小时前
基于开源 AI 智能名片链动 2+1 模式 S2B2C 商城小程序的新开非连锁品牌店开业引流策略研究
人工智能·小程序·开源
KlDMEO14 小时前
DrissionPage 能控制火狐或edge吗
其他·微信小程序·小程序
柯北(jvxiao)16 小时前
爆肝三周,我终于上线了自己的第一个小程序
微信小程序·小程序
lumi.20 小时前
2.3零基础玩转uni-app轮播图:从入门到精通 (咸虾米总结)
java·开发语言·前端·vue.js·微信小程序·uni-app·vue
weixin_1772972206921 小时前
剧本杀APP系统开发:打造多元化娱乐生态的先锋力量
小程序·娱乐·剧本杀
毕设源码-赖学姐21 小时前
【开题答辩全过程】以 基于Springboot+微信小程序的网上家教预约系统的设计与实现-开题为例,包含答辩的问题和答案
spring boot·后端·微信小程序
weixin_1772972206921 小时前
扭蛋机小程序系统开发:连接线上线下娱乐的新桥梁
小程序·娱乐·扭蛋机·盲盒
毕设源码-赖学姐1 天前
【开题答辩全过程】以 交通管理乱停车小程序的设计与实现为例,包含答辩的问题和答案
小程序
说私域1 天前
基于开源AI智能名片链动2+1模式S2B2C商城小程序的营销创新研究——以“种草”实践践行“以人为本”理念
人工智能·小程序