weex使用navigator進(jìn)行頁面跳轉(zhuǎn),這種方式是使用的url傳參,剛開始使用的時候一直都是用下面這種方法傳值:
navigator.push({
url: config.getWeexIp() + '/app/main.js?account=123456&name=jelly'
})
url中?后面便是攜帶的參數(shù),ccount=123456&name=jelly就是代表兩個參數(shù),一個account,一個name。
在跳轉(zhuǎn)后的頁面通過獲取url地址,便可以得到這兩個值。但和android不同的是,在ios系統(tǒng)中,是不支持中文的,也就是說如果url是'/app/main.js?account=123456&name=杰尼',便會獲取不到name數(shù)據(jù),所以在最開始拼接url時需要encodeURIComponent方法轉(zhuǎn)碼,在拿到數(shù)據(jù)后在使用decodeURIComponent方法解碼拿到正確的數(shù)據(jù)。
上面這種方法在需要傳遞的數(shù)據(jù)較少時很方便,但是實(shí)際開發(fā)中,數(shù)據(jù)往往都是一個json對象,需要傳遞的參數(shù)也很多,這樣一來,url的拼接往往會變得很繁瑣,因?yàn)樾枰獙son對象中的數(shù)據(jù)單獨(dú)一個一個提取出來傳遞.例:
假如有一個json對象格式如下:
data:{
account : 123456,
name : 杰尼,
}
url就會變成:
'/app/main.js?account='+data.account+'&name='+ encodeURIComponent(data.name)
獲取到url地址后需要執(zhí)行下面兩條語句拿到數(shù)據(jù):
account=url.account
name=decodeURIComponent(url.name) //解碼
這只是兩條數(shù)據(jù),如果數(shù)據(jù)有十條以上,代碼會變得很冗余,出錯概率也會變大。
在寫項(xiàng)目《XXXX》時開始思考能不能和原生Android一樣,將一整個對象打包傳遞。之后,我找到了兩個函數(shù)方法:
JSON.stringify() //將對象轉(zhuǎn)換為json字符串
JSON.parse() //將json字符串轉(zhuǎn)換為對象
雖然url不支持拼接對象,但是支持字符串啊,所以我可以把url寫成:
'/app/main.js?data='+JSON.stringify(data)
獲取數(shù)據(jù)時:
data=JSON.parse(url.data)
傳遞數(shù)據(jù)時,把對象轉(zhuǎn)成json字符串傳過去,在第二個頁面獲取到j(luò)son字符串后,再轉(zhuǎn)成對象,這樣就完成了對象的傳遞。
需要使用account數(shù)據(jù)時,可以直接充data對象中拿:data.account
這種方法,代碼量很少,同時也可以減少出錯的概率,因?yàn)槿コ顺槿ο髷?shù)據(jù)進(jìn)行傳遞的步驟,避免出現(xiàn)參數(shù)名編寫錯誤等bug。
但是僅僅這樣也還不行,因?yàn)閷ο筠D(zhuǎn)成的json字符串中也是有可能出現(xiàn)中文的,比如data.name這個數(shù)據(jù)。所以同樣需要做轉(zhuǎn)碼解碼處理,最終的url:
'/app/main.js?data='+encodeURIComponent(JSON.stringify(data))
獲取對象數(shù)據(jù):
data= decodeURIComponent(JSON.parse(url.data))
整個傳參過程就這兩行核心代碼。