小程序 | camera组件高度为视窗高度

导读：需求是置camera组件高度为屏幕的可编辑高度，因为需要覆盖一张图片在组件在camera上，图片宽度要100%，高度是按照相机的高度进行裁剪

思路1：通过wx.getSystemInfo()获取可视屏幕高度，通过传值到camera组件

 <!-- wxml -->
<camera device-position="front"  flash="off" binderror="error" bindinitdone="initdone" style="height:{{windowHeight}}px;width:100%">

 <!-- js -->
wx.getSystemInfo({
      success(res) {
        _this.setData({
          windowHeight: res.windowHeight,
        })
      }
    })

痛点：基础库低于2.7.0的，调用的前置摄像头变成后置摄像头，昨天（20190514）刚好微信更新7.0.4版本，由这一版本开始支持基础库2.7.0，（没找到文档有相关说明，应该是高分比和动态传值设置高度的bug修复了）真机测试已成功可用

思路2：在onReady()动态设置

参考自微信社区：设置camera组件的高度随客户端变化时无效——评论区“阿斯兰”的回复

 <!-- wxml -->
<camera device-position="front"  flash="off" binderror="error" bindinitdone="initdone" style="height:{{ischangewindowHeight:724}}px;width:100%">

 <!-- js -->
  onReady: function () {
   let _this = this;
   wx.getSystemInfo({
       success(res) {
         _this.setData({
           windowHeight: res.windowHeight,
         })
       }
     })
 
  this.setData({
      ischange: true
    })
  },

痛点：基础库低于2.7.0的，第一次进入该页面相机高度渲染不成功，微信7.0.4版本开始支持基础库2.7.0，真机测试已成功可用

思路3：使用vh

因为我的需求是相机高度是视窗高度100%，所以直接用了100vh

 <!-- wxml -->
<camera device-position="front"  flash="off" binderror="error" bindinitdone="initdone" style="height:100vh;width:100%">
  <cover-view class="controls">
       <cover-image class="img" src="xxx"  style="height:100%;width:100%;overflow: hidden;" />
  </cover-view>
  <cover-view class="tips">正在进行人脸识别请眨眨眼</cover-view>
 </camera>

如果设置camera组件的高度是视窗高度，建议用vh，不会出现低版本导致百分比或者动态传值导致渲染不成功或者变成默认调用后置镜头。