一:復(fù)雜數(shù)據(jù)的傳遞頁面跳轉(zhuǎn)進行數(shù)據(jù)傳遞是一個必不可少的功能,有很多應(yīng)用場景需要使用比如買商品的流程是“選擇商品” - “購物車” - “物流信息” - “確認訂單”,所以在這幾個不同 ...
一:復(fù)雜數(shù)據(jù)的傳遞
頁面跳轉(zhuǎn)進行數(shù)據(jù)傳遞是一個必不可少的功能,有很多應(yīng)用場景需要使用
比如買商品的流程是“選擇商品” -> “購物車” -> “物流信息” -> “確認訂單”,所以在這幾個不同頁面進行跳轉(zhuǎn)的時候,相應(yīng)的數(shù)據(jù)也需要傳遞下去
在android中,我們可以用Intent 來進行數(shù)據(jù)的傳遞,新界面通過getIntent來進行獲取
在IOS中,一般是通過controller 的屬性來進行傳值
在React-Native中,可以在navigator.push 方法傳遞對象
上面三種進行數(shù)據(jù)的傳遞都很簡單,而且也很方法。
而在小程序中,我們可以看到,頁面跳轉(zhuǎn)和傳遞數(shù)據(jù)是通過
代碼實現(xiàn)
wx.navigateTo({
url: 'page?a=1&b=2',
success: function (res) {
// success
},
fail: function (err) {
// fail
},
complete: function () {
// complete
}
});
他是通過url字段來控制跳轉(zhuǎn)的頁面,同時路徑“?”后面的表示傳遞的參數(shù),這跟http的GET請求傳參一致
在新頁面獲取參數(shù)信息也很簡單
Page({
data: {},
onLoad: function(options) {
console.log(options)
}
});
可以直接在每個頁面的onLoad 回調(diào)中來進行獲取。
看了上面的代碼,你會疑問這不是很簡單嗎?還需要你來說嗎?兩句代碼搞定的事
確實,如果你只是做簡單的數(shù)據(jù)傳遞是很簡單
但是,回到最上面說的那個問題,如果頁面層級比較多,數(shù)據(jù)比較多且復(fù)雜的時候,你會抓狂,因為wx.navigateTo 的url自動是String類型,也就是說你不能直接傳遞對象,如果數(shù)據(jù)很多的話,會是一件很痛苦的事
wx.navigateTo({
url: "page?productId=1&count=2&name=zhangzy&phone=13488888888&address=xxx"
});
代碼可讀性極差而且非常繁瑣,萬一那個字段忘記拼進去,很容易出bug
所以,我們必須要做改變,需要優(yōu)化
結(jié)合上篇文章《返回上級頁面并傳遞數(shù)據(jù)》封裝另外一個大同小異的方法
class Router {
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 = new Router();
module.exports = Router;
實際上還是基于微信提供的wx.navigateTo接口,在跳轉(zhuǎn)成功之后,我們獲取頁面棧里面最上層的一個,也就是最新打開的那個頁面,從而進行數(shù)據(jù)綁定或是執(zhí)行對應(yīng)的startPageForData方法,上面我們加了1000毫秒的延時,主要是當(dāng)頁面跳轉(zhuǎn)之后,可能沒那么快注冊的棧里面,不延時可能獲取的還是之前頁面數(shù)
工作日 8:30-12:00 14:30-18:00
周六及部分節(jié)假日提供值班服務(wù)