【小程序开发】常见的内置组件

写在前面

🤗这里是前端程序员小张！

🌻人海茫茫，感谢这一秒你看到这里。希望我的文章对你的有所帮助！

🌟愿你在未来的日子，保持热爱，奔赴山海！

一、Text文本组件

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

常见属性

属性	类型	默认值	必填	说明
user-select	boolean	false	否	文本是否可选，该属性会使文本节点显示为 inline-block
space	string		否	显示连续空格
decode	boolean	false	否	是否解码

二、Button按钮组件

Button组件用于创建按钮，默认块级元素

常见属性

属性	类型	默认值	必填	说明
size	string	default	否	按钮的大小
type	string	default	否	按钮的样式类型
plain	boolean	false	否	按钮是否镂空，背景色透明
disabled	boolean	false	否	是否禁用
hover-class	string	button-hover	否	指定按钮按下去的样式类。当 hover-class="none" 时，没有点击态效果
open-type	string		否	微信开放能力

2.1 type属性

<button size="mini" type="primary">type-primary</button>
<button size="mini" type="default">type-default</button>
<button size="mini" type="warn">type-warn</button>
<button size="mini" class="btn">自定义属性</button>

2.2 open-type属性

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

合法值	说明
contact	打开客服会话，如果用户在会话中点击消息卡片后返回小程序，可以从 bindcontact 回调中获得具体信息，具体说明 （小程序插件中不能使用）
share	触发用户转发，使用前建议先阅读使用指引
getPhoneNumber	获取用户手机号，可以从bindgetphonenumber回调中获取到用户信息，具体说明 （小程序插件中不能使用）
getUserInfo	获取用户信息，可以从bindgetuserinfo回调中获取到用户信息 （小程序插件中不能使用）
launchApp	打开APP，可以通过app-parameter属性设定向APP传的参数具体说明
openSetting	打开授权设置页
feedback	打开“意见反馈”页面，用户可提交反馈内容并上传日志，开发者可以登录小程序管理后台后进入左侧菜单“客服反馈”页面获取到反馈内容
chooseAvatar	获取用户头像，可以从bindchooseavatar回调中获取到头像信息

三、View视图组件

视图组件—块级元素，独占一行，通常用作容器组件

属性

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

三、Image图片组件

Image组件用于显示图片

• image组件默认宽度320px、高度240px

属性

属性	类型	默认值	必填	说明
src	string		否	图片资源地址
mode	string	scaleToFill	否	图片裁剪、缩放的模式

3.1 mode属性

合法值	说明
scaleToFill	缩放模式，不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素
aspectFit	缩放模式，保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。
aspectFill	缩放模式，保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。
widthFix	缩放模式，宽度不变，高度自动变化，保持原图宽高比不变
heightFix	缩放模式，高度不变，宽度自动变化，保持原图宽高比不变
top	裁剪模式，不缩放图片，只显示图片的顶部区域
bottom	裁剪模式，不缩放图片，只显示图片的底部区域
center	裁剪模式，不缩放图片，只显示图片的中间区域
left	裁剪模式，不缩放图片，只显示图片的左边区域
right	裁剪模式，不缩放图片，只显示图片的右边区域
top left	裁剪模式，不缩放图片，只显示图片的左上边区域
top right	裁剪模式，不缩放图片，只显示图片的右上边区域
bottom left	裁剪模式，不缩放图片，只显示图片的左下边区域
bottom right	裁剪模式，不缩放图片，只显示图片的右下边区域

具体详情参考官方文档：image | 微信开放文档 (qq.com)

3.2 wx.chooseMedia

拍摄或从手机相册中选择图片或视频。

参数

• count

  • 默认值：9
  • 最多可以选择的文件个数，基础库2.25.0前，最多可支持9个文件，2.25.0及以后最多可支持20个文件

• mediaType 文件类型

  • image 只能拍摄图片或从相册选择图片
  • video 只能拍摄视频或从相册选择视频
  • mix 可同时选择图片和视频

• sourceType 图片和视频选择的来源

  • album 从相册选择
  • camera 使用相机拍摄

举个栗子：选择本地图片，将其使用image展示

<button bindtap="onChooseImage">选择图片</button>
<image src="{{chooseImageUrl}}" mode="widthFix" />

  onChooseImage() {wx.chooseMedia({mediaType: 'image'}).then(res => {const imagePath = res.tempFiles[0].tempFilePaththis.setData({ chooseImageUrl: imagePath })})}

四、ScrollView滚动组件

scroll-view可以实现局部滚动

常见的属性

属性	类型	默认值	必填	说明
scroll-x	boolean	false	否	允许横向滚动
scroll-y	boolean	false	否	允许纵向滚动
bindscrolltoupper	eventhandle		否	滚动到顶部/左边时触发
bindscrolltolower	eventhandle		否	滚动到底部/右边时触发
bindscroll	eventhandle		否	滚动时触发，event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY}

纵向滚动

<scroll-view class="container-y" scroll-y><block wx:for="{{viewColors}}" wx:key="*this"><view class="item" style="background: {{item}};">{{item}}</view></block>
</scroll-view>

.container-y {height: 150px;background-color: cornflowerblue;
}
.item {width: 100px;height: 100px;
}

横向滚动

<scroll-view class="container-x" scroll-x enable-flex><block wx:for="{{viewColors}}" wx:key="*this"><view class="item" style="background: {{item}};">{{item}}</view></block>
</scroll-view>

.container-x {height: 150px;background-color: cornflowerblue;display: flex;
}
.item {width: 100px;height: 100px;flex-shrink: 0;
}

五、组件的共同属性

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