微信小程序踩坑记录 ------- 解决原生表单组件 textarea 的 placeholder在真机上出现偏移的问题

如果我们拿到的设计图是标题和输入框文字左右对齐的话，这种时候使用正常的对齐样式，等到真机上进行调试的时候就会发现 Android 和 iOS 的表现形式不一样，textarea 的 placeholder 中的文字总是向下一些的，让人很是头疼，出现这种问题之后多出查找相关资料，最终得出结论：

由于微信小程序的 textarea 组件在 Android 和 iOS 中默认样式不同，在 iOS 中会有默认的
padding，且无法置 0。 同时 placeholder-style 对 vertical-align、line-height
等大量css属性都不生效。 这一系列的问题导致了 placeholder 在真机上可能会出现偏移。

既然知道原因了，博主对于出现这种问题的解决思路就是通过 js 来判断终端型号，动态给 textarea 的 placeholder 样式最数据处理。

一、通过微信封装的小程序API getSystemInfo 来获取用户打开小程序应用的终端型号

wx.getSystemInfo({
	success: (res) => {
	  console.log(res.system)
	  var marTop;
	  if (res.system.indexOf("iOS") != -1) {
	    marTop = '-12rpx';
	  } else {
	    marTop = 0
	  }
	  that.setData({
	    marTop: marTop
	  })
	}
});

如果是iOS的话就设置向上偏移 -12rpx，否则就不进行偏移
二、在wxml 的 textarea 的组件上设置动态的margin-top样式

<textarea class="textarea" value="{{introduce}}" name="introduce" style="margin-top: {{marTop}}" hidden="{{hiddenTextarea}}" placeholder="请输入店铺简介" placeholder-class="textarea-placeholder" bindinput="inputTextarea" maxlength="200"></textarea>

这样就可以比较完美的解决这个问题了，如果其他小伙伴有更好的方法欢迎留言。