开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第1天，点击查看活动详情

因为我目前还是个学生，所以每天学习的知识比较杂，把我学到的，总结的分享给大家，希望对一些没有基础的小伙伴能有所帮助。
针对一些我也不是很了解的，给大家附上了官网的地址，大家可以查看一下。

简易双向数据绑定

在平时，我们把input的value设置为js文件中的data数据，<view/>组件也是用了该数据，如果改变input里的数据的化，那么<view/>里的数据是不会变化的，如果给input的value绑定model：前缀的话，就可以让他们实现简易的双向数据绑定，具体代码，大家可以参考下面

<!-- 简易双向数据绑定 ，加了model:的话，别的用到了myName的地方也会随着input框变化
这只能是一个单一的值，对象名.属性名是不可以的-->
//js文件data数据
Page({
  data:{
     myName:'tom',
     con:{
        foo:'foo',
        bar:'bar'
     }
  }
})

//wxml模板
<input type="text" model:value="{{myName}}"/>
<view>{{myName}}</view>

上面代码中，input内容变化，<view/>里的也会发生变化。
要注意：简易双向数据绑定，只能是data中简易数据，即一个变量，写表达式是不支持的。也就是如果input里绑定的数据时con.foo是无法实现响应式的

获取界面上的节点信息

节点信息查询 API 可以用于获取节点属性、样式、在界面上的位置等信息。

最常见的用法是使用这个接口来查询某个节点的当前位置，以及界面的滚动位置。
大家可以参考如下代码，对代码我也进行了注释：

//创建可以获取节点的对象query
const query = wx.createSelectorQuery()
//调用select（选择器）方法可以相应的节点
query.select('#the-id').boundingClientRect(function(res){
 console.log( res.top) // #the-id 节点的上边界坐标（相对于显示区域）
})
query.selectViewport().scrollOffset(function(res){
  console.log(res.scrollTop) // 显示区域的竖直滚动位置
})
query.exec()//结尾时必须加入该行代码，否则上面的console.log不会执行

wxml代码

js文件事件

selectQuery.exec()执行所有的请求。请求结果按请求次序构成数组，在 callback 的第一个参数中返回。

整个具体获取节点对象分为三步，我做了如下总结：

1、创建selectorQuery对象
2、可以调用selectorQuery对象（查询节点信息对象）中的方法，每个方法的返回值都是一个NodeRef对象。
3、可以调用NodeRef对象（获取wxml节点信息的对象）中的方法，获取节点信息

通过`wx.createSelectQuery()`创建`selectorQuery`对象

selectorQuery对象的方法：

in（）

将选择器的选取范围更改为自定义组件 component 内。（初始时，选择器仅选取页面范围的节点，不会选取任何自定义组件中的节点）

exec（）

执行所有的请求。请求结果按请求次序构成数组，在 callback 的第一个参数中返回。

select（）

在当前页面下选择第一个匹配选择器 selector 的节点。返回一个 NodesRef 对象实例，可以用于获取节点信息。

selectAll（）

在当前页面下选择匹配选择器 selector 的所有节点。

selectViewport（）

选择显示区域。可用于获取显示区域的尺寸、滚动位置等信息。以上几个方法的返回值是NodeRef对象

NodeRef对象的方法：主要都是用来获取具体信息

NodesRef.boundingClientRect(function callback)

添加节点的布局位置的查询请求。相对于显示区域，以像素为单位。其功能类似于 DOM 的 getBoundingClientRect。返回 NodesRef 对应的 SelectorQuery

NodesRef.context(function callback)

添加节点的 Context 对象查询请求。使用该方法目前有一定的限制，目前支持 VideoContext、CanvasContext、LivePlayerContext、EditorContext和 MapContext 的获取

NodesRef.fields(Object fields, function callback)

获取节点的相关信息。需要获取的字段在 fields 中指定。返回值是 nodesRef 对应的 selectorQuery。

NodesRef.node(function callback)

获取 Node 节点实例。目前该方法也是有限制的，只支持 Canvas 和 ScrollViewContext 的获取

NodesRef.scrollOffset(function callback)

添加节点的滚动位置查询请求。以像素为单位。节点必须是 scroll-view 或者 viewport，返回 NodesRef 对应的 SelectorQuery。

以上就是我做的一些有关小程序知识点总结，大多数都是基础语法，也就是如何使用，希望对像我这样的前端小白有一定的帮助哦！！！哈哈哈

WXS简易双向数据绑定/获取界面的节点信息