微信小程序 获取dom节点信息、监听dom节点布局、指定监听页面的媒体查询

直接在生命周期函数中获取值为null
	方式一:在onReady中使用(未测试)

1、创建选择器
	const query = wx.createSelectorQuery();
	
	将选择器的选取范围更改为自定义组件component内.(初始时,选择器仅选取页面范围的节点，不会选取任何自定义组件中的节点)
	const query = wx.createSelectorQuery().in(this);
	
	在自定义组件或包含自定义组件的页面中
		推荐使用this.createSelectorQuery来代替wx.createSelectorQuery,这样可以确保在正确的范围内选择节点。

2、查询
	(1)查询单个
		query.select('选择器')
		
	(2)查询多个
		query.selectAll('选择器')
	
	(3)查询视口
		可用于获取显示区域的尺寸、滚动位置等信息
		query.selectViewport()
	
2.5、获取查询结果
	
	方式一:在对应方法回调中获取结果然后执行.exec()
		(1)获取节点布局信息
			query.selectAll('选择器').boundingClientRect((res)=>{
			      rect.id      // 节点的ID
			      rect.dataset // 节点的dataset
			      rect.left    // 节点的左边界坐标
			      rect.right   // 节点的右边界坐标
			      rect.top     // 节点的上边界坐标
			      rect.bottom  // 节点的下边界坐标
			      rect.width   // 节点的宽度
			      rect.height  // 节点的高度
		    }).exec()
		
		(2)获取节点上下文对象
			见3.5
		
		(3)获取节点的指定相关信息
			query.select('选择器').fields({
				id			是否返回节点id	
				dataset		是否返回节点dataset	
				mark		是否返回节点mark	
				rect		是否返回节点布局位置(leftrighttopbottom)	
				size		是否返回节点尺寸(widthheight)	
				scrollOffset	否是否返回节点的scrollLeftscrollTop,节点必须是scroll-view或者viewport	
				properties		['scrollX'],指定属性名列表,返回节点对应属性名的当前属性值(只能获得组件文档中标注的常规属性值,idclassstyle和事件绑定的属性值不可获取)	
				computedStyle	['backgroundColor'],指定样式名列表,返回节点对应样式名的当前值	
				context		是否返回节点对应的Context对象	
				node		是否返回节点对应的Node实例	
			},function(res){...}).exec()
	
	 	(4)获取Node节点实例
	 		query.select('选择器').node(function(res){
	 			res.node
	 		}).exec()
	 	
	 	(5)获取节点的滚动位置信息
	 		节点必须是scroll-view或者viewport
	 		query..selectViewport().scrollOffset(function(res){
	     	  res.id      		节点的ID
		      res.dataset 		节点的dataset
		      res.scrollLeft 	节点的水平滚动位置
		      res.scrollTop  	节点的竖直滚动位置
		    }).exec()
	    
   方法二:通过exec回调获取之前命令的结果集合
		const query = wx.createSelectorQuery()
		query.select('#the-id').boundingClientRect()
		query.selectViewport().scrollOffset()
		query.exec(function(res){
		  res[0]	 第一个命令结果
		  res[1]	 第二个命令结果
		})
  
3、获取dom
	
	目前支持Canvas的获取。
		query.select('选择器').node((res)=>{...})

3.5、获取组件上下文
	前支持VideoContext、CanvasContext、LivePlayerContext、EditorContext和MapContext的获取
	
    wx.createSelectorQuery().select('.the-video-class').context(function(res){
      console.log(res.context) 	节点对应的 Context 对象。
    }).exec()
		

4、监听节点布局相交态
	可用于监听两个或多个组件节点在布局位置上的相交状态。
	这一组API常常可以用于推断某些节点是否可以被用户看见、有多大比例可以被用户看见。
	
	相关名词:
		参照节点:监听的参照节点,取它的布局区域作为参照区域。如果有多个参照节点,则会取它们布局区域的交集作为参照区域。页面显示区域也可作为参照区域之一。
		目标节点:监听的目标,默认只能是一个节点(使用 selectAll 选项时,可以同时监听多个节点)。
		相交区域:目标节点的布局区域与参照区域的相交区域,并不准确代表用户可见的区域,可能会在绘制时被其他节点裁剪隐藏(如overflow:hidden的节点)或遮盖(如遇定位的节点)。
		相交比例:相交区域占参照区域的比例。
		阈值:相交比例如果达到阈值,则会触发监听器的回调函数。阈值可以有多个。
	
	(1)创建监听器
		wx.createIntersectionObserver({		都是非必填,不填默认触发一次
			thresholds:[0.2,0.5],	包含所有指定阈值,如达到20%和50%时触发
			initialRatio:0.2,		初始的相交比例,如果调用时检测到的相交比例与这个值不相等且达到阈值,则会触发一次监听器的回调函数。
			observeAll:true,		是否同时观测多个目标节点(而非一个),如果设为true,observe的targetSelector将选中多个节点(同时选中过多节点将影响渲染性能)
		})
		
		在自定义组件或包含自定义组件的页面中
			推荐使用this.createIntersectionObserver来代替wx.createIntersectionObserver,这样可以确保在正确的范围内选择节点。
	
	(2)选择监听的元素
		
		以页面显示区域为参照点,指定节点通过observe中选择器选择
		    wx.createIntersectionObserver().relativeToViewport({
		    	left:200,		用来在参照节点布局区域基础上扩展(或收缩)参照节点布局区域的边界,非必填
		    	top:200,
		    	...
		    }).observe('选择器', (res) => {
				res.id 				     目标节点 id
				res.dataset 			 目标节点 dataset
				res.intersectionRatio    相交区域占目标节点的布局区域的比例
				res.intersectionRect     相交区域
					.left 相交区域的左边界坐标
					.top  相交区域的上边界坐标
					...
					.width  相交区域的宽度
					.height 相交区域的高度
				res.boundingClientRect	目标边界
				res.relativeRect		参照区域的边界
				res.time				相交检测时的时间戳
		    })
		
		以自定义节点为参照点,指定节点通过observe中选择器选择,参照节点通过relativeTo中选择器选择
		    wx.createIntersectionObserver(this, {
		      thresholds: [0.2, 0.5]
		    }).relativeTo('.relative-class',{
		    	left:200,		用来在参照节点布局区域基础上扩展(或收缩)参照节点布局区域的边界,非必填
		    	top:200,
		    	...
		    }).relativeToViewport().observe('.target-class', (res) => {
				...
		    })
		    
	(3)取消监听
		wx.createIntersectionObserver()实例.disconnect()

5、指定监听页面的媒体查询
	用于监听页面media query状态的变化,如界面的长宽是不是在某个指定的范围内
	
	(1)开始监听页面media query变化情况
		MediaQueryObserver.observe({	全必填
			minWidth				number,页面最小宽度(px为单位)
			maxWidth				页面最大宽度(px为单位)
			width					页面宽度(px为单位)
			minHeight				页面最小高度(px为单位)
			maxHeight				页面最大高度(px为单位)
			height					页面高度(px为单位)
			orientation				屏幕方向(landscape或portrait)
		},function(res){
			res.matches		页面的当前状态是否满足所指定的media query
		})
		
 	(2)取消监听
 		MediaQueryObserver.disconnect()