H5移動端安卓機input上傳附件點擊無反應問題及其他安卓與webview兼容性問題、

H5移動端安卓機input上傳附件點擊無反應問題及其他安卓兼容性問題

一、問題

最近在趕項目的時候,做了H5並嵌入webview中。發現點擊H5中 input type=“file” 標籤 不能打開android資源管理器。

// An highlighted block
<input type="file" accept="image/*;capture=camera">

IOS手機中,可以直接呼起相機和相冊;
安卓手機則不行,部分瀏覽器沒問題;
在這裏插入圖片描述

二、查找原因

網上一查發現有許多開發人員也遇到過這個問題。
在這裏插入圖片描述
我參考許多資料,幾乎可以判斷是安卓與小程序webview的兼容性,參考許多人的處理方法都不起作用。
正當我尋找各種解決兼容性問題的辦法的時候,發現官方早已在2019年10月份已經修復了這個兼容性問題。網上的遇到同款問題也無一例外的是2019/10月份之前的。
在這裏插入圖片描述
我想既然不是兼容性,那麼問題就好解決了。
初步懷疑的問題有
1:樣式層級問題
2:瀏覽器默認事件、冒泡事件等等。。
3:安卓機型版本問題
4:組件問題
逐一排查外加處理,都還是沒有解決問題










實在是沒有辦法,於是找了其他大佬幫忙看看原因
問題的轉折點來了
大佬在他那邊本地用安卓是可以打開的!!

我在本地試了一下,果然bug瞬間解決。(之前一直用ip地址測試環境去測試)
估計是公司ip內網的限制,隨後更換外網IP,再發布果然好起來了

再往深一瞭解,原來是內網IP地址和微信webview的衝突
換個外網IP地址或者早點上個域名就不會遇到這麼多事

三、其他兼容性問題

①安卓端在小程序webview跳轉H5當中,URL參數是無法傳送中文的

在開發過程中,我用PC端、ios端,URL參數都是可以傳中文的,所有並沒有特意去做URL中文轉碼,直到測試投訴安卓端URL中文帶不過來
PC端、IOS端都會對URL中文自動轉碼,但是安卓端不會,所以該轉碼就得轉碼,不能偷懶

轉碼的方式有兩種
一種是直接對整個URL進行轉碼,二是單獨對中文參數轉碼

//小程序webview跳轉前對URL或中文參數進行兩次轉碼
encodeURI(encodeURI(URL))
//H5接收參數解碼
decodeURI(URL)
//其他轉碼解碼方式:
//只針對文本編碼 encodeURI() 
//只針對文本解碼 decodeURI()
//針對文本和特殊字符的編碼  encodeURIComponent()
//針對文本和特殊字符的解碼  decodeURIComponent()

四、總結

如果你也遇到這個問題,同時用的也是IP地址,不妨試試換個上個域名或者用本地地址測試。
雖然這次遇到的“BUG”虛驚一場,但是在排查與解決的過程中,還是意外收穫到了許多其他的知識點。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章