前端开发系列099-小程序篇之小程序中的基础组件(二)

本文介绍小程序中的基础组件，主要包括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微信开放能力属性取值说明

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

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

//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替换输入框的内容。

特定属性的取值情况说明

type属性的取值可以是下面的四种情况，分别对应弹出不同类型的键盘。
text	文本输入键盘
number	数字输入键盘
idcard	身份证输入键盘
digit	带小数点的数字键盘

confirm-type属性的有效值有下面五种，其最终表现与手机输入法本身的实现有关。
send	右下角按钮为“发送”
search	右下角按钮为“搜索”
next	右下角按钮为“下一个”
go	右下角按钮为“前往”
done	右下角按钮为“完成”

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

//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);
  }
});