解决小程序textarea在安卓和ios上padding不一的问题

1.做小程序表单的时候上下要对齐一个文本域和input输入框，没想到小程序的textarea在android和ios上差距这么明显，如下图，本来之前遇到这个问题的时候，设置了margin和padding之后就解决了，但是在小程序上发现设置padding和margin设置为0也没用，还是去不掉android和ios表现不一的问题，于是研究了一番还是给收拾好了哪氏，下面先上问题图：

从上面两图可以看出正缓扒来这个文本域差别也太大了，这效果要是说一样的话也太牵强了，于是调整了下margin、padding的，发现并没有什么用，而举昌且这个textarea的间距在ios上大的有点离谱了，即使android和ios不要求一样，但是单一个ios上面的间距也是明显的大，难看，好，下面写下自己的解决办法，先上两张效果图 ：

下面写实现过程：

js文件:

Page({

  data: {

    detail:false,

  },

  onLoad: function (options) {

    var phone = wx.getSystemInfoSync()  //调用方法获取机型

    var that = this

    if (phone.platform == 'ios') {

      that.setData({

        detail: true

      })

    } else if (phone.platform == 'android') {

      that.setData({

        detail: false

      })

    }

  },

  onReady: function () {

  },

  onShow: function () {

  },

  onHide: function () {

  },

  onUnload: function () {

  },

  onPullDownRefresh: function () {

  },

  onReachBottom: function () {

  },

  onShareAppMessage: function () {

  }

})

wxml文件：

<view class='xingdongDescript'>

<view class='xingdongNameBox'><view>行动名称</view><input placeholder='请输入' /></view>

<view class='xingdongjieshaoBox'><view class='xingdongjieshao'>行动介绍</view><view class="{{detail ? 'iostextarea'  : 'androidtextarea'}}"><textarea placeholder='请输入' /></view></view></view>

wxss文件：

.xingdongDescript{

  background: white

  padding: 0 0 0 30rpx

  box-sizing: border-box

  width: 100%

  height: 285rpx

}

.xingdongNameBox{

  width: 100%

  height: 88rpx

  overflow: hidden

  padding: 0 20rpx 0 0

  box-sizing: border-box

  border-bottom: 1rpx solid #E5E5E5

}

.xingdongNameBox view{

  width: 25%

  height: 88rpx

  line-height: 88rpx

  float: left

  color: #000000

  font-size: 34rpx

}

.xingdongNameBox input{

  width: 75%

  height: 88rpx

  line-height: normal

  float: left

  font-size: 34rpx

  color: #000000

}

.xingdongjieshaoBox{

  width: 100%

  height: 197rpx

  overflow: hidden

  padding: 0 20rpx 0 0

  box-sizing: border-box

  position: relative

}

.xingdongjieshaoBox .xingdongjieshao{

  width: 25%

  height: 88rpx

  line-height: 88rpx

  float: left

  color: #000000

  font-size: 34rpx

  position: absolute

  top: 0

  left: 0

}

.iostextarea{

  position: absolute

  left: 24.3%

  top: 1rpx

  margin-left: -11rpx

  width: 73%

  height: 197rpx

}

.iostextarea textarea{

  position: absolute

  width: 100%

  height: 100%

  font-size: 34rpx

}

.androidtextarea{

  position: absolute

  left: 24.3%

  width: 73%

  height: 197rpx

}

.androidtextarea textarea{

  width: 100%

  height: 197rpx

  float: left

  padding: 22rpx 0 0 0

  box-sizing: border-box

  font-size: 34rpx

}

至此，实现想要的效果。

float元素务必指定width属性。

float元素务必指定width属性，很多浏览器在显示未指定width的float元素时会有bug。所以不管float元升稿素的内容如何，一定要为其指定氏乱width属性。另外指定元素时尽量使用em而不是px做单位。float元素不能指定marginQ和padding等属性在显示指定了margini和paddingl的float元素时有bug，也可以使用hack方法为lE指定特别的值。float元素的宽度之和要小于100%。如果float元素的宽度之和正好是100%，某些古老的浏览器将吵核孝不能正常显示。因此请保证宽度之和小于99%。是否重设了默认的样式？某些属性如margin，padding等，不同浏览器会有不同的解释。因此最好在开发前首先将全体的margin，padding设置为O，列表样式设置为none等。检查HTML元素是否有拼写错误，是否忘记结束标记。

通过wx.getUserInfo获取用户的openId 和unionId，需要对接口返回的加密数据( encryptedData )进行对称解密。

/**

    * 功能描述: <br>

    * 〈功能详细描述〉

    *

*@paramargs

*@see[相关类/方法](可逗穗兄选)

*@since[产品/模块版本](可选)

    */

publicstaticvoidmain(String[] args){

String encryptedData ="********......*******"

String sessionKey ="********......*******"

String iv ="9btKSYjvtGMGpknPpjS2Ag=="

        JSONObject jsonObject = getUserInfo(encryptedData, sessionKey, iv)

System.out.println(jsonObject.getString("unionId"))

        System.out.println(jsonObject.toJSONString())

    }

结果运行报错：

javax.crypto.BadPaddingException: pad block corrupted

at org.bouncycastle.jcajce.provider.symmetric.util.BaseBlockCipher$BufferedGenericBlockCipher.doFinal(Unknown Source)

at org.bouncycastle.jcajce.provider.symmetric.util.BaseBlockCipher.engineDoFinal(Unknown Source)

at javax.crypto.Cipher.doFinal(Cipher.java:2087)

at com.saic.ebiz.service.util.AESUtils.getUserInfo(AESUtils.java:62)

at com.saic.ebiz.service.util.AESUtils.main(AESUtils.java:86)

Exception in thread"main"java.lang.NullPointerException

at com.saic.ebiz.service.util.AESUtils.main(AESUtils.java:87)

查询原因，有可能是我族拦的wx.login在wx.getUserInfo之后调的原因，细究一下

我们通过wx.login获得用户授权码code，接下来我们用code以及appid和appSecret请求微信

https://api.weixin.qq.com/sns/jscode2session?appid=APPID&secret=SECRET&js_code=JSCODE&grant_type=authorization_code

获取session_key，而sessionKey又是解密encryptedData的密钥，所以一旦我们的wx.login在wx.getUserInfo之后获取，我们redis中存储的sessionKey绝对不是当前获取encryptedData的密钥。所以更改小程序请求顺序，每次请求wx.getUserInfo之前先请求wx.login，同时生成sessionKey放入缓存。而后需要解密的时候就可以正常解密了

特别注意： 让前端看一下你的请求顺序山袭是不是错了

---