關於H5與小程式路由引數的那些事兒

高山低谷發表於2020-03-24
H5路由

最近做的一個微信公眾號裡面，需要與後端聯調做微信與支付寶靜默授權，先通過判斷路由引數是不是從後端重定向過來的連結，再請求後端介面。直接看程式碼：

關於H5與小程式路由引數的那些事兒

arrUrl 是一個切割過來的路由地址集合； 直接這樣請求 在安卓機上是沒問題的，但是在ios上這樣傳參，後端接收到的frontUrlPre 和frontUrlSuf 這兩個引數中均帶有一連串的 amp 這種符號 。

想了一下 應該是ios這種手機對一些路由引數資訊可能比較敏感，加了一些識別符號，剛開始對 arrUrl[0]和arrUrl[1],做了encodeURI 處理 後端再decodeURI 解析回來，發現還是帶有 amp 這玩意兒，然後認真看了下 encodeURI 對特殊含義的符號 “; / ? : @ & = + $ , # ” 這些是不會編碼處理的，而我的兩個引數中可能帶有一些這樣的特殊字元，所以後面用 encodeURIComponent()試了下,

它與encodeURI()的區別是，它用於對URL的組成部分進行個別編碼，而不用於對整個URL進行編碼。
這些特殊符號能夠在encodeURIComponent被轉義，
encodeURIComponent()相比encodeURI()在編碼時要更加徹底。它的對應解碼函式為decodeURIComponent()。
複製程式碼

關於H5與小程式路由引數的那些事兒
這樣搞了下沒問題了

同樣在小程式路由傳參的過程中，遇到一個問題，剛開始

 wx.navigateTo({
     url: '../refund/ticket-refund-reason?orderParam=' + JSON.stringify(orderParam)
});
複製程式碼

orderParam 這裡是一個物件 ,並且物件裡面包含的引數還蠻多

然後我在下一個頁面中通過JSON.parse(options.orderParam) 賦值給初始化物件的時候，發現有些值丟失，根本沒法賦值成功， 報錯資訊：

Unexpected end of JSON input;at pages/moment_detail/moment_detail page lifeCycleMethod onLoad function
SyntaxError: Unexpected end of JSON input
複製程式碼

研究了下 原因是：

JSON.parse無法識別某些url或者訊息內容中的特殊字元，所以報錯

最後的解決辦法是：

在JSON.stringify()之後將變數使用encodeURIComponent函式處理，encodeURIComponent()
函式可把字串作為 URI 元件進行編碼。在目標頁面接收時用decodeURIComponent對URI
元件進行解碼，後通過JSON.parse()將變數還原。
複製程式碼
  wx.navigateTo({
   url: '../refund/ticket-refund-reason?orderParam=' + encodeURIComponent(JSON.stringify(orderParam))
   });
複製程式碼

然後在接收頁面：

onLoad: function (options) { 
	var parmas = decodeURIComponent((options.orderParam));
	console.log(JSON.parse(parmas));
},

複製程式碼

總結一點就是：前端在傳遞一些引數的時候如果出現一些引數丟失問題，或者出現接收引數報錯的時候，試著對相關引數做編碼處理，有些問題莫名不知所措的時候，可以先列印出來看下。

相關文章