微信小程序-获取设备宽高

前言

在开发页面的过程中，有些元素或图片内容的宽高不能写死，否则换台设备可能页面就会导致页面乱了特别难看，于是就打算获取设备屏幕的宽高，用获取的数值给元素的宽高赋值，这样哪怕换了设备页面也能正常显示

index.wxml

<view class="main">
  <view class="mainImg">
    <text>我在下面</text>
  </view>
  <view class="mainText" style="height:{
  {windowHeight}}px;">
    <text ></text>
  </view>
</view>

index.wxss

.mian{
  width:100%;
  height:100%;
  position:relative;
}
.mainImg{
  position:absolute;
  width:100%;
  z-index:2;
  background-color:green; 
}
.mainText{
  width:100%;
  position:absolute;
  z-index:100;
  background-color:rgba(131,139,139,0.5);
}

index.js

Page({
  data: {
    windowHeight:'',
    windowWidth:'&