小程序之常见内置组件

1、Text 组件

Text 组件用于显示文本，类似于 html 中的 span 标签，是行内元素，下面是 Text 组件的属性和基本使用。官方文档

属性	类型	默认值	必填	说明	最低版本
selectable	boolean	false	否	文本是否可选	1.1.0
space	string	nbsp：根据字体设置的空格大小（默认值）ensp：中文字符空格一半大小emsp：中文字符空格大小	否	显示连续空格	1.4.0
decode	boolean	false	否	是否解码	1.4.0

 

示例：

<!--text组件的基本使用-->
<text>Hello world\n</text>    <!--行内元素，不会独占一行，可以通过\n换行-->

<!--selectable属性：决定文本是否可被选中-->
<text selectable='true'>你好小程序\n</text>      <!--文本默认是不可选中的，可以设置selectable属性使可被选中-->
<text selectable='true'>你好小程序\n</text>      <!--一个属性如果设置在为true可以直接写属性，不想写属性值-->

<!--space属性：决定文本空格的大小-->
<text>Hello world\n</text>                 <!--显示：Hello world-->
<text space='nbsp'>Hello world\n</text>    <!--显示：Hello world-->    <!--nbsp是默认值-->
<text space='ensp'>Hello world\n</text>    <!--显示：Hello  world-->   <!--ensp是半个中文字符大小-->
<text space='emsp'>Hello world\n</text>    <!--显示：Hello   world-->  <!--emsp是一个中文字符大小-->

<!--decode属性：是否解码文本-->
<text>5 &gt; 3</text>           <!--显示：5 &gt; 3-->
<text decode>5 &gt; 3</text>    <!--显示：5 > 3-->

注意：

（1）decode可以解析的有&nbsp；&lt；&gt；&amp；&apos；&ensp；&emsp；

（2）各个操作系统的空格标准并不一致。

（3）text 组件内只支持text嵌套。

（4）除了文本节点以外的其他节点都无法长按选中。

（5）bug：基础库版本低于 2.1.0 时，text 组件内嵌的 text style 设置可能不会生效。

2、Button 组件

Button 按钮组件的属性比较多，下面简单说几个常用的属性及其组件的基本使用，具体的属性可以参考 官方文档。

属性	类型	默认值	必填	说明	最低版本
size	string	default	否	按钮的大小	1.0.0
type	string	default	否	按钮的样式类型	1.0.0
plain	boolean	false	否	按钮是否镂空，背景色透明	1.0.0
disabled	boolean	false	否	是否禁用	1.0.0
loading	boolean	false	否	名称前是否带 loading图标	1.0.0
hover-class	sting	button-hover	否	指定按钮按下去的样式类。当 hover-class="none" 时，没有点击态效果	1.1.0
open-type	string	官方文档	否	微信开放能力，比如：open-type='getUserInfo' 获取用户信息	1.1.0
form-type	sting		否	用于 fom 组件，点击分别会触发 fom 组件的 submit/reset 事件	1.1.0

 

示例：

<!--1.button 的基本使用-->
<button>按钮</button>    <!--默认按钮很大，而且会独占一行，是块级 block 元素-->

<!--2.size属性：mini-->
<button size='mini'>按钮</button>    <!--按钮变小，inline-block 元素，不会独占一行-->
<button size='mini'>按钮</button>    <!--按钮变小，inline-block 元素，不会独占一行-->

<!--3.type属性：primary、default、warn-->
<button size='mini'type='primary'>按钮</button>    <!--按钮显示绿色-->
<button size='mini'type='default'>按钮</button>    <!--按钮显示白色-->
<button size='mini'type='warn'>按钮</button>       <!--按钮显示红色-->

<!--4.plain：镂空效果-->
<button size='mini' plain>按钮</button>        <!--按钮显示镂空样式-->
<!--5.disable：不可用-->
<button size='mini' disabled>按钮</button>     <!--按钮变灰，不可点击-->

<!--6.loading：加载效果，值可以设置一个变量，比如当网络请求结束时让变量为true-->
<button size='mini' loading="isLoading">按钮</button>      <!--按钮前显示加载小圆圈-->

<!--7.hover-class:鼠标点击按钮显示的样式-->
<button hover-class='pressed'>按钮</button>      <!--可以到wxss中给pressed类名设置样式-->

<!--8.open-type:微信开发能力，将 open-type 改成 getUserlnfo，并且绑定 bindgetuserinfo 事件去获取用户信息-->
<button size='mini' open-type='getUserInfo' bindgetuserinfo='handleGetUserInfo'>获取授权</button>

3、View 组件

View 视图组件（块级元素独占一行，通常用作容器组件），相当于 html 中的 div，下面是 View 组件的属性和基本使用 官方文档

属性	类型	默认值	必填	说明	最低版本
hover-class	string	none	否	指定按下去的样式类。当 hover-class="none" 时，没有点击态效果	1.0.0
hover-stop-propagation	boolean	false	否	指定是否阻止本节点的祖先节点出现点击态	1.5.0
hover-start-time	number	50	否	按住后多久出现点击态，单位毫秒	1.0.0
hover-stay-time	number	400	否	手指松开后点击态保留时间，单位毫秒	1.0.0

 

示例：

<!--1.view的基本使用-->
<view class='box'>哈哈哈</view>         <!--可以到wxss给类名设置样式，注意view是块级元素-->
<view><text>你是一只小二哈</text></view> <!--view中还可以嵌套使用text、button等组件-->

<!--2.hover-class：当用户点击按下组件时，显示样式-->
<view class='box1' hover-class='hover-view' hover-stay-time="{{0}}">box1</view>

<!--3.hover-stop-propagation：可以阻止本节点的祖先节点出现点击态-->
<view class='box2'>
    <view class='boxl' hover-class='hover-view' hover-stop-propagation>box1</view>
</view>

4、Image 组件

Image 组件用于显示图片，下面说几个常用的属性及其组件的基本使用，具体的属性可以参考 官方文档。

属性	类型	默认值	必填	说明	最低版本
src	string		否	图片资源地址	1.0.0
mode	string	scaleToFill	否	图片裁剪、缩放的模式	1.0.0
webp	boolean	false	否	默认不解析 webP 格式，只支持网络资源	2.9.0
lazy-load	boolean	false	否	图片懒加载，在即将进入一定范围（上下三屏）时才开始加载	1.5.0
show-menu-by-longpress	boolean	false	否	开启长按图片显示识别小程序码菜单	2.7.0
binderror	eventhandle		否	当错误发生时触发，event.detail = {errMsg}	1.0.0
bindload	eventhandle		否	当图片载入完毕时触发，event.detail = {height, width}	1.0.0

 

示例：

<!--1.image的基本使用-->
<image/>            <!--单标签-->
<image></image>     <!--双标签-->

<!--2.src:本地地址（相对路径/绝对路径）/远程地址-->
<image src='../../assets/home/picture.jpg'/>    <!--相对路径-->
<image src='/assets/home/picture.jpg'/>         <!--绝对路径：/ 代表根目录-->
<image src='https://res.wx.qq.com/wxdoc/dist/assets/img/0.4cb08bb4.jpg'/>        <!--图片远程地址-->

<!--3.显示用户在相册中选择的图片-->
<button bindtap="handleChooseAlbum"></button>    <!--wxml中的代码-->
<image src="{{imagePath}}"></image>              <!--将用户选中的图片显示出来-->
Page({                          <!--js中的代码-->
  data:{
    imagePath:''                <!--保存选中的照片的路径-->
  },
  handleChooseAlbum(){
    wx.chooseImage({            <!--系统API，让用户在相册中选择图片（或者拍照）-->
      success:(res) => (        <!--要保证下面的this可以指向data中的数据，必须使用箭头函数-->
        console.log(res);       <!--可以打印图片的路径及图片的大小等信息-->
        const path = res.tempFilePaths[0];    <!--取出图片的路径-->
        this.setData({                        <!--设置imagePath，为了保证响应式，必须使用setData()方法-->
          imagePath:path;
        })
      },
    })
  }
})

<!--4.bindload：监听图片加载完成-->
<image src="/assets/home/picture.jpg" bindload='handlemageLoad'/>    <!--可以到js中写handlemageLoad()方法-->

<!--5.lazy-load：图片的懒加载->在即将进入一定范围（上下三屏）时才开始加载-->
<image wx:for="{{10}}" src="/assets/home/picture.jpg" bindload='handlemageLoad' lazy-load/>

<!--6.show-menu-by-longpress：长按图片出现识别小序码-->
<image show-menu-by-longpress src="/assets/home/picture.jpg"/>

注意：

（1）image 组件可以写成单标签，也可以修成双标签，因为它里面不需要包裹内容，单标签：（ <image/> ），双标签：（<image></image>）

（2）image 组件默认有自己的大小：320×248。

（3）image 组件时一个行内块级元素（inline-block）

5、Input组件

Input 组件用于接收用户的输入信息，也是开发中非常常见的，下面是 Input 组件的一些属性和基本使用 官方文档 。

属性	类型	默认值	必填	说明	最低版本
value	string		是	输入框的初始内容	1.0.0
type	string	text	否	input 的类型	1.0.0
password	boolean	false	否	是否是密码类型	1.0.0
placeholder	string		是	输入框为空时占位符	1.0.0
bindinput	eventhandle		是	键盘输入时触发，event.detail = {value, cursor, keyCode}，keyCode 为键值，2.1.0 起支持，处理函数可以直接 return 一个字符串，将替换输入框的内容。	1.0.0
bindfocus	eventhandle		是	输入框聚焦时触发，event.detail = { value, height }，height 为键盘高度，在基础库 1.9.90 起支持	1.0.0
bindblur	eventhandle		是	输入框失去焦点时触发，event.detail = {value: value}	1.0.0
bindconfirm	eventhandle		是	点击完成按钮时触发，event.detail = {value: value}	1.0.0
更多属性，请参考小程序的 Input 官方文档

 

示例：

<!--1.input的基本使用-->
<input/>    <!--注意：input框默认情况下是没有任何样式和边框的，需要手动wxss设置-->

<!--2.value，input中的默认值-->
<input value='你是一只小二哈'/>

<!--3.type：决定弹出键盘类型（文本输入键盘/数字/身份证）-->
<input type='number'/>

<!--4.password：暗文-->
<input password/>

<!--5.placeholder：占位文字-->
<input placeholder='请输入内容'/>

<!--6.input绑定事件-->
<input bindinput='handleInput' bindfccus='handleFocus' bindblur='handleBlur'/>
Page({             <!--js中的代码-->
  data:{
  },
  bindinput(event){
    console.log('input家取结向：',event);
  },
  handleFocus(event){
    console.log('input家取结向：',event);    <!--event中可以查看输入的信息值-->
  },
  handleBlur(event){
    console.log('input失去然点：',event);
  }
})

6、scroll-view 组件

小程序中页面的滚动是自动的，scroll-view 组件是实现局部滚动，下面是 scroll-view 组件的一些属性和基本使用 官方文档 。

属性	类型	默认值	必填	说明	最低版本
scroll-x	boolean	false	否	允许横向滚动	1.0.0
scroll-y	boolean	false	否	允许纵向滚动	1.0.0
upper-threshold	number/string	50	否	距顶部/左边多远时，触发 scrolltoupper 事件	1.0.0
lower-threshold	number/string	50	否	距底部/右边多远时，触发 scrolltolower 事件	1.0.0
scroll-top	number/string		否	设置竖向滚动条位置	1.0.0
scroll-left	number/string		否	设置横向滚动条位置	1.0.0
bindscrolltoupper	eventhandle		否	滚动到顶部/左边时触发	1.0.0
bindscrolltolower	eventhandle		否	滚动到底部/右边时触发	1.0.0

 

示例：

<!--1.水平滚动：scroll-x-->
<scroll-view class='container1' scroll-x>  <!--设置view的inline-block之后，还要给父组件设 white-space：nowrap;-->
  <view wx:for="{{10}}" class='item1'>{{item}}</view>  <!--view是块元素，要水平显示需要设置样式为inline-block-->
</scroll-view>

<!--2.重直滚动：scroll-y-->
<scroll-view class='container2' scroll-y>    <!--设置垂直滚动需要给父组件设置固定高度height样式-->
  <view wx:for="{{10}}" class='item2'>{{item}}</view>
</scroll-view>

<!--3.其他补充-->
<scroll-view class='container2' scroll-y bindscroll="handleScroll">
  <view wx:for="{{10}}" class='item2'>{{item}}</view>
</scroll-view>
Page({             <!--js中的代码-->
  handleScroll(){
    console.log('正在滚动”,event);    <!--可以通过打印的对象.detail看滚动的距离-->
  }
})

7、组件的共同属性

所有 wxml 标签（组件）都支持的属性称之为共同属性，有如下共同属性：

属性名	类型	描述	注解
id	String	组件的唯一标识	整个页面唯一
class	String	组件的样式类	在对应的 wxss 中定义的样式类
style	String	组件的内联样式	可以动态设置的内联样式
hidden	Boolean	组件是否显示	所有组件默认显示
data-*	Any	自定义属性	组件上触发的事件时，会发送给事件处理函数
bind*/catch*	EventHandler	组件的事件