小程序常见组件

1、view

代替之前的div标签

2、text

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

属性名 selectable 
类型 Boolean 
默认值 false    
说明 文本是否可选

属性名 decode 
类型 Boolean 
默认值 false    
说明 是否解码

3、image

图片。支持 JPG、PNG、SVG、WEBP、GIF 等格式

1. image组件默认宽度320px、高度240px
2. image组件中二维码/小程序码图片不支持长按识别。仅在wx.previewImage中支持长按识别

小程序的图片自己支持懒加载
lazy-load会自己判断当图片出现在视口上下 三屏的高度 之内的时候自 己开始加载图片
属性
类型
默认值
必填
说明
最低版本

属性：src 
默认值：
说明：图片资源地址

属性：mode
默认值：scaleToFill
说明：图片裁剪、缩放的模式

属性：webp
默认值：false
说明：默认不解析 webP 格式，只支持网络资源

属性：lazy-load（非常重要）
默认值：false
说明：图片懒加载，在即将进入一定范围（上下三屏）时才开始加载

属性：show-menu-by-longpress
默认值：false
说明：开启长按图片显示识别小程序码菜单

属性：binderror
默认值：
说明：当错误发生时触发，event.detail = {errMsg}

属性：bindload
默认值：
说明：当图片载入完毕时触发，event.detail = {height, width}

mode 的合法值

值：scaleToFill
说明：缩放模式，不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素。默认值，直接填满宽320px，高240px

值：aspectFit
说明：缩放模式，保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。确保图片的长边显示出来，一般做轮播图时使用

值：aspectFill
说明：缩放模式，保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。保持短边显示出来，比较少用一点

值：widthFix
说明：缩放模式，宽度不变，高度自动变化，保持原图宽高比不变

值：heightFix
说明：缩放模式，高度不变，宽度自动变化，保持原图宽高比不变

4、swiper（小程序轮播图）

1轮播图外层容器swiper

2每一个轮播项swiper - item

3 swiper标签 存在默认样式

1 width 100%
2 height 150px
    image存在默认宽度和高度320 * 240
3 swiper 高度无法实现由内容撑开

4先找出来原图的宽度和高度等比例给swiper定宽度和高度

原图的宽度和高度1125 * 352 px
swiper 宽度/ swiper 高度 =原图的宽度 /原图的高度
swiper 高度 swiper宽度* 原图的高度/原图的宽度
height: 100VW * 352 / 1125

autoplay 自动轮播
interval 修改轮播时间
circular 衔接轮播
indicator-dots 显示指示器分页器索引器
indicator-color 指示器的未选择的颜色
indicator- active-color 选中的时候的指示器的颜色

5、navigator

相当于web中的超链接，a标签
在小程序中会换行，这是跟html中的a标签差距最大的地方

target 的合法值

self 当前小程序
miniProgram 其它小程序

open-type 的合法值

navigate 对应 wx.navigateTo 或 wx.navigateToMiniProgram 的功能
redirect 对应 wx.redirectTo 的功能
switchTab 对应 wx.switchTab 的功能
reLaunch 对应 wx.reLaunch 的功能
navigateBack 对应 wx.navigateBack 的功能
exit 退出小程序，target="miniProgram"时生效

version 的合法值

develop 开发版
trial 体验版
release 正式版，仅在当前小程序为开发版或体验版时此参数有效；如果当前小程序是正式版，则打开的小程序必定是正式版。

使用限制

1. 需要用户确认跳转 从 2.3.0 版本开始，在跳转至其他小程序前，将统一增加弹窗，询问是否跳转，用户确认后才可以跳转其他小程序。如果用户点击取消，则回调 fail cancel。
2. 每个小程序可跳转的其他小程序数量限制为不超过 10 个 从 2.4.0 版本以及指定日期（具体待定）开始，开发者提交新版小程序代码时，如使用了跳转其他小程序功能，则需要在代码配置中声明将要跳转的小程序名单，限定不超过 10 个，否则将无法通过审核。该名单可在发布新版时更新，不支持动态修改。配置方法详见 配置。调用此接口时，所跳转的 appId 必须在配置列表中，否则回调 fail appId “${appId}” is not in navigateToMiniProgramAppIdList。

6、rich-text（富文本）

1. tip: nodes 不推荐使用 String 类型，性能会有所下降。
2. tip: rich-text 组件内屏蔽所有节点的事件。
3. tip: attrs 属性不支持 id ，支持 class 。
4. tip: name 属性大小写不敏感。
5. tip: 如果使用了不受信任的HTML节点，该节点及其所有子节点将会被移除。
6. tip: img 标签仅支持网络图片。
7. tip: 如果在自定义组件中使用 rich-text 组件，那么仅自定义组件的 wxss 样式对 rich-text 中的 class 生效。

8、icon

图标。组件属性的长度单位默认为px，2.4.0起支持传入单位(rpx/px)。

属性 type
默认值 
说明 icon的类型，有效值：success, success_no_circle, info, warn, waiting, cancel, download, search, clear

属性 size
默认值 23
说明 icon的大小

属性 color
默认值 
说明 icon的颜色，同css的color