微信小程序获取屏幕宽度以及元素的宽高

一、微信小程序获取系统信息

微信获取系统信息函数为wx.getSystemInfo(OBJECT)

1. object 参数说明

参数	类型	必填
success	Function	是
fail	Function	否
complete	Function	否

2. success 回调参数说明

属性	说明
model	手机型号
pixelRatio	设备像素比
windowWidth	窗口宽度
windowHeight	窗口高度
language	微信设置的语言
version	微信版本号
system	操作系统版本
platform	客户端平台

二、css3引入’vm’ 和 “vh”

vm=view width ; vh=view height
以上我们称为视窗单位允许我们更接近浏览器窗口来定义大小
例如：

view{
  width: 100vw;
  font-size: 80vw; /* 宽度为窗口100%， 字体大小为窗口宽度的10% */
}
view{
  height: 100vh;
  font-size: 80vh; /* 高度为窗口100%， 字体大小为窗口高度的10% */
}

三、获取元素的高度wx.createSelectorQuery()//获取wxml节点信息api

返回一个SelectorQuery对象实例。可以在这个实例上使用select等方法选择节点，并使用boundingClientRect等方法选择需要查询的信息。

示例代码

Page({
  queryMultipleNodes: function(){
    var query = wx.createSelectorQuery()
    query.select('#the-id').boundingClientRect(function(res){
         res.dataset    // 节点的dataset
     	 res.width      // 节点的宽度
     	 res.height     // 节点的高度
       	 res.scrollLeft // 节点的水平滚动位置
   	     res.scrollTop  // 节点的竖直滚动位置
         res.scrollX    // 节点 scroll-x 属性的当前值
      	 res.scrollY    // 节点 scroll-y 属性的当前值
      		// 此处返回指定要返回的样式名
      	 res.margin
      	 res.backgroundColor
    })
  }
})

selectorQuery 对象的方法列表

方法	参数	参数
in	object Component	将选择器的选取范围更改为自定义组件component内。（初始时，选择器仅选取页面范围的节点，不会选取任何自定义组件中的节点。）
select	selector	selector类似于CSS的选择器
selectAll	selector	在当前页面下选择匹配选择器selector的节点，返回一个NodesRef对象实例。 与selectorQuery.select(selector)不同的是，它选择所有匹配选择器的节点。
selectViewport		选择显示区域，可用于获取显示区域的尺寸、滚动位置等信息，返回一个NodesRef对象实例。
exec	[callback]	执行所有的请求，请求结果按请求次序构成数组，在callback的第一个参数中返回。