微信小程序 关于控件尺寸动态计算的问题

自定义相机界面，顶部80rpx，底部210rpx，中间剩余高度填充相机视频流view。
实现思路是获取屏幕高度，减去顶部80rpx再减去底部210rpx，结果赋值给相机视频流view的高度。这个高度需要精确计算。（核心代码如下 有删减）

<!--pages/Camera/Camera.wxml-->
<view class="topView">顶部view</view>
<!--视频流控件，高度动态赋值，单位rpx-->
<camera mode="normal" device-position="back" flash="auto" class="previewLayer" style="height:{{preHeight}}rpx;">
</camera>

<view class="bottomView">底部view</view>

<!--pages/Camera/Camera.wxss-->
.previewLayer {
  right: 0rpx;
  position: fixed;
  top: 80rpx;<!--top即为顶部view的高度80-->
  left: 0rpx;
  background-color: gray; 
}

<!--pages/Camera/Camera.js-->
<!--无关代码已省略，只看动态计算控件高度的部分-->
onLoad: function () {
    var that = this;
    wx.getSystemInfo({
      success: function (res) {
        //获取的宽高单位为px，需要先用屏幕宽计算出px和rpx的转化比
        var ratio = 750 / res.windowWidth;
        //打印ratio
        console.log(ratio);
        //将获取的屏幕高度转换成rpx单位，并减去顶部和底部的高度210+80，单位是rpx
        var height = res.windowHeight * ratio - 290;
        //打印高度
        console.log(height);
        //将计算好的视频流height赋值给控件
        that.setData({
          preHeight: height
        });
      }
    });
 }

运行测试发现6p上视频流底部有一条空白。 iPhone6 Plus测试图
又测了其他机型部分有空白，部分完全填充。 iPhone6 测试图
iPhone X 测试图
iPhone Xs Max测试图
Nexus 5 测试图
Nexus 5X 测试图

从不同机型测试数据对比中已经大致可以找到问题的方向了，转化比为2（即750除以屏幕宽可以整除）的都可以完美填充。而转化比为2.08、1.81等小数的都多少有些空白。

我们知道，给控件设置具体数值的长宽的时候必须都是整型的。猜想应该是浮点数赋值给整型的过程中损失了精度。（Float赋值给int是直接抹掉小数的，不会四舍五入，所以无论是1.81还是2.01都是缺一小条）

*那么怎么才能缩小精度损失呢。

想到我们用wx.getSystemInfo获取的屏幕宽高是px为单位的，那是不是我们算出的【高度rpx】赋值给控件时就已经抹去了小数位，系统用【已经没那么精确的rpx值】再去计算对应的px，（又产生了小数位）赋值给控件又抹去了一次小数位。
单位转换过程中两次抹去小数位应该就是视频流底部会出现空白的原因了。

*那么如果我自己计算后转成px再赋值给控件，这样是不是就可以减少【px->rpx->px】这个过程中间的精度损失了？

于是修改源码如下：

<!--pages/Camera/Camera.wxml-->
<view class="topView">顶部view</view>
<!--这里的单位要改成px-->
<camera mode="normal" device-position="back" flash="auto" class="previewLayer" style="height:{{preHeight}}px;">
</camera>

<view class="bottomView">底部view</view>

<!--Camera.wxss 无变化。pages/Camera/Camera.js-->
onLoad: function () {
    var that = this;
    wx.getSystemInfo({
      success: function (res) {
        //获取的宽高单位为px，需要先用屏幕宽计算出px和rpx的转化比
        var ratio = 750 / res.windowWidth;
        //打印ratio
        console.log(ratio);
        //将获取的屏幕高度转换成rpx单位，并减去顶部和底部的高度210+80，单位是rpx
        var height = res.windowHeight * ratio - 290;
        //将计算好的height还原为px单位
        height = height / ratio;
        //将单位为px的height赋值给视频流控件
        that.setData({
          preHeight: height
        });
      }
    });
 }

用出问题的机型6 Plus运行。 6 Plus测试图

还有一丢丢空白，比刚刚小多了。那应该就是计算出的值带有小数，赋值给控件height直接抹去小数位导致的。我们给最终计算出的height加1，来弥补小数丢失的空白。

<!--pages/Camera/Camera.js-->
onLoad: function () {
    var that = this;
    wx.getSystemInfo({
      success: function (res) {
        //获取的宽高单位为px，需要先用屏幕宽计算出px和rpx的转化比
        var ratio = 750 / res.windowWidth;
        //打印ratio
        console.log(ratio);
        //将获取的屏幕高度转换成rpx单位，并减去顶部和底部的高度210+80，单位是rpx
        var height = res.windowHeight * ratio - 290;
        <!--height还原为px单位后要+1-->
        height = height / ratio + 1;
        //将单位为px的height赋值给视频流控件
        that.setData({
          preHeight: height
        });
      }
    });
 }

6 Plus测试 已完美贴合