小程序 | 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，不會出現低版本導致百分比或者動態傳值導致渲染不成功或者變成默認調用後置鏡頭。