資訊專欄INFORMATION COLUMN
摘要：順便補充一句，微信官方提供的判斷依舊不全面，最新出來的蘋果手機還沒有完全支持相關的坑可以在官方社區的問答中找到。
首次在這里寫點東西，還請各位大佬擔待點。
摘要：
昨天的placeholder-class只是希望各位看官注意，而今天的textarea就絕對是一個超級大坑！而且如果看官手中沒有蘋果手機測試的話，這個可就真的是個坑了！為啥？難道要等到用戶向你反饋你們產品有bug？？？......
上一篇的《微信小程序從入坑到放棄之坑七：input組件的占位符placeholder》，沒啥大坑，而這篇的textarea可就不一樣了！這絕對是一個超大的Bug?。?！
在上一節的設計稿中，詳細地址那塊兒就是一個textarea組件。如圖：
其他無關的就不說了，我們直接進入正題。
一、textarea在模擬器、安卓和蘋果中的效果為了便于觀察textarea組件的尺寸范圍，我們給textarea設置一個背景色。如圖：
（一個帶背景色的textarea組件示例代碼一個帶背景色的textarea組件示例代碼）
然后保存后看下模擬器、安卓手機和蘋果手機中的效果吧。如圖：
（textarea在模擬器和安卓及蘋果手機上的效果textarea在模擬器和安卓及蘋果手機上的效果）
看到區別了嗎？如果沒有，再來張大圖。如圖：
（textarea在蘋果手機上距離頂部有空隙textarea在蘋果手機上距離頂部有空隙）
對于有前端基礎的看官來說，一眼就知道這是什么原因。是的，按照正常邏輯，這個空隙就是由padding引起的。
2.1、wxml代碼代碼寫完了，我們再用蘋果手機看下效果。如圖：
（微信小程序里的textarea設置padding為0時在蘋果手機中沒有生效）
微信小程序里的textarea設置padding為0時在蘋果手機中沒有生效可以看到，此時這個padding:0在蘋果手機上并沒有生效！
奇了怪了，難道textarea不支持padding嗎？于是，我又將padding的值修改成40px，此時在安卓手機上的效果如下：
（設置padding為40時在安卓手機中有效設置padding為40時在安卓手機中有效）
我們可以看到，此時安卓手機上是有效的，再來看看蘋果手機吧，如圖：
（設置padding為40時在蘋果手機中也有效）
咦，怎么又有效果了？！
那這個蘋果手機到底支持不支持微信小程序里的textarea組件的padding屬性呢？要說不支持吧，修改成40時也有效，要說支持吧，改成0又無效！這就有點坑爹了！
三、微信小程序里的textarea確實有bug為了便于測試，這回我們直接測一組吧。效果如圖：
（測試發現在微信小程序中，蘋果手機對padding的值有臨界點）
看到了嗎？當值小于或等于0時，在蘋果手機中壓根就沒有任何反應！雖然正常的網頁中padding的值是不能為負的！但此時連0!important都無能為力！??！
四、此坑有什么影響可能有些看官還不知道這坑有什么影響，拿我們的設計稿來說。我們寫的頁面總得與設計稿一致吧！那些現在問題就來了，這個textarea組件在安卓和蘋果上的表現都不一樣，要想在兩種手機上展現效果一樣，必須得對蘋果多帶帶處理才行！否則，我們在安卓上布局是好的，到了蘋果手機上面，就已經錯位了！所以，這就是個超級大坑！要不是因為藝靈我用二手的iphone 6s測試，這個bug估計還不知道什么時候才能知道呢！如果是等到用戶反饋才知道，這可是件多么坑爹的事情?。?！
五、微信小程序中textarea內邊距的坑通吃iphone各版本看官可能會說：“都什么年代了，藝靈你還用個破6s來測試！”
行，為了驗證此bug并非只是iphone 6s才有，于是我又召喚了我的小伙伴們。聊天如圖：
（微信小程序中textarea的內邊距bug在iphone各版本上都存在）
這回就問你服不服，iphone X，壕不？X都陣亡了?。?！
六、如何解決？搞過微信小程序的看官都知道，在小程序里面不像正常網頁那樣可以隨便寫js，在這里一切都要受限制！
微信小程序官方也有對應的文檔，文檔地址：
developers.weixin.qq.com/miniprogram/dev/api/system/system-info/wx.getSystemInfo.html?search-key=wx.getSystemInfo 。官方的文檔向來都這樣，要么不給案例，要么就簡短的寫下?，F在的機型那么多，鬼知道怎么判斷啊！于是我又在網上搜索后找到了現成的判斷小程序是用安卓還是IOS打開的方法，原文地址：blog.csdn.net/niesiyuan000/article/details/80325988。
順便補充一句，微信官方提供的判斷依舊不全面，最新出來的蘋果手機還沒有完全支持！相關的坑可以在官方社區的問答中找到?？?！坑！坑！坑！坑！坑！坑！
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/108778.html
摘要：有個說法是微信瀏覽器移動端。微信上傳圖片，在蘋果和安卓系統下的小區別。微信分享鏈接不支持微信分享接口不支持傳遞。 有個說法是微信瀏覽器==移動端IE6。分享一下開發中遇到的坑 1.在自己的公眾號能實現支付，從別的公眾號進來不能支付。 既然自己的公眾號能支付了，那么很有可能是跳轉過來的公眾號的url出現的問題。正確的：htt P://3w.yijia.com/wechat/pay/？id...
摘要：有個說法是微信瀏覽器移動端。微信上傳圖片，在蘋果和安卓系統下的小區別。微信分享鏈接不支持微信分享接口不支持傳遞。 有個說法是微信瀏覽器==移動端IE6。分享一下開發中遇到的坑 1.在自己的公眾號能實現支付，從別的公眾號進來不能支付。 既然自己的公眾號能支付了，那么很有可能是跳轉過來的公眾號的url出現的問題。正確的：htt P://3w.yijia.com/wechat/pay/？id...
摘要：有個說法是微信瀏覽器移動端。微信上傳圖片，在蘋果和安卓系統下的小區別。微信分享鏈接不支持微信分享接口不支持傳遞。 有個說法是微信瀏覽器==移動端IE6。分享一下開發中遇到的坑 1.在自己的公眾號能實現支付，從別的公眾號進來不能支付。 既然自己的公眾號能支付了，那么很有可能是跳轉過來的公眾號的url出現的問題。正確的：htt P://3w.yijia.com/wechat/pay/？id...
摘要：有個說法是微信瀏覽器移動端。微信上傳圖片，在蘋果和安卓系統下的小區別。微信分享鏈接不支持微信分享接口不支持傳遞。 有個說法是微信瀏覽器==移動端IE6。分享一下開發中遇到的坑 1.在自己的公眾號能實現支付，從別的公眾號進來不能支付。 既然自己的公眾號能支付了，那么很有可能是跳轉過來的公眾號的url出現的問題。正確的：htt P://3w.yijia.com/wechat/pay/？id...
閱讀 2122·2021-11-22 15:24
閱讀 2410·2021-09-09 11:53
閱讀 3037·2021-09-04 16:40
閱讀 1636·2019-08-30 15:52
閱讀 3354·2019-08-29 13:47
閱讀 2735·2019-08-26 17:40
閱讀 1541·2019-08-26 13:24
閱讀 2245·2019-08-26 12:01
