微信小程序踩坑記錄 ------- 解決原生表單組件 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>

這樣就可以比較完美的解決這個問題了，如果其他小夥伴有更好的方法歡迎留言。