微信小程序從入坑到放棄之坑八:textarea在蘋果手機中的大Bug

首次在這裏寫點東西,還請各位大佬擔待點。

摘要:
昨天的placeholder-class只是希望各位看官注意,而今天的textarea就絕對是一個超級大坑!而且如果看官手中沒有蘋果手機測試的話,這個可就真的是個坑了!爲啥?難道要等到用戶向你反饋你們產品有bug???......
上一篇的《微信小程序從入坑到放棄之坑七:input組件的佔位符placeholder》,沒啥大坑,而這篇的textarea可就不一樣了!這絕對是一個超大的Bug!!!

在上一節的設計稿中,詳細地址那塊兒就是一個textarea組件。如圖:圖片描述

其他無關的就不說了,我們直接進入正題。

一、textarea在模擬器、安卓和蘋果中的效果

爲了便於觀察textarea組件的尺寸範圍,我們給textarea設置一個背景色。如圖:O1CN01NfwGzR1rapSOGbEwT_!!759415648.png
(一個帶背景色的textarea組件示例代碼一個帶背景色的textarea組件示例代碼)
然後保存後看下模擬器、安卓手機和蘋果手機中的效果吧。如圖:O1CN01IXRDIX1rapSQ45Kmv_!!759415648.jpg
(textarea在模擬器和安卓及蘋果手機上的效果textarea在模擬器和安卓及蘋果手機上的效果)

看到區別了嗎?如果沒有,再來張大圖。如圖:O1CN01QkmThs1rapSNf2D5s_!!759415648.png
(textarea在蘋果手機上距離頂部有空隙textarea在蘋果手機上距離頂部有空隙)

二、不就是個padding嗎?!

對於有前端基礎的看官來說,一眼就知道這是什麼原因。是的,按照正常邏輯,這個空隙就是由padding引起的。

2.1、wxml代碼

<textarea style="background:#666;padding:0" value="加padding就有用了嗎?"></textarea>

代碼寫完了,我們再用蘋果手機看下效果。如圖:O1CN01mEovUD1rapSRiJsBG_!!759415648.jpg
(微信小程序裏的textarea設置padding爲0時在蘋果手機中沒有生效)
微信小程序裏的textarea設置padding爲0時在蘋果手機中沒有生效可以看到,此時這個padding:0在蘋果手機上並沒有生效!

奇了怪了,難道textarea不支持padding嗎?於是,我又將padding的值修改成40px,此時在安卓手機上的效果如下:O1CN0196giFj1rapSQ45Ox3_!!759415648.jpg
(設置padding爲40時在安卓手機中有效設置padding爲40時在安卓手機中有效)
我們可以看到,此時安卓手機上是有效的,再來看看蘋果手機吧,如圖:O1CN01rPEHEI1rapSJMeHMM_!!759415648.jpg
(設置padding爲40時在蘋果手機中也有效)
咦,怎麼又有效果了?!

那這個蘋果手機到底支持不支持微信小程序裏的textarea組件的padding屬性呢?要說不支持吧,修改成40時也有效,要說支持吧,改成0又無效!這就有點坑爹了!

三、微信小程序裏的textarea確實有bug

爲了便於測試,這回我們直接測一組吧。效果如圖:O1CN01iHTZNc1rapSQ44b4r_!!759415648.jpg
(測試發現在微信小程序中,蘋果手機對padding的值有臨界點)

看到了嗎?當值小於或等於0時,在蘋果手機中壓根就沒有任何反應!雖然正常的網頁中padding的值是不能爲負的!但此時連0!important都無能爲力!!!

四、此坑有什麼影響

可能有些看官還不知道這坑有什麼影響,拿我們的設計稿來說。我們寫的頁面總得與設計稿一致吧!那些現在問題就來了,這個textarea組件在安卓和蘋果上的表現都不一樣,要想在兩種手機上展現效果一樣,必須得對蘋果單獨處理才行!否則,我們在安卓上佈局是好的,到了蘋果手機上面,就已經錯位了!所以,這就是個超級大坑!要不是因爲藝靈我用二手的iphone 6s測試,這個bug估計還不知道什麼時候才能知道呢!如果是等到用戶反饋才知道,這可是件多麼坑爹的事情!!!

五、微信小程序中textarea內邊距的坑通吃iphone各版本

看官可能會說:“都什麼年代了,藝靈你還用個破6s來測試!”

行,爲了驗證此bug並非只是iphone 6s纔有,於是我又召喚了我的小夥伴們。聊天如圖:O1CN01KBopfc1rapSQtbLy6_!!759415648.png
(微信小程序中textarea的內邊距bug在iphone各版本上都存在)

這回就問你服不服,iphone X,壕不?X都陣亡了!!!

六、如何解決?

搞過微信小程序的看官都知道,在小程序裏面不像正常網頁那樣可以隨便寫js,在這裏一切都要受限制!

微信小程序官方也有對應的文檔,文檔地址:
developers.weixin.qq.com/miniprogram/dev/api/system/system-info/wx.getSystemInfo.html?search-key=wx.getSystemInfo 。官方的文檔向來都這樣,要麼不給案例,要麼就簡短的寫下。現在的機型那麼多,鬼知道怎麼判斷啊!於是我又在網上搜索後找到了現成的判斷小程序是用安卓還是IOS打開的方法,原文地址:blog.csdn.net/niesiyuan000/article/details/80325988。

順便補充一句,微信官方提供的判斷依舊不全面,最新出來的蘋果手機還沒有完全支持!相關的坑可以在官方社區的問答中找到。坑!坑!坑!坑!坑!坑!坑!

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