视图容器组件：
scroll-view 组件：
可滚动视图区域，在 scroll-view 组件的内部滚动。
使用竖向滚动时，必须要给
scroll-view一个固定高度，而不能是由其子元素自动撑开，否则的话scroll-view的高度等于其子元素的高度，就不会滚动了。如果
scroll-view组件要开启 flex 布局，需要设置enable-flex属性为 true。可以通过设置
scroll-top、scroll-left、scroll-into-view属性来控制scroll-view组件的滚动位置。可以通过设置
paging-enabled和enhanced属性来产生分页效果，每次滑动将会只会滑动到下一个 item。
swiper 和 swiper-item 组件：
滑块视图容器。默认高度是 150px。
一般情况下，
swiper-item组件中会放置图片来实现轮播图效果。
表单组件：
form 表单组件：
当点击 form 表单中
form-type为 submit 的 button 组件时，会触发表单的 submit 事件。当点击 form 表单中form-type为 reset 的 button 组件时，会触发表单的 reset 事件。
在表单中的组件上加上 name 来作为它的 key，在 submit 或 reset 绑定的事件处理函数中就可以获取到表单中的组件的 value 值。
<form bindsubmit="handleSubmit">
<view>
标题
<!-- 使用 value 设置输入框的内容 -->
<!-- 使用 name 作为表单组件的 key，提交时可以获取到对应 key 的 value 值 -->
<input name="title" value="{{formData.title}}" />
</view>
<view>
内容
<input name="content" value="{{formData.content}}" />
</view>
<!-- 点击表单中 form-type 为 submit 的 button 组件，会触发表单的 submit 事件 -->
<button form-type="submit">保存</button>
</form>
Page({
data : {
// 回填表单数据
formData: {
title: '我是标题',
content: '我是内容',
},
},
handleSubmit: function(e) {
// 点击保存按钮可获取到表单数据
const {value} = e.detail
console.log(value)
}
})
button 按钮组件：
button 按钮组件的 open-type 属性有很多微信开放能力。
媒体组件：
image 图片组件：
image 组件默认宽度 320px、高度 240px，因此需要结合 mode 模式来对图片进行缩放和裁剪。
mode 属性值中最常用的是 widthFix，保持原图宽高比不变，宽度不变，高度自动计算。
原生组件和非原生组件：
微信小程序中的组件分为原生组件和非原生组件。大部分都是非原生组件，少部分是由微信客户端创建的原生组件。
原生组件有：input（仅在 focus 时表现为原生组件）、textarea、video、map、camera、canvas、live-player、live-pusher。
在工具上，原生组件是用 web 组件模拟的，因此很多情况并不能很好的还原真机的表现，建议在使用到原生组件时尽量在真机上进行调试。
原生组件的使用限制：
由于原生组件脱离在 WebView 渲染流程外，因此在使用时有以下限制：
- 【同层渲染下已无该限制】原生组件的层级是最高的，所以页面中的其他组件无论设置 z-index 为多少，都无法覆盖在原生组件上。
- 【同层渲染下已无该限制】原生组件目前还无法在 picker-view 中使用。
- 【同层渲染下已无该限制】部分 CSS 样式无法应用于原生组件。
无法对原生组件设置 CSS 动画。
无法定义原生组件为position:fixed。
不能在父级节点使用overflow:hidden来裁剪原生组件的显示区域。
- 原生组件的事件监听不能使用
bind:eventname的写法，只支持 bindeventname。原生组件也不支持 catch 和 capture 的事件绑定方式。 - 【同层渲染下已无该限制】原生组件会遮挡 vConsole 弹出的调试面板。
原生组件同层渲染：
同层渲染是为了解决原生组件的层级问题，在支持同层渲染后，原生组件与其它组件可以随意叠加，有关层级的限制将不再存在。但是组件内部仍由原生渲染，样式一般还是对原生组件内部无效。
当前所有原生组件（除 input 组件 focus 状态）均已支持同层渲染。
