常见【小程序】内置组件

小程序常见内置组件

小程序中的内置组件是非常多的, 下面主要介绍开发中常用的常见的内置组件

🎈Text文本组件

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

常见属性:

属性	类型	默认值	必填	说明	最低版本
selectable	boolean	false	否	文本是否可选 (已废弃)	1.1.0
user-select	boolean	false	否	文本是否可选，该属性会使文本节点显示为 inline-block	2.12.1
space	string		否	显示连续空格	1.4.0

user-select属性决定文本内容是否可以让用户选中, 设置为true, 手指长按可以选中文本

<text user-select="{{true}}">Hello World</text>
<text user-select>Hello World</text>

space有三个取值(了解), 设置如何显式连续空格

<text space="ensp">a    b   c</text>
<text space="emsp">a    b   c</text>
<text space="nbsp">a    b   c</text>

decode是否解码(了解)

decode可以解析的有 < > & ’

<!-- 默认会直接显式 &gt; 不会解码 -->
<text>&gt;</text>
<!-- 设置decode会进行解码 -->
<text decode>&gt;</text>

---

🎈Button按钮组件

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

常见属性：

size属性: Button组件默认是占满整行的, size="mini"是设置小尺寸的按钮, 是包裹内容的大小

合法值	说明
default	默认大小
mini	小尺寸

<button size="mini">按钮</button>

type属性: 设置按钮的样式类型

当然我们也可以自己通过修改css来设置按钮的样式

合法值	说明
primary	绿色
default	白色
warn	红色

<button size="mini" type="primary">绿色</button>
<button size="mini" type="default">白色</button>
<button size="mini" type="warn">红色</button>

plain属性: 设置按钮镂空, 背景色透明

<button size="mini" plain>镂空按钮</button>

disable属性: 是否禁用按钮

<button size="mini" disabled>禁用按钮</button>

loading属性: 按钮名称前是否有loading图标

<button size="mini" loading>加载按钮</button>

hover属性: 按钮按下去会添加样式类

<button size="mini" hover-class="active">按钮</button>

.active {
	color: #fff;
	background-color: skyblue;
}

open-type属性有如下一些值

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

• 我们常用的是获取用户信息, 通过open-type="getUserInfo"获取用户信息, 获取到后在bindgetuserinfo回调中拿到用户信息

<button 
	size="mini" 
	open-type="getUserInfo" 
	bindgetuserinfo="userInfo"
>
	获取用户信息
</button>

// 获取到的用户信息
userInfo(event) {
  console.log(event);
}

• 但是目前这个API无法真正的获取到用户信息, 微信对这个获取信息做出了调整, 现在真正的获取用户信息是使用的是wx.getUserProfile这个API, 使用方式如下

<!-- 1.监听按钮的点击 -->
<button size="mini" bindtap="userInfo">获取用户信息</button>

// 2.在监听函数中调用wx.getUserProfile API
userInfo() {
  wx.getUserProfile({
    // desc必传, 描述拿到用户信息做什么
    desc: 'desc',
    // 拿到用户的信息
    success: (res) => {
      console.log(res);
    }
  })
}

• 小程序早期的API都是不支持Promise风格的, 由于这个API比较新, 它是支持Promise风格的

// 2.在监听函数中调用wx.getUserProfile API
	userInfo() {
		wx.getUserProfile({
			// desc必传, 描述拿到用户信息做什么
			desc: 'desc'
		}).then(res => {
			console.log(res);
		})
	}

按钮的属性非常多, 更多的属性可以查看官方文档: https://developers.weixin.qq.com/miniprogram/dev/component/button.html

---

🎈View视图组件

视图组件, 是一个块级元素，独占一行，通常用作容器组件, 类似于html的div元素

view组件也是有hover-class属性的

<view hover-class="active">哈哈哈</view>

.active {
	color: #fff;
	background-color: skyblue;
}

hover-stop-propagation属性阻止冒泡行为

<view hover-stop-propagation>哈哈哈</view>

view属性比较少, 当成div使用即可, 这个组件没有什么复杂的

---

🎈Image图片组件

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

image组件可以写成单标签, 也可以写成双标签

<image></image>
<image />

其中src属性和html的img的src属性一样, 可以是本地图片，也可以是网络图片

<image src="../../assets/0.jpg" />
<!-- 一些场景可以使用 \ 表示根目录 -->
<image src="/assets/0.jpg" />

Mode属性使用也非常关键，详细属性值查看官网：

https://developers.weixin.qq.com/miniprogram/dev/component/image.html

合法值	说明
top	裁剪模式，不缩放图片，只显示图片的顶部区域
bottom	裁剪模式，不缩放图片，只显示图片的底部区域
center	裁剪模式，不缩放图片，只显示图片的中间区域
left	裁剪模式，不缩放图片，只显示图片的左边区域
right	裁剪模式，不缩放图片，只显示图片的右边区域
top left	裁剪模式，不缩放图片，只显示图片的左上边区域
top right	裁剪模式，不缩放图片，只显示图片的右上边区域
bottom left	裁剪模式，不缩放图片，只显示图片的左下边区域
bottom right	裁剪模式，不缩放图片，只显示图片的右下边区域

<!-- 从下面开始裁剪: 裁剪出一个宽320, 高240的图片 -->
<image src="/assets/0.jpg" mode="bottom" />
<!-- 从右上角开始裁剪: 裁剪出一个宽320, 高240的图片 -->
<image src="/assets/0.jpg" mode="top right" />

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

<image src="/assets/0.jpg" mode="aspectFit" />
<image src="/assets/0.jpg" mode="aspectFill" />

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

<!-- 开发中最多设置的是widthFix -->
<image src="/assets/0.jpg" mode="widthFix" />
<image src="/assets/0.jpg" mode="heightFix" />

注意： image组件默认宽度320px、高度240px

---

🎈ScrollView滚动组件

scroll-view可以实现局部滚动，常见属性如下：

属性	类型	类型默认值	必填	说明	最低版本
scroll-x	boolean	false	否	允许横向滚动	1.0.0
scroll-y	boolean	false	否	允许纵向滚动	1.0.0

注意事项：

实现滚动效果必须添加scroll-x或者scroll-y属性（只需要添加即可，属性值相当于为true了）

垂直方向滚动必须设置scroll-view一个高度, 水平方向滚动必须设置scroll-view一个宽度

纵向滚动

<!-- 1.上下纵向滚动 -->
<scroll-view class="scroll" scroll-y>
	<block wx:for="{{100}}" wx:key="*this">
		<view>{{ item }}</view>
	</block>
</scroll-view>

/* 2.scroll必须有一个高度 */
.scroll {
	height: 100px;
}

横向滚动

<scroll-view class="scroll" scroll-x>
	<block wx:for="{{100}}" wx:key="*this">
		<text>{{ item }}</text>
	</block>
</scroll-view>

/* scroll必须有一个宽度 */
.scroll {
	width: 100px;
}

scroll-view的滚动监听

属性	类型	类型默认值	必填	说明	最低版本
bindscrolltoupper	eventhandle		否	滚动到顶部/左边时触发	1.0.0]
bindscrolltolower	eventhandle		否	滚动到底部/右边时触发	1.0.0
bindscroll	eventhandle		否	滚动时触发，event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY}	1.0.0

<scroll-view 
	class="scroll" 
	bindscrolltoupper="onScrolltoupper" 
	scroll-x bindscrolltolower="onScrolltolower" 
	bindscroll="onScroll"
>
	<block wx:for="{{100}}" wx:key="*this">
		<text>{{ item }}</text>
	</block>
</scroll-view>

// 监听滚动
onScrolltoupper() {
  console.log("滚动到最顶/左部");
},
onScrolltolower() {
  console.log("滚动到最底/右部");
},
onScroll(event) {
  console.log(event.detail);
}

🎈组件的共同属性

公共属性: 就是所有组件都可以设置的属性, 有如下一些公共属性