三、小程序常见的内置组件

1、Text文本组件

• Text组件用于显示文本, 类似于span标签, 是行内元素

• user-select属性决定文本内容是否可以让用户选中
• space有三个取值(了解)
• decode是否解码(了解)
  • decode可以解析的有 < > & '
  • 如是否可以把 >解码成 >；这样 <text decode="true">&gt;</text> 即可

2、Button按钮组件

2.1.Button组件解析

• Button组件用于创建按钮，默认块级元素
• 如将Button组件的size属性设置为：mini ; 则Button组件会变成行内块级元素（display:inline-block;）
• 常见属性：Button组件具体属性详细参考 (opens new window)

2.2.Button组件代码

2.3.open-type属性

• open-type用户获取一些特殊性的权限，可以绑定一些特殊的事件

• 我们举 如下案例

• 下面案例是API：wx.getUserProfile()获取用户昵称，头像的方法

3、View视图组件

• 视图组件（块级元素，独占一行，通常用作容器组件）View视图组件属性参考 (opens new window)

4、Image图片组件

4.1.Image组件解析

• Image组件用于显示图片，有如下常见属性

• 其中src可以是本地图片，也可以是网络图片
• Mode属性使用也非常关键，详情查看官网：Image图片组件属性参考 (opens new window)
  • mode属性常用的属性值为：widthFix
• 注意：image组件默认宽度320px、高度240px

4.2.Image组件代码

• 这里补充一个API：wx.chooseMedia（具体用法查看文档）wx.chooseMedia(Object object) (opens new window)
  • 拍摄或从手机相册中选择图片或视频。
• 如下案例：拍摄或从手机相册中选择图片或视频并展示

5、ScrollView滚动组件

5.1.scroll-view组件解析

• scroll-view可以实现局部滚动，常见属性如下：scroll-view属性参考 (opens new window)

• 注意事项：
  • 实现滚动效果必须添加scroll-x或者scroll-y属性（只需要添加即可，属性值相当于为true了）
  • 垂直方向滚动必须设置scroll-view一个高度

5.2.scroll-view组件代码

• 使用案例如下

6、组件的共同属性