258资源分享网

一：复杂数据的传递页面跳转进行数据传递是一个必不可少的功能，有很多应用场景需要使用比如买商品的流程是“选择商品” - “购物车” - “物流信息” - “确认订单”，所以在这几个不同 ...

一：复杂数据的传递

页面跳转进行数据传递是一个必不可少的功能，有很多应用场景需要使用

比如买商品的流程是“选择商品” -> “购物车” -> “物流信息” -> “确认订单”，所以在这几个不同页面进行跳转的时候，相应的数据也需要传递下去

在android中，我们可以用Intent 来进行数据的传递，新界面通过getIntent来进行获取

在IOS中，一般是通过controller 的属性来进行传值

在React-Native中，可以在navigator.push 方法传递对象

上面三种进行数据的传递都很简单，而且也很方法。

而在小程序中，我们可以看到，页面跳转和传递数据是通过

代码实现

wx.navigateTo({

url:'page?a=1&b=2',

success:function(res){

// success

},

fail:function(err){

// fail

},

complete:function(){

// complete

}

});

他是通过url字段来控制跳转的页面，同时路径“?”后面的表示传递的参数，这跟http的GET请求传参一致

在新页面获取参数信息也很简单

Page({

data:{},

onLoad:function(options){

console.log(options)

}

});

可以直接在每个页面的onLoad 回调中来进行获取。

看了上面的代码，你会疑问这不是很简单吗？还需要你来说吗？两句代码搞定的事

确实，如果你只是做简单的数据传递是很简单

但是，回到最上面说的那个问题，如果页面层级比较多，数据比较多且复杂的时候，你会抓狂，因为wx.navigateTo 的url自动是String类型，也就是说你不能直接传递对象，如果数据很多的话，会是一件很痛苦的事

wx.navigateTo({

url:"page?productId=1&count=2&name=zhangzy&phone=13488888888&address=xxx"

});

代码可读性极差而且非常繁琐，万一那个字段忘记拼进去，很容易出bug

所以，我们必须要做改变，需要优化

结合上篇文章《返回上级页面并传递数据》封装另外一个大同小异的方法

classRouter{

navigateTo(obj){

wx.navigateTo({

url: obj.url,

success:function(res){

// success

obj.success && obj.success(res);

if(obj.data){

setTimeout(()=>{

let pages = getCurrentPages()

let curPage = pages[pages.length -1];

if(curPage.startPageForData){

curPage.startPageForData(obj.data);

}else{

curPage.setData(obj.data);

}

},1000);

}

},

fail:function(err){

// fail

obj.fail && obj.fail(res);

},

complete:function(){

// complete

obj.complete && obj.complete();

}

});

}

}

Router=newRouter();