本文介绍小程序中的基础组件,主要包括button、input等组件的基本使用和代码示例。

1.0 button组件

小程序中的button组件就是按钮。

这里列出button组件的主要属性
open-type 微信开放能力。
size 按钮的大小,默认值为default,还能取值mini。
plain 设置按钮是否镂空,布尔类型的值,默认为false。
disabled 是否禁用按钮,布尔类型的值,默认为false。
loading 名称的前面是否设置加载icon,默认为false。
form-type 用来触发form表单中的submit和reset事件。
hover-class 按钮被按下的样式类,none表示没有任何效果。
hover-start-time 按钮被按下多久出现点击态,默认为20毫秒。
hover-stay-time 手指松开按钮点击态的保留时间,默认为70毫秒。
type 按钮的样式类型,默认值为default,还能取值primary和warn。
session-from 会话来源,open-type="contact"时生效。
bindcontact 客服消息回调,open-type="contact"时生效。
binderror 使用开放能力时失败的回调,open-type="launchApp"时生效。
bindopensetting 打开授权设置页面的回调,open-type="openSetting"时生效。
bindgetphonenumber 获取用户手机号码回调,open-type="getPhoneNumber"时生效。
bindgetuserinfo 点击时用户信息在detail中返回,open-type="getUserInfo"时生效。
app-parameter 打开app时向app传递的参数,open-type="launchApp"时生效。
lang 指定返回的用户信息的语言,open-type="getUserInfo"时生效。
send-message-title 会话内消息卡片标题,open-type="contact"时生效。
send-message-img 会话内消息卡片图片,open-type="contact"时生效。
show-message-card 显示会话内消息卡片默认为false,open-type="contact"时生效。
send-message-path 会话内消息卡片点击跳转小程序路径,open-type="contact"时生效。

open-type微信开放能力属性取值说明

1
2
3
4
5
6
7
cotact 打开客服会话。
openSetting 打开授权设置页 。
share 触发用户转发,使用前建议先阅读使用指引。
feedback 打开“意见反馈”页面,用户可提交反馈内容并上传日志。
getUserInfo 获取用户信息,可以从bindgetuserinfo回调中获取到用户信息。
launchApp 打开APP,可以通过app-parameter属性设定向APP传的参数具体说明。
getPhoneNumber 获取用户手机号,可以从bindgetphonenumber回调中获取到用户信息,具体说明。

我们重点关注button组件非开放能力相关的属性,关于开放能力的相关知识点可以查询官方文档,这里给出button组件使用的代码示例。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
//wxml文件中的内容
<!-- 1.0 演示按钮的基本使用 -->
<!-- 001 type属性对比 取值为:defalut(默认白色) warn(红色) primary(绿色) -->
<button type='defalut'>按钮</button>
<button type='warn'>按钮</button>
<button type='primary'>按钮</button>
<!-- 002 size属性:设置按钮的大小 -->
<button size='mini'>按钮</button>
<!-- 003 plain属性:设置按钮是否镂空显示 -->
<button plain>按钮</button>
<!-- 004 disabled属性:设置禁用按钮 -->
<button disabled>按钮</button>
<!-- 005 loading属性:文字前面是否显示icon,布尔类型的值,默认不显示 -->
<button loading>按钮</button>
<!-- 006 form-type属性:设置表单中的submit和reset -->
<form bindsubmit='submitClick' bindreset='resetClick'>
<input type='text' placeholder='请输入用户名' name='usrname'></input>
<input type='text'placeholder='请输入密码' name='password'></input>
<button form-type='submit'>提交表单的数据</button>
<button form-type='reset'>重置表单的数据</button>
</form>
<!-- 007 hover-class属性:设置按钮按下去的样式 -->
<button hover-class='btn-hover'>按钮</button>
<!-- 008 部分开放能力属性测试 -->
<button open-type='contact' bindcontact='testClick'>开放能力打开客服会话</button>
<button open-type='getPhoneNumber'
bindgetphonenumber="getPhoneNumberClick">
开放能力获取用户的手机号码
</button>
//js文件中的内容
Page({
submitClick:function(e){
console.log("点击了表单的提交按钮",e);
},
resetClick: function (e) {
console.log("点击了表单的重置按钮",e);
},
testClick:function(e){
console.log("打开客服会话",e);
},
getPhoneNumberClick:function(){
console.log("获取用户的电话号码",e);
}
});
//wxss文件中的内容
.btn-hover
{
background: #110e1e;
color: #fff;
font-size: 20rpx;
}

2.0 input组件

input组件就是输入框,主要用来处理用户的输入和数据修改等操作。

这里列出input组件的主要属性

type 输入框的类型。
disabled 输入框是否禁用。
value 输入框的初始内容。
password 输入框是密码类型的。
placeholder-style 指定placeholder的样式。
placeholder-class 指定placeholder的样式类。
placeholder 输入框为空的时候显示的占位字符。
maxlength 输入框的最大输入长度,设置为-1表示没有限制默认为140。
confirm-type 弹出键盘的右下角的文字,默认为done,type为text时生效。
confirm-hold 点击键盘右下角按钮时是否保持键盘不收起。
adjust-position 键盘弹起时,是否自动上推页面,默认值为true。
focus 获取焦点。
cursor 指定focus时的光标位置。
selection-start 光标起始位置,自动聚集时有效,需与selection-end搭配使用。
selection-end 光标结束位置,自动聚集时有效,需与selection-start搭配使用。
bindfocus 输入框聚焦时触发。
bindblur 输入框失去焦点时触发。
bindconfirm 点击完成按钮时触发。
bindinput 键盘输入时触发,处理函数能直接return替换输入框的内容。

特定属性的取值情况说明

1
2
3
4
5
6
7
8
9
10
11
12
type属性的取值可以是下面的四种情况,分别对应弹出不同类型的键盘。
text 文本输入键盘
number 数字输入键盘
idcard 身份证输入键盘
digit 带小数点的数字键盘
confirm-type属性的有效值有下面五种,其最终表现与手机输入法本身的实现有关。
send 右下角按钮为“发送”
search 右下角按钮为“搜索”
next 右下角按钮为“下一个”
go 右下角按钮为“前往”
done 右下角按钮为“完成”

这里给出input标签使用的示例代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
//wxml文件内容
<!-- 1.0 测试type属性,有效值为text number idcard digit -->
<input type='text' placeholder='我是文本输入框'></input>
<input type='number' placeholder='我是弹出数字键盘'></input>
<input type='idcard' placeholder='我弹出身份证键盘'></input>
<input type='digit' placeholder='我弹出小数键盘'></input>
<!-- 2.0 测试confirm-type属性:有效值为send search next go done -->
<input confirm-type='send' placeholder='键盘右下角的文字为send-发送'></input>
<input confirm-type='search' placeholder='键盘右下角的文字为search-搜索'></input>
<input confirm-type='next' placeholder='键盘右下角的文字为next-下一项'></input>
<input confirm-type='go' placeholder='键盘右下角的文字为go-前往'></input>
<input confirm-type='done' placeholder='键盘右下角的文字为done-完成'></input>
<!-- 3.0 测试value属性:控制输入框的初始值 -->
<input value='我是该输入框的初始值'></input>
<!-- 4.0 测试disabled属性:控制输入框是否禁用 -->
<input disabled placeholder='禁用输入框'></input>
<!-- 5.0 测试placeholder-style:给占位的文本设置样式 -->
<input placeholder-style='color:red;' placeholder='我是占位的文本'></input>
<!-- 6.0 测试maxlength:限制输入框的最大长度 -->
<input maxlength="10" placeholder='最多只能输入10个字符'></input>
<!-- 7.0 测试事件 -->
<input
bindfocus='onbindfocus'
bindblur='onbindblur'
bindinput='onbindinput'
bindconfirm='onbindconfirm'
placeholder='输入框获取焦点的时候出发'>
</input>
//js文件的内容
Page({
onbindfocus:function(e){
console.log("onbindfocus-获得焦点",e);
},
onbindblur: function (e) {
console.log("onbindblur-失去焦点", e);
},
onbindconfirm: function (e) {
console.log("onbindconfirm-点击完成(键盘右下角)", e);
},
onbindinput: function (e) {
console.log("onbindinput-监听到键盘输入", e);
}
});