小程序的常见内置组件

目录

1、Text 组件

2、Button 组件

3、View 组件

4、Image 组件

5、Input组件

6、scroll-view 组件

7、组件的共同属性

---

小程序中有很多组件，例如表单组件、媒体组件、导航组件等，组件及详细属性可以参考 官方文档，下面介绍几种常用的组件。

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

Hello world\n    


你好小程序\n      
你好小程序\n      


Hello world\n                 
Hello world\n        
Hello world\n       
Hello world\n      


5 > 3           
5 > 3    

注意：（1）tip：decode可以解析的有 ；<；>；&；&apos；&ensp；&emsp；（2）tip：各个操作系统的空格标准并不一致。（3）tip：text 组件内只支持text嵌套。（4）tip：除了文本节点以外的其他节点都无法长按选中。（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

按钮    


按钮    
按钮    


按钮    
按钮    
按钮       


按钮        

按钮     


按钮      


按钮      


获取授权

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

哈哈哈         
你是一只小二哈 


box1



    box1

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

            
     



    
         
        


    
              
Page({                          
  data:{
    imagePath:''                
  },
  handleChooseAlbum(){
    wx.chooseImage({            
      success:(res) => (        
        console.log(res);       
        const path = res.tempFilePaths[0];    
        this.setData({                        
          imagePath:path;
        })
      },
    })
  }
})


    

注意：（1）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 官方文档

    















Page({             
  data:{
  },
  bindinput(event){
    console.log('input家取结向：',event);
  },
  handleFocus(event){
    console.log('input家取结向：',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

  
  {{item}}  



    
  {{item}}




  {{item}}

Page({             
  handleScroll(){
    console.log('正在滚动”,event);    
  }
})

7、组件的共同属性

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

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