小程序页面结构

(1) 区域布局组件

view 定义块级区域，相当于网页中的 div 标签
text 定义行内区域，相当于网页中的 span标签
(2) 链接跳转组件

navigator 组件相当于网页中的 a 标签，用来实现页面之间的跳转。

url 属性支持相对和绝对路径，路径为空时会报错

hover-class 属性定义点击态的样式，none 值表示禁用点击效果

open-type 属性定义跳转方式，tabBar 类型的页面时值为 switchTab，默认值为 navigate

注意: 如果跳转的页面是在app.json的tabBar中注册过的, 必须要添加open-type="switchTab"才可以, 否则跳转不起作用

(3) 图片组件

image 组件用来在页面中显示图片相当于网页中的 img （注意单词不同）

image 默认具有宽高尺寸**（320 * 240px）** 占位容器
当占位容器与图片实际尺寸宽高比不一致时，图片无法正常显示
mode 属性控制图片的显示方式
scaleToFill 图片提伸铺满占位容器
aspectFit 图片同比例缩放显示，长边完整显示出来（占位容器可能会留白）
aspectFill 图片同比例缩放显示，短边完整显示出来（图片可能被裁切）
widthFix 宽度固定, 高度自适应
heightFix 高度固定, 宽度自适应
(4) 滑动组件(轮播图)

swiper 组件在页面中创建可以滑动的区块，常常用来实现轮播图的交互效果。

组件的结构
swiper 滑块容器，内部只能嵌套 swiper-item，默认高度为 150px
swiper-item 滑块单元，内部嵌套任意内容，如 image 组件
<swiper>
  <swiper-item>1</swiper-item>
  <swiper-item>2</swiper-item>
  <swiper-item>3</swiper-item>
</swiper>
1
2
3
4
5
组件属性

indicator-dots 是否显示小圆点

小圆点的颜色可以改变

indicator-color 未选中时的颜色设置

indicator-active-color 选中时的颜色设置

autoplay 是否自动播放

interval 自动切换的时间间隔(单位: ms)

circular 是否衔接滑动

(5) 表单组件

button组件
size 指定按钮的大小
default 默认大小
mini 小尺寸
type 颜色样式
primary 绿色
default 白色
warn 红色
plain 按钮是否镂空，背景色透明
用户头像
button 组件的 open-type 属性设置为 chooseAvatar
监听 button 组件的 chooseavatar 事件（没有大写字母）
事件回调中通过事件对象 ev.detail.avatarUrl
input输入框组件与网页中 input 标签的作用一致
type属性指定表单的类型
text 文本输入键盘
number 数字输入键盘
idcard 身份证输入键盘
digit 带小数点的数字输入键盘
nickname 昵称输入键盘
value 输入框的初始内容
placeholder 属性指定输入框为空时的占位文字
password 是否是密码类型
focus 是否获取焦点
radio-group 和 radio 单选框组件, 相当于网页中的 <input type="radio" />
value 定义该表单的数据内容 , checkbox 选中时触发checkbox-group的 change 事件，并携带 checkbox 的 value
checked 定义选中的状态, 可用来设置默认选中
disabled 是否禁用
color checkbox 的 颜色
checkbox-group 和 check 复选框组件, 相当于网页中的 <input type="checkbox" />
value 定义该表单的数据内容 , checkbox 选中时触发checkbox-group的 change 事件，并携带 checkbox 的 value
checked 定义选中的状态, 可用来设置默认选中
disabled 是否禁用
color checkbox 的 颜色
picker 选择框组件 相当于网页中的 select 标签
mode 属性定义选择框的类型
selector 普通选择器
multiSelector 所列选择器
time 时间选择器
date 日期选择器
region 省市区选择器
switch 开关选择器
checked 选中状态
type 样式 有效值：switch(默认) checkbox
(6) 区域滚动组件

scroll-view 在页面中指定一个可以滚动的区域，并且这个可滚动的区域能够实现一些高级的交互，比如下拉刷新等。

scroll-view 中嵌套任意需要滚动的内容，要求必须有溢出，垂直滚动时 scroll-view 必须要指定高度。

scroll-x 属性是否允许水平方面滚动
scroll-y 属性是否允许垂直方向滚动
refresher-enable 属性是否开启下拉刷新的交互
refresher-triggered 设置下拉刷新状态，true 下拉刷新已经被触发，false 表示下拉刷新未被触发
(7) rich-text

微信小程序中不支持网页的标签结构, 只有用rich-text 转化, 才能是使网页标签起作用

nodes HTML 字符串或数组
user-select 文本是否可选，该属性会使节点显示为 block