摘要：顺便补充一句，微信官方提供的判断依旧不全面，最新出来的苹果手机还没有完全支持相关的坑可以在官方社区的问答中找到。
首次在这里写点东西，还请各位大佬担待点。
摘要：
昨天的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 。官方的文档向来都这样，要么不给案例，要么就简短的写下。现在的机型那么多，鬼知道怎么判断啊！于是我又在网上搜索后找到了现成的判断小程序是用安卓还是IOS打开的方法，原文地址：blog.csdn.net/niesiyuan000/article/details/80325988。
顺便补充一句，微信官方提供的判断依旧不全面，最新出来的苹果手机还没有完全支持！相关的坑可以在官方社区的问答中找到。坑！坑！坑！坑！坑！坑！坑！
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/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...
摘要：有个说法是微信浏览器移动端。微信上传图片，在苹果和安卓系统下的小区别。微信分享链接不支持微信分享接口不支持传递。 有个说法是微信浏览器==移动端IE6。分享一下开发中遇到的坑 1.在自己的公众号能实现支付，从别的公众号进来不能支付。 既然自己的公众号能支付了，那么很有可能是跳转过来的公众号的url出现的问题。正确的：htt P://3w.yijia.com/wechat/pay/？id...
阅读 1917·2021-11-22 15:24
阅读 2077·2021-09-09 11:53
阅读 2832·2021-09-04 16:40
阅读 1495·2019-08-30 15:52
阅读 3243·2019-08-29 13:47
阅读 2605·2019-08-26 17:40
阅读 1314·2019-08-26 13:24
阅读 2138·2019-08-26 12:01
