移動端Android跟ios相容性問題,反人類!!!

你比从前快乐KX發表於2024-09-04

一、查詢引數編碼問題

我們在日常開發中,有時候會遇到拼接引數特別多的情況,那麼就會導致一行程式碼特別長。那麼為了美觀呢,有的同學會進行換行處理,如下程式碼:


可以看到我紅色框出來的地方就是經過了手動的回車導致產生的回車換行符。這麼做乍一看也挺正常是吧,但其實對於JavaScript來說,這是會被保留的。
我們知道,當使用uni.request或其他HTTP客戶端傳送請求時,瀏覽器或客戶端會對URL後面的查詢引數進行編碼,也就是問號後面那些東西,於是我們可以自己將編碼後的東西列印出來看看,如下:

可以看到我們編碼後多了很多%0A%09的東西,而這個其實就是我們的回車換行符,大家可以去線上編解碼網站看看解碼後的東西。

我把這種情況分別執行在瀏覽器端、Android端以及ios端,如下:

H5

iPhone

Android

可以看到,即使是這種帶入了回車換行符的情況下,在H5以及Android端都是可以正常傳送請求的,而ios就沒那麼幸運了,ios處理比較嚴格,也可以說是反人類,它不會去處理這種東西,一起給到後端,導致引數錯誤。

那麼解決辦法呢有很多種,比如:

透過設定開啟Hbuilder X的自動換行,這樣的話就不會改變程式碼並且也不影響程式碼閱讀;
另外也可以透過 ‘+’ 號手動拼接各個引數的寫法,比較麻煩;
再不濟也可以手動將換行符換成空格也可以。

我這邊選擇開啟自動換行,如下:

在編輯器中看的效果就會根據你的視口寬度自動換行,如下:

二、日期使用問題

在日期的使用上,如果傳入的字串非標準格式(主要就是得用‘-’分割),iso情況下會出現錯誤。如下程式碼:

const date = '2024/8'
let year = new Date(date).getFullYear(),
	month = new Date(date).getMonth() + 1
console.log('獲取到的年份:', year)
console.log('獲取到的月份:', month)

列印結果:

Android

H5

IOS

可以看到當在ios情況下時,獲取到的年月都是NaN,那麼對後續用到這兩個變數的地方都會是意想之外的結果。
所以在使用時要確保傳入的值是標準日期格式,如果確保不了就做下格式化處理,如下:

const getMonthStr = (date) => {
	let year = date.getFullYear();
	let month = (date.getMonth() + 1).toString().padStart(2, '0');//這裡做下補0操作,避免個位數月份的情況
	return `${year}-${month}`;
};

相關文章