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”虛驚一場，但是在排查與解決的程序中，還是意外識訓到了許多其他的知識點，
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/246879.html
標籤：其他
上一篇：Android 應用的版本兼容 了解一下（理解 minSdkVersion、targetSdkVersion、maxSdkVersion、compileSdkVersion）