常见组件

view,text,rich-text,button,image,navigator,icon.swiper,radio,checkbox

1. view

替代原来的 div 标签

点击我试试

2. text

1. 文本标签
2. 只能嵌套text
3. 长按文字可以复制（只有该标签有这个功能）
4. 可以对空格 回车进行编码

属性名	类型	默认值	说明
selectable	boolean	false	文本是否可选
decode	boolean	false	是否解码

代码：

普 通

3. image

1. 图片标签，image组件默认宽度320px、高度240px
2. 支持懒加载

属性名	类型	默认值	说明
src	String		图片资源地址
mode	String	scaleToFill	图片裁剪、缩放的模式
lazy-load	Boolean	false	图片懒加载

mode 有效值：
mode 有 13 种模式，其中 4 种是缩放模式，9 种是裁剪模式。
缩放模式：
scaleToFill
aspectFit(常用)
aspectFill
widthFix(常用)
详情见：image

4. swiper

微信内置轮播图组件

默认宽度 100% 高度 150px
属性：

属性名	类型	默认值	说明
indicator-dots	Boolean	false	是否显示⾯面板指示点
indicator-color	Color	rgba(0, 0, 0, .3)	指示点颜色
indicator-active-color	Color	#000000	当前选中的指示点颜色
autoplay	Boolean	false	是否自动切换
interval	Number	5000	自动切换时间间隔
circular	Boolean	false	是否循环轮播

swiper 滑块视图容器
swiper-item 滑块 默认宽度和高度都是100%

5. navigator

导航组件 类似超链接标签
属性：

属性名	类型	默认值	说明
target	String	self	在哪个目标上发生跳转，默认当前小程序，可选值self/miniProgram
url	String		当前小程序内的跳转链接
opentype	String	navigate	跳转方式

open-type 有效值：

值	说明
navigate	保留当前页面，跳转到应用内的某个页面，但是不能跳到 tabbar 页面
redirect	关闭当前页面，跳转到应用内的某个页面，但是不允许跳转到 tabbar 页面。
switchTab	跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面
reLaunch	关闭所有页面，打开到应用内的某个页面
navigateBack	关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages()获取当前的页面栈，决定需要返回⼏层
exit	退出小程序，target="miniProgram"时生效

6. rich-text

富文本标签
可以将字符串解析成对应标签，类似 vue中 v-html 功能

nodes属性：
nodes属性支持标签字符串和对象数组
标签字符串：

html:'
123
'

对象数组：

html:[
      {
        // 1 div标签 name属性来指定
        name:"div",
        // 2 标签上有哪些属性
        attrs:{
          // 标签上的属性 class  style
          class:"my_div",
          style:"color:red;"
        },
        // 3 子节点 children 要接收的数据类型和 nodes第二种渲染方式的数据类型一致 
        children:[
          {
            name:"p",
            attrs:{},
            // 放文本
            children:[
              {
                type:"text",
                text:"hello"
              }
            ]
          }
        ]
      }
    ]

属性	说明	类型	必填备注
name	标签名	string	是支持部分受信任的 HTML 节点
attrs	属性	object	否支持部分受信任的属性，遵循 Pascal 命名法
children	子节点列表	array	否结构和 nodes ⼀致

文本节点：type = text

属性	说明	类型	必填	备注
text	文本	string	是	支持entities

• nodes 不推荐使用 String 类型，性能会有所下降。
• rich-text 组件内屏蔽所有节点的事件。
• attrs 属性不支持 id ，支持 class 。
• name 属性大小写不敏感。
• 如果使用了不受信任的 HTML节点，该节点及其所有子节点将会被移除。
• img 标签仅支持网络图片
  详情见：rich-text

7. button

详情见 button

8. icon

代码：

详情见：icon

9. radio

需要搭配 radio-group ⼀起使用
详情见：radio

10. checkbox

需要搭配 checkbox-group ⼀起使用
详情见：https://developers.weixin.qq.com/miniprogram/dev/component/checkbox.html