[小程序开发]使用 wx.getSystemInfo实现自适应————（2020.3.15学习笔记）

最新推荐文章于 2024-06-25 06:33:07 发布

曾胖神父

最新推荐文章于 2024-06-25 06:33:07 发布

阅读量3.8k

点赞数 1

分类专栏：小程序学习笔记文章标签：小程序

本文链接：https://blog.csdn.net/qq_37704442/article/details/104873570

版权

小程序学习笔记专栏收录该内容

24 篇文章 1 订阅

订阅专栏

在开始之前，先介绍一下wx.getSystemInfo(Object object)，通过该API可以获取当前设备的高度，宽度（官方文档链接https://developers.weixin.qq.com/miniprogram/dev/api/base/system/system-info/wx.getSystemInfo.html）。
然后在知道可以通过wx.getSystemInfo(Object object)可获取当前设备高度的基础上，如何实现自适应的方法自然也出来了，那就是，将获取的设备高度应用在页面上控件的高度，相对距离，这样页面控件会随着设备高度的不同而发生变化。
那么，以上思路按顺序实现起来，第一步就是通过wx.getSystemInfo(Object object)可获取当前设备高度，这个实现的效果如下

图中Console输出中的windowHeight: 568，windowWidth: 320，就是当前设备的高宽。
实现的代码如下

// pages/Weather/Weather.js

const app=getApp();
Page({

  /**
   * 页面的初始数据
   */

  data: {
  
    Page_Height:0,

  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {


    wx.getSystemInfo({
      success:function(res){
        console.log(res);
        app.globalData.Page_Height_Current=res.windowHeight;
      }
    })
    // 再通过setData更改Page()里面的data，动态更新页面的数据
   this.setData({
 
    Page_Height:parseInt(app.globalData.Page_Height_Current)
   })

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})

第二步就是，将获取的高度应用在页面控件，应用之后，自适应效果就实现了，然后再稍微装饰一下，实现出来的最终效果如下图
在这里插入图片描述
实现的代码如下
wxml的代码

<!--pages/Weather/Weather.wxml-->
<view class="Weather_AllPage" style=" margin-top:{{Forehead_Height+40}}rpx ;">
<view class="Weather_Title" >
   <text class="Time_Title">{{Time_Year+","+Time_Mouth+" "+Time_Day}}</text>
   <text class="Page_Name_Title">天气界面</text>
   
</view>
<view class="Weather_Body">
<view class="Weather_HumidityAndTemperature_Items">

  <view class="Weather_Humidity_Item" style="height: {{Page_Height*3/10}}px;">
     <image src="/My_Image/My_Weather_Icon/水滴.png" style="height: {{Page_Height*1/27}}px;"></image>
     <text class="Weather_Humidity_Item_Title">湿度</text>
      <text class="Weather_Humidity_Item_Number"   style="  margin-top: {{Page_Height*1/11}}px;">32</text>
       <text class="Weather_Humidity_Item_Time">{{Time_Hours+"时"+Time_Minutes+"分"+Time_Seconds+"秒"}}</text>
  </view>
   
  <view class="Weather_Temperature_Item" style="height: {{Page_Height*2/5}}px;">
   <image src="/My_Image/My_Weather_Icon/温度.png" style="height: {{Page_Height*1/27}}px;"></image>
     <text class="Weather_Temperature_Item_Title">温度</text>
      <text class="Weather_Temperature_Item_Number" style="  margin-top: {{Page_Height*19/100}}px;">7°</text>
       <text class="Weather_Temperature_Item_Time">{{Time_Hours+"时"+Time_Minutes+"分"+Time_Seconds+"秒"}}</text>
  </view>
  </view>
  <view class="Weather_AqiAndPower_Items"> 

    <view class="Weather_Aqi_Item" style="height: {{Page_Height*38/100}}px;">
      <image src="/My_Image/My_Weather_Icon/空气质量.png" style="height: {{Page_Height*1/27}}px;"></image>
     <text class="Weather_Aqi_Item_Title">空气质量</text>
      <text class="Weather_Aqi_Item_Number"  style="  margin-top: {{Page_Height*10/60}}px;">35</text>
       <text class="Weather_Aqi_Item_Time">{{Time_Hours+"时"+Time_Minutes+"分"+Time_Seconds+"秒"}}</text>
  </view>
  <view class="Weather_Power_Item" style="height: {{Page_Height*32/100}}px;">
       <image src="/My_Image/My_Weather_Icon/风.png" style="height: {{Page_Height*1/27}}px;"></image>
     <text class="Weather_Power_Item_Title" >风力</text>
      <text class="Weather_Power_Item_Number" style="  margin-top: {{Page_Height*18/165}}px;">2级</text>
       <text class="Weather_Power_Item_Time">{{Time_Hours+"时"+Time_Minutes+"分"+Time_Seconds+"秒"}}</text>
  </view>
  </view>
 
</view>
</view>

<My_Tabbar activeIdx="0"/>

wxss的代码

/* pages/Weather/Weather.wxss */
.Weather_AllPage{
  display: flex;
  flex-direction: column;
  margin-left: 5%;
  
}
.Time_Title{
  font-size: 27rpx;
  color: #dbdbdb;
}
.Page_Name_Title{
  margin-top: 12rpx;
  font-size: 40rpx;
  font-family: Microsoft YaHei;
  font-weight: 600;
}
.Weather_Title{
  display: flex;
  flex-direction: column;
   
}
.Weather_Body{
  display: flex;
  margin-top: 40rpx;

}
.Weather_HumidityAndTemperature_Items{
  width: 45%;
  display: flex;
  flex-direction: column;
}
.Weather_Humidity_Item{
  
  border-radius: 20rpx;
  display: flex;
  flex-direction: column;
  background-color: #6A2AFE;
}
.Weather_Humidity_Item image{
  width: 50rpx;
  
  margin-top: 10%;
  margin-left: 8%;
}
.Weather_Humidity_Item_Title{
  color: white;
  font-family: YouYuan;
  font-weight: 700;
  margin-top: 6%;
  margin-left: 8%;
}
.Weather_Humidity_Item_Number{

  margin-left: 25rpx;
  font-size: 58rpx;
  color: white;
}
.Weather_Humidity_Item_Time{
  color: white;
  margin-left: 25rpx;
  font-size: 18rpx;
}
.Weather_Temperature_Item{
  margin-top: 10%;
  height: 550rpx;
  display: flex;
  flex-direction: column;

  border-radius: 20rpx;
  background-color: #FE6760;
}
.Weather_Temperature_Item image{
  width: 50rpx;
  height: 50rpx;
  margin-top: 10%;
  margin-left: 8%;
}
.Weather_Temperature_Item_Title{
  color: white;
  font-family: YouYuan;
  font-weight: 700;
  margin-top: 6%;
  margin-left: 8%;
}
.Weather_Temperature_Item_Number{

  margin-left: 25rpx;
  font-size: 58rpx;
  color: white;
}
.Weather_Temperature_Item_Time{
  color: white;
  margin-left: 25rpx;
  font-size: 18rpx;
}
.Weather_AqiAndPower_Items{
  width: 45%;
  margin-left: 5%;
  display: flex;
  flex-direction: column;
}

.Weather_Aqi_Item
{

  display: flex;
  flex-direction: column;

  border-radius: 20rpx;
  background-color: #69C3F6;
}
.Weather_Aqi_Item image{
  width: 50rpx;

  margin-top: 10%;
  margin-left: 8%;
}
.Weather_Aqi_Item_Title{
  color: white;
  font-family: YouYuan;
  font-weight: 700;
  margin-top: 6%;
  margin-left: 8%;
}
.Weather_Aqi_Item_Number{

  margin-left: 25rpx;
  font-size: 58rpx;
  color: white;
}
.Weather_Aqi_Item_Time{
  color: white;
  margin-left: 25rpx;
  font-size: 18rpx;
}
.Weather_Power_Item{
  margin-top: 10%;

  border-radius: 20rpx;
  display: flex;
  flex-direction: column;
  background-color: #F2AE83;
}
.Weather_Power_Item image{
  width: 50rpx;
  height: 50rpx;
  margin-top: 10%;
  margin-left: 8%;
}
.Weather_Power_Item_Title{
  color: white;
  font-family: YouYuan;
  font-weight: 700;
  margin-top: 6%;
  margin-left: 8%;
}
.Weather_Power_Item_Number{

  margin-left: 25rpx;
  font-size: 58rpx;
  color: white;
}
.Weather_Power_Item_Time{
  color: white;
  margin-left: 25rpx;
  font-size: 18rpx;
}