頁(yè)面跳轉(zhuǎn)進(jìn)行數(shù)據(jù)傳遞是一個(gè)必不可少的功能，有很多應(yīng)用場(chǎng)景需要使用

比如買(mǎi)商品的流程是“選擇商品” -> “購(gòu)物車(chē)” -> “物流信息” -> “確認(rèn)訂單”，所以在這幾個(gè)不同頁(yè)面進(jìn)行跳轉(zhuǎn)的時(shí)候，相應(yīng)的數(shù)據(jù)也需要傳遞下去

在android中，我們可以用Intent 來(lái)進(jìn)行數(shù)據(jù)的傳遞，新界面通過(guò)getIntent來(lái)進(jìn)行獲取

在IOS中，一般是通過(guò)controller 的屬性來(lái)進(jìn)行傳值

在React-Native中，可以在navigator.push 方法傳遞對(duì)象

上面三種進(jìn)行數(shù)據(jù)的傳遞都很簡(jiǎn)單，而且也很方法。

而在小程序中，我們可以看到，頁(yè)面跳轉(zhuǎn)和傳遞數(shù)據(jù)是通過(guò)

代碼實(shí)現(xiàn)

1. wx.navigateTo({
2. url: 'page?a=1&b=2',
3. success: function (res) {
4. // success
5.  
6. },
7. fail: function (err) {
8. // fail
9. },
10. complete: function () {
11. // complete
12. }
13. });

他是通過(guò)url字段來(lái)控制跳轉(zhuǎn)的頁(yè)面，同時(shí)路徑“?”后面的表示傳遞的參數(shù)，這跟http的GET請(qǐng)求傳參一致

在新頁(yè)面獲取參數(shù)信息也很簡(jiǎn)單

1. Page({
2. data: {},
3. onLoad: function(options) {
4. console.log(options)
5. }
6. });

可以直接在每個(gè)頁(yè)面的onLoad 回調(diào)中來(lái)進(jìn)行獲取。

看了上面的代碼，你會(huì)疑問(wèn)這不是很簡(jiǎn)單嗎？還需要你來(lái)說(shuō)嗎？?jī)删浯a搞定的事

確實(shí)，如果你只是做簡(jiǎn)單的數(shù)據(jù)傳遞是很簡(jiǎn)單

但是，回到最上面說(shuō)的那個(gè)問(wèn)題，如果頁(yè)面層級(jí)比較多，數(shù)據(jù)比較多且復(fù)雜的時(shí)候，你會(huì)抓狂，因?yàn)閣x.navigateTo 的url自動(dòng)是String類(lèi)型，也就是說(shuō)你不能直接傳遞對(duì)象，如果數(shù)據(jù)很多的話，會(huì)是一件很痛苦的事

1. wx.navigateTo({
2. url: "page?productId=1&count=2&name=zhangzy&phone=13488888888&address=xxx"
3. });

代碼可讀性極差而且非常繁瑣，萬(wàn)一那個(gè)字段忘記拼進(jìn)去，很容易出bug

所以，我們必須要做改變，需要優(yōu)化

結(jié)合上篇文章《返回上級(jí)頁(yè)面并傳遞數(shù)據(jù)》封裝另外一個(gè)大同小異的方法

1. class Router {
2.  
3. navigateTo(obj) {
4. wx.navigateTo({
5. url: obj.url,
6. success: function (res) {
7. // success
8. obj.success && obj.success(res);
9. if (obj.data) {
10. setTimeout(() => {
11. let pages = getCurrentPages()
12. let curPage = pages[pages.length - 1];
13. if(curPage.startPageForData) {
14. curPage.startPageForData(obj.data);
15. } else {
16. curPage.setData(obj.data);
17. }
18. }, 1000);
19.  
20. }
21. },
22. fail: function (err) {
23. // fail
24. obj.fail && obj.fail(res);
25. },
26. complete: function () {
27. // complete
28. obj.complete && obj.complete();
29. }
30. });
31.  
32. }
33. }
34.  
35. Router = new Router();
36. module.exports = Router;

實(shí)際上還是基于微信提供的wx.navigateTo接口，在跳轉(zhuǎn)成功之后，我們獲取頁(yè)面棧里面最上層的一個(gè)，也就是最新打開(kāi)的那個(gè)頁(yè)面，從而進(jìn)行數(shù)據(jù)綁定或是執(zhí)行對(duì)應(yīng)的startPageForData方法，上面我們加了1000毫秒的延時(shí)，主要是當(dāng)頁(yè)面跳轉(zhuǎn)之后，可能沒(méi)那么快注冊(cè)的棧里面，不延時(shí)可能獲取的還是之前頁(yè)面數(shù)