Tutorial: [基础能力] 跨页面传参

功能

后一页面向前一页面传参
- e.g.发布页，点击选择分类->选择分类页，选定分类->自动返回发布页，此时发布页如何获取选择结果
前一页面向后一页面传递大量数据
- e.g.手机估价页，点击卖掉换钱->发布页，此时发布页如何获取用户在估价页填写的大量表单数据

特点

无需借用后端接口，无需污染前端storage，纯内存操作性能较好
逻辑独立、通用，对页面代码无侵入

效果

使用

fancy-mini setup
后一页面向前一页面传参

  //后一页面，e.g.发布页，点击选择分类->选择分类页，选定分类->自动返回发布页，中的选择分类页
  import routeParams from 'fancy-mini/lib/routeParams';
  
  //用户选定分类
  onCate(cate){
    //设置返回参数
    routeParams.setBackFromData({
      cate,
    });

    //自动返回发布页
    wx.navigateBack();
  }

  //前一页面，e.g.发布页，点击选择分类->选择分类页，选定分类->自动返回发布页，中的发布页
  import routeParams from 'fancy-mini/lib/routeParams';
  
  onShow(){
    this.rcvCrossPageFieldsBackward(); //接收 返回时，后一页面传递回来的数据
  }
  
  //接收 返回时，后一页面传递回来的数据
  rcvCrossPageFieldsBackward(){
    let route = routeParams.getBackFromRoute(); //从哪个页面返回的
    let data = routeParams.getBackFromData(); //该页面传了什么数据过来
    if (!data) //若用户直接返回，而不是操作完毕后返回，则不作处理
      return;

    switch (route){ //从哪个页面返回的
      case "pages/post/cates": //选择分类页
        let cate = data.cate; //获取数据
        //...
        break;
      default:
    }
  }

前一页面向后一页面传参

  //前一页面，e.g.手机估价页，点击卖掉换钱->发布页 中的手机估价页
  import routeParams from 'fancy-mini/lib/routeParams';
  
  //点击卖掉换钱
  onSell(){
    //设置传参数据
    routeParams.setOpenFromData({ //前一页面向后一页面传参
      brand: 'demo',
      //...
    });

    //跳转到发布页
    wx.navigateTo({
      url: '/pages/post/post'
    });
  },

  //后一页面，e.g.手机估价页，点击卖掉换钱->发布页 中的发布页
  import routeParams from 'fancy-mini/lib/routeParams';
  
  onLoad(){
    this.rcvCrossPageFieldsForward(); //接收 打开时，前一页面额外传递过来的数据
  }
  
  //接收 打开时，前一页面额外传递过来的数据
  rcvCrossPageFieldsForward(){
    let route = routeParams.getOpenFromRoute(); //从哪个页面打开的
    let data = routeParams.getOpenFromData(); //该页面额外传了什么数据过来
    if (!data) //没有额外传参，不作处理
      return;
  
    switch (route){ //从哪个页面打开的
      case "pages/phoneEval/phoneEval": //手机估价页
        console.log('data:', data); //获取数据 {brand: 'demo', /*...*/}
        //...
        break;
      default:
    }
  }

tips

api断句

  getBackFromRoute() => get | back-from | route 获取 返回处的 路由
  getBackFromData() => get | back-from | data  获取 返回处的 数据
  setBackFromData() => set | back-from | data 设置 返回处的 数据
  getOpenFromRoute() => get | open-from | route 获取 打开处的 路由
  getOpenFromData() => get | open-from | data  获取 打开处的 数据
  setOpenFromData() => set | open-from | data 设置 打开处的 数据

层级校验
为避免数据管理混乱，本传参模块只用于相邻页面传参，不支持跨多级页面使用 e.g. A->B->C，C设置参数，A获取参数，会失败，因为A和C不是相邻页面

api查询

RouteParams