美文网首页
微信小程序路由传参

微信小程序路由传参

作者: chang_遇见缘 | 来源:发表于2019-11-15 21:39 被阅读0次

    路由传参常用方式有以下几种

    1. 通过url传参

    // xxx.wxml标签里进行传参
     <navigator url="/pages/detail/detail?productId=12345" hover-class="navigator-hover">详情</navigator>
    
    // 或者在wx.js里用wx.navigateTo
    //页面跳转传参
    wx.navigateTo({
      url: '/pages/detail/detail?productId=12345'
    })
    
    // 产品详情页面
    //跳转后拿取跳转前传过来的参数
    Page({
      onLoad: function(option){
        let productId = option.productId;
        console.log(productId);
      }
    })
    

    上面的方式的参数不能是对象,如果需要传对象,可以将对象转成json字符串,然后拼接到url后面,在接收页面再将json字符串转成对象

    let info = {
     a:2,
     b:3
    }
    let infoStr = JSON.stringfy(info);
    wx.navigateTo({
      url: '/pages/detail/detail?infoStr='+infoStr
    })
    
    // 产品详情页面
    Page({
      onLoad: function(option){
        let infoStr = option.infoStr;
        let info = JSON.parse(infoStr);
      }
    })
    

    2. 通过事件传参

    1.官网例子

    // 产品列表页
    wx.navigateTo({
      url: url: '/pages/detail/detail'
      events: {
        // 为指定事件添加一个监听器,获取被打开页面传送到当前页面的数据
        acceptDataFromOpenedPage: function(data) {
          console.log(data)
        },
        someEvent: function(data) {
          console.log(data)
        }
        ...
      },
      success: function(res) {
        // 通过eventChannel向被打开页面传送数据
        res.eventChannel.emit('acceptDataFromOpenerPage', { data: 'test' })
      }
    })
    
    // 产品详情页
    Page({
      onLoad: function(option){
        const eventChannel = this.getOpenerEventChannel()
        eventChannel.emit('acceptDataFromOpenedPage', {data: 'test'});
        eventChannel.emit('someEvent', {data: 'test'});
        // 监听acceptDataFromOpenerPage事件,获取上一页面通过eventChannel传送到当前页面的数据
        eventChannel.on('acceptDataFromOpenerPage', function(data) {
          console.log(data)
        })
      }
    }) 
    

    2 .简化例子
    以上例子,在跳转的时候列表页可以向详情页传数据,详情页也可以向列表页传数据,平时我们经常都只是传数据,很少需要回传,以下是简化的例子

    // 列表页
    wx.navigateTo({
      url: "/pages/home/detail/detail",
      success: function(res) {
        // 通过eventChannel向被打开页面传送数据
        let data = {productId: 'sadf2323',productName:'金龙鱼花生油'};
        res.eventChannel.emit("info", data);
      }
    });
    
    // 详情页
    onLoad: function(options) {
      const eventChannel = this.getOpenerEventChannel();
      // 监听info事件,获取上一页面通过eventChannel传送到当前页面的数据
      eventChannel.on("info", function(data) {
         console.log(data);
      });
    },
    

    总结: 路由传参可以用这两种方式

    通过url拼接参数传输,需要传对象,需要传对象就先讲对象转成json字符串再传
    通过eventChannel(事件通道)进行传输(可以传对象)

    相关文章

      网友评论

          本文标题:微信小程序路由传参

          本文链接:https://www.haomeiwen.com/subject/nuqeictx.html