uniapp 電商app 實現路由與頁面跳轉url拼接函數封裝

路由與頁面跳轉傳遞數據函數封裝

無論是app 還是 頁面 或者小程序，在頁面跳轉時，很多時候都需要傳遞數據，方便二級頁面進行使用。
uniapp官網中關於路由與頁面跳轉鏈接

官網提供的示例：

適用於簡單的數據傳遞

//在起始頁面跳轉到test.vue頁面並傳遞參數
uni.navigateTo({
    url: 'test?id=1&name=uniapp'
});
// 在test.vue頁面接受參數
export default {
    onLoad: function (option) { //option爲object類型，會序列化上個頁面傳遞的參數
        console.log(option.id); //打印出上個頁面傳遞的參數。
        console.log(option.name); //打印出上個頁面傳遞的參數。
    }
}

適用於對象數據傳遞

<navigator :url="'/pages/test/test?item='+ encodeURIComponent(JSON.stringify(item))"></navigator>
// 在test.vue頁面接受參數
onLoad: function (option) {
    const item = JSON.parse(decodeURIComponent(option.item));
}

如果是對象屬性很多的情況下，傳遞數據會很繁瑣，而且二級頁面中的url拼接會很長，特別是二級頁面需要的數據是傳遞對象中的部分參數時，這個時候，封裝一個對象傳遞的函數尤爲重要。
思路：可以傳遞對象，且表明需要傳遞的是哪些屬性，函數自動執行對象中屬性的挑選進而傳遞。方法實現如下：

export function joinUrlParams(url,params,usedKey = []){
	if(url.indexOf("?") != -1){
		return url
	}
	if(params === null || typeof(params) === "undefined" || typeof(params) !== "object"){
		return url
	}
	let param = ""
	for(var key in params){
		if(params[key] !== "" && typeof(params[key]) !== "undefined" && params[key] !== null){
			if(usedKey.length>0){
				for (var i = 0; i < usedKey.length; i++) {
					if(key == usedKey[i]){
						if(param != ""){
							param += "&"
						}
						param += key + "=" + params[key]
						break;
					}
				}
			}else{
				if(param != ""){
					param += "&"
				}
				param += key + "=" + params[key]
			}
		}
	}
	if(param != ""){
		return url + "?" + param
	}
	return url
}

調用方法

uni.navigateTo({
	url:joinUrlParams("/pages/goods/goods",data,["pictUrl","bannerList","zkFinalPrice"])
});