【微信小程序】 基础语义笔记2：基本组件、获取节点信息

写多了我也记不住，记住几个重要的：

1.基础组件：

视图容器

名称	功能说明
cover-image	覆盖在原生组件之上的图片视图
cover-view	覆盖在原生组件之上的文本视图
movable-area	movable-view的可移动区域
movable-view	可移动的视图容器，在页面中可以拖拽滑动
scroll-view	可滚动视图区域
swiper	滑块视图容器
swiper-item	仅可放置在swiper组件中，宽高自动设置为100%
view	视图容器

基础内容

名称	功能说明
icon	图标
progress	进度条
rich-text	富文本
text	文本

表单组件

名称	功能说明
button	按钮
checkbox	多选项目
checkbox-group	多项选择器，内部由多个checkbox组成
editor	富文本编辑器，可以对图片、文字进行编辑
form	表单
input	输入框
label	用来改进表单组件的可用性
picker	从底部弹起的滚动选择器
picker-view	嵌入页面的滚动选择器
picker-view-column	滚动选择器子项
radio	单选项目
radio-group	单项选择器，内部由多个 radio 组成
slider	滑动选择器
switch	开关选择器
textarea	多行输入框

导航

名称	功能说明
functional-page-navigator	仅在插件中有效，用于跳转到插件功能页
navigator	页面链接

媒体组件

名称	功能说明
audio	音频
camera	系统相机
image	图片
live-player	实时音视频播放（v2.9.1 起支持同层渲染）
live-pusher	实时音视频录制（v2.9.1 起支持同层渲染）
video	视频（v2.4.0 起支持同层渲染）

地图

名称	功能说明
map	地图（v2.7.0 起支持同层渲染）

画布

名称	功能说明
canvas	画布（2d 接口 v2.9.0 起支持同层渲染）

开放能力

名称	功能说明
web-view	承载网页的容器
ad	Banner 广告
official-account	公众号关注组件
open-data	用于展示微信开放的数据

原生组件说明

名称	功能说明
native-component	## 原生组件

• 原生组件的层级是最高的，所以页面中的其他组件无论设置 z-index 为多少，都无法盖在原生组件上 |
• 组件有：
• • camera
  • canvas
  • input（仅在focus时表现为原生组件）
  • live-player
  • live-pusher
  • map
  • textarea
  • video

无障碍访问

名称	功能说明
aria-component	## 无障碍访问
为了更好地满足视障人士对于小程序的访问需求，基础库自2.7.1起，支持部分ARIA标签

导航栏

名称	功能说明
navigation-bar	页面导航条配置节点，用于指定导航栏的一些属性

页面属性配置节点

名称	功能说明
page-meta	页面属性配置节点，用于指定页面的一些属性、监听页面事件

2.获取节点信息

类似用jQuery获取页面信息。

const query = wx.createSelectorQuery()
query.select('#the-id').boundingClientRect(function(res){
  res.top // #the-id 节点的上边界坐标（相对于显示区域）
})
query.selectViewport().scrollOffset(function(res){
  res.scrollTop // 显示区域的竖直滚动位置
})
query.exec()

3.动画效果

前端方面，好像是可以旋转、透明、缩放等效果；