微信小程序开发手记之五：组件

Posted 2023-02-28 王梵

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了微信小程序开发手记之五：组件相关的知识，希望对你有一定的参考价值。

icon

icon组件有3个属性，如下：

type，可选值：success, success_no_circle, info, info_circle，warn, waiting, cancel, download, search, clear
color，如#C9C9C9。
size，默认为23px。

先看一张效果图：

再看具体的wxml和wxss。

<view class="demo-view-4">
    <view class="view-1">
        <icon class = "margin" type="circle" />
        <view class="margin">circle：多选未选中</view>
    </view>
    <view class="view-1">
        <icon class = "margin" type="success" />
        <view class="margin">success：成功或已选中</view>
    </view>
    <view class="view-1">
        <icon class = "margin" type="success_no_circle" />
        <view class="margin">success_no_circle：单选已选中</view>
    </view>
    <view class="view-1">
        <icon class = "margin" type="info" />
        <view class="margin">info：信息提示</view>
    </view>
    <view class="view-1">
        <icon class = "margin" type="warn" color="#C9C9C9" />
        <view class="margin">warn-#C9C9C9：普通警告</view>
    </view>
    <view class="view-1">
        <icon class = "margin" type="warn" />
        <view class="margin">warn：强烈警告</view>
    </view>
    <view class="view-1">
        <icon class = "margin" type="waiting" />
        <view class="margin">waiting：等待</view>
    </view>
    <view class="view-1">
        <icon class = "margin" type="download" />
        <view class="margin">download：可下载</view>
    </view>
    <view class="view-1">
        <icon class = "margin" type="info_circle" />
        <view class="margin">info_circle：有信息提示</view>
    </view>
    <view class="view-1">
        <icon class = "margin" type="cancel" />
        <view class="margin">cancel：停止或关闭</view>
    </view>
    <view class="view-1">
        <icon class = "margin" type="search" />
        <view class="margin">search：搜索</view>
    </view>

    <view class="view-1">
        <icon class = "margin" type="clear" />
        <view class="margin">clear：删除</view>
    </view>

    <view class="view-1">
        <view class="margin">PS:每个type都可以设置颜色(color),大小(size)</view>

    </view>


</view>

.demo-view-4
    display:flex;
    height: 100%;
    flex-direction: column;


.view-1
    display:flex;
    height: 100%;
    flex-direction: row;


.margin
    margin: 20rpx;

text

效果图如下：

wxml如下：

<text>My name is wisely。\\n I am a androider！</text>

progress

progress组件的属性如下：

属性名	类型	默认值	说明
percent	Float	无	百分比0~100
show-info	Boolean	false	在进度条右侧显示百分比
stroke-width	Number	6	进度条线的宽度，单位px
~~color~~	~~Color~~	~~#09BB07~~	~~进度条颜色（请使用 activeColor）~~
activeColor	Color		已选择的进度条的颜色
backgroundColor	Color		未选择的进度条的颜色
active	Boolean	false	进度条从左往右的动画

效果图如下：

<view class="demo-view-4">

    <progress class = "margin" percent="60" show-info/>

    <progress class = "margin" percent = "80" active activeColor = "pink"/>

    <progress class = "margin" percent="40" stroke-width="12" backgroundColor = "black"/>
</view>

.demo-view-4
    display:flex;
    height: 100%;
    flex-direction: column;


.margin
    margin: 20rpx;

button

button组件的属性如下

属性名	类型	默认值	说明
size	String	default	有效值 default, mini
type	String	default	按钮的样式类型，有效值 primary, default, warn
plain	Boolean	false	按钮是否镂空，背景色透明
disabled	Boolean	false	是否禁用
loading	Boolean	false	名称前是否带 loading 图标
form-type	String	无	有效值：submit, reset，用于组件，点击分别会触发 submit/reset 事件
open-type	String	无	有效值：contact，打开客服会话
hover-class	String	button-hover	指定按钮按下去的样式类。当
hover-start-time	Number	20	按住后多久出现点击态，单位毫秒
hover-stay-time	Number	70	手指松开后点击态保留时间，单位毫秒

先来看效果图：

Page(
  data:
    "defaultSize":"default",
    "primarySize":"default",
    "warnSize":"default",
    "plain":false,
    "loading":false,
    "disabled":false
  ,
  setPlain:function()
      this.setData(
        "plain":!this.data.plain
      )
  ,
  setLoading:function()
      this.setData(
        "loading":!this.data.loading
      )
  ,
  setDisabled:function()
      this.setData(
        "disabled":!this.data.disabled
      )
  
)

再来看wxml

<view class="demo-view-4">
    <button class="margin" type="default" size="defaultSize" plain="plain" loading="loading" disabled="disabled">default</button>

    <button class="margin" type="primary" size="primarySize"plain="plain" loading="loading" disabled="disabled">primary</button>

    <button class="margin" type="warn" size="warnSize" plain="plain" loading="loading" disabled="disabled">warn</button>

    <button class = "margin" bindtap="setPlain">设置是否镂空（plain属性）</button>

    <button class="margin" bindtap="setLoading">设置是否显示进度圈(loading属性)</button>

    <button class="margin" bindtap="setDisabled">设置是否可用(disabled属性)</button>

</view>

.demo-view-4
    display:flex;
    height: 100%;
    flex-direction: column;


.margin
    margin: 20rpx;

checkbox

checkbox是放在checkbox-group中使用的，checkbox-group内部可以有多个checkbox，它的属性如下

属性名	类型	默认值	说明
bindchange	EventHandle		中选中项发生改变是触发 change 事件，detail = value:[选中的checkbox的value的数组]

checkbox的属性如下

属性名	类型	默认值	说明
value	String		标识，选中时触发的 change 事件，并携带的 value
disabled	Boolean	false	是否禁用
checked	Boolean	false	当前是否选中，可用来设置默认选中
color	Color		checkbox的颜色，同css的color，比如：color=”#FF0000”，可以将框内的对勾颜色设置为红色

运行效果图如下：

Page(
  data:

    items:[
      "name":"china","value":"中国","checked":true,
      "name":"US","value":"英国","checked":false,
      "name":"USA","value":"美国","checked":false
    ]
  ,
  checkboxChanage:function(e)
      console.log(e.detail.value)
  
)

<checkbox-group class="demo-view-4" bindchange="checkboxChanage">

    <label wx:for="items">
        <checkbox class = "margin" value="item.name" checked="item.checked" >item.value</checkbox>
    </label>

</checkbox-group>

.demo-view-4
    display:flex;
    height: 100%;
    flex-direction: column;


.margin
    margin: 20rpx;

需要注意的地方

如果直接在wxml中为checkbox设置checked属性，那么无论设置true还是false，都会显示选中，这点与下面的radio有些类似，应该都是一个bug。

input

input属性如下：

属性名	类型	默认值	说明
value	String		输入框的初始内容
type	String	“text”	input 的类型，有效值：”text”, “number”, “idcard”, “digit”
password	Boolean	false 是否是密码类型
placeholder	String		输入框为空时占位符
placeholder-style	String		指定 placeholder 的样式
placeholder-class	String	“input-placeholder” 指定 placeholder 的样式类
disabled	Boolean	false	是否禁用
maxlength	Number	140	最大输入长度，设置为 -1 的时候不限制最大长度
cursor-spacing	Number	0	指定光标与键盘的距离，单位 px 。取 input 距离底部的距离和 cursor-spacing 指定的距离的最小值作为光标与键盘的距离
auto-focus	Boolean	false	(即将废弃，请直接使用 focus )自动聚焦，拉起键盘
focus	Boolean	false	获取焦点
confirm-type	String	“done”	设置键盘右下角按钮的文字，有效值： “send”,”search”,”next”,”go”,”done”
confirm-hold	Boolean	false	点击键盘右下角按钮时是否保持键盘不收起
bindinput	EventHandle		当键盘输入时，触发input事件，event.detail = value: value，处理函数可以直接 return 一个字符串，将替换输入框的内容。
bindfocus	EventHandle		输入框聚焦时触发，event.detail = value: value
bindblur	EventHandle		输入框失去焦点时触发，event.detail = value: value
bindconfirm	EventHandle		点击完成按钮时触发，event.detail = value: value

效果图如下：

wxml和wxss如下

<view class="demo-view-5">

    <text class="bc_text">word</text>

    <input class="bc_input" type="text" placeholder="请输入用户名" placeholder-style="color:#FF0000" value="wisely" confirm-type="next"focus="true" bindinput="bindinput"/>

    <input class="bc_input" type="idcard" placeholder="请输入身份证号" placeholder-class="placeholder_style" maxlength="18" confirm-type="next"/>

    <input class="bc_input" type="password" placeholder="请输入密码" confirm-type="send" confirm-hold="true"/>


</view>

.demo-view-5
    display:flex;
    height: 100%;
    flex-direction: column;
    background-color: palegoldenrod;


.bc_input
    margin: 20rpx;
    background-color: #FFFFFF;
    padding: 20rpx;


.bc_text
    margin: 20rpx;
    padding-left: 20rpx;


.placeholder_style
    color: #00ff00;

picker

picker分3种模式

selector，默认值
date，日期选择器
time，时间选择器

selector模式时的属性如下

属性名	类型	默认值	说明
range	Array / Object Array	[]	mode为 selector 时，range 有效
range-key	String		当 range 是一个 Object Array 时，通过 range-key 来指定 Object 中 key 的值作为选择器显示内容
value	Number	0	value 的值表示表示选择了 range 中的第几个（下标从 0 开始）。
bindchange	EventHandle		value 改变时触发 change 事件，event.detail = value: value
disabled	Boolean	false	是否禁用

date模式下的属性，如下

属性名	类型	默认值	说明
value	String	0	表示选中的日期，格式为”YYYY-MM-DD”
start	String		表示有效日期范围的开始，字符串格式为”YYYY-MM-DD”
end	String		表示有效日期范围的结束，字符串格式为”YYYY-MM-DD”
fields	String	day	有效值 year,month,day，表示选择器的粒度
bindchange	EventHandle		value 改变时触发 change 事件，event.detail = value: value
disabled	Boolean	false	是否禁用

time模式下的属性

属性名	类型	默认值	说明
value	String		表示选中的时间，格式为”hh:mm”
start	String		表示有效时间范围的开始，字符串格式为”hh:mm”
end	String		表示有效时间范围的结束，字符串格式为”hh:mm”
bindchange	EventHandle		value 改变时触发 change 事件，event.detail = value: value
disabled	Boolean	false	是否禁用

效果图如下：

Page(
  data:
    array:[
      "海淀区",
      "朝阳区",
      "昌平区",
      "东城区",
      "西城区",
      "丰台区",
      "石景山区",
      "大兴区",
      "顺义区",
      "通州区",
      "房山区",
      "密云区",
      "怀柔区",
      "平谷区",
      "延庆区"
    ],
    index:1,
    date:'2017-04-17',
    time:'15:07'
  ,
  bindchanges:function(e)//方法名不能与属性名相同
    this.setData(
      index:e.detail.value
    )

  ,
  bindDateChange:function(e)
    this.setData(
      date:e.detail.value

    )
  ,
  bindTimeChange:function(e)
    this.setData(
      time:e.detail.value
    )
  
)

<view class="demo-view-5">

    <picker bindchange="bindchanges" value="index" range="array">
        <view class="bc_text">
        当前选择：array[index]
        </view>
    </picker>

    <picker mode="date" value="date" start="2015-09-09" end="2020-09-09" bindchange="bindDateChange">
        <view class="bc_text">
        当前日期：date
        </view>
    </picker>

    <picker mode="time" value="time" start="00:00" end="23:59" bindchange="bindTimeChange">
        <view class="bc_text">
        当前时间：time
        </view>
    </picker>

</view>

.demo-view-5
    display:flex;
    height: 100%;
    flex-direction: column;
    background-color: palegoldenrod;


.bc_text
    margin: 20rpx;
    padding: 20rpx;
    background-color: #FFFFFF;

picker-view

picker-view的属性如下

属性名	类型	说明
value	Number Array	数组中的数字依次表示 picker-view 内的 picker-view-colume 选择的第几项（下标从 0 开始），数字大于 picker-view-column 可选项长度时，选择最后一项。
indicator-style	String	设置选择器中间选中框的样式
indicator-class	String	设置选择器中间选中框的类名
bindchange	EventHandle	当滚动选择，value 改变时触发 change 事件，event.detail = value: value；value为数组，表示 picker-view 内的 picker-view-column 当前选择的是第几项（下标从 0 开始）

效果图如下：

const date = new Date()
const years = []
const months = []
const days = []
for(let i=1990;i<=date.getFullYear();i++)//之前一直不显示年，原因是这里getFullYear()方法没有加()
  years.push(i)


for(let i=1;i<=12;i++)
  months.push(i)


for(let i=1;i<=31;i++)
  days.push(i)



Page(
  data:
    years:years,
    months:months,
    days:days,
    year:date.getFullYear(),
    month:2,
    day:2,
    value:[9999,1,1]
  ,
  bindchange:function(e)//方法名不能与属性名相同

    const val = e.detail.value
    this.setData(
      year:this.data.years[val[0]],
      month:this.data.months[val[1]],
      day:this.data.days[val[2]]

    )

  

)

<view class="demo-view-5">

    <view class="bc_text">year年month月day日</view>

    <picker-view style="width:100%;height:300px;margin-left:100rpx" value="value" bindchange="bindchange" indicator-style="height:50px;">

        <picker-view-column >
            <view wx:for="years" style="line-height:50px">item年</view>
        </picker-view-column>

        <picker-view-column>
            <view wx:for="months" style="line-height:50px">item月</view>
        </picker-view-column>

        <picker-view-column>
            <view wx:for="days" style="line-height:50px">item日</view>
        </picker-view-column>

    </picker-view>

</view>

.demo-view-5
    display:flex;
    height: 100%;
    flex-direction: column;
    background-color: #FFFFFF;
    justify-content: center;
    align-items: center;


.bc_text
    margin: 20rpx;
    padding: 20rpx;
    background-color: #FFFFFF;

radio

radio一般与radio-group一起使用，radio-group的属性如下

属性名	类型	默认值	说明
bindchange	EventHandle		中的选中项发生变化时触发 change 事件，event.detail = value: 选中项radio的value

radio的属性如下

属性名	类型	默认值	说明
value	String		标识。当该选中时，的 change 事件会携带的value
checked	Boolean	false	当前是否选中
disabled	Boolean	false	是否禁用
color	Color		radio的颜色，同css的color

效果图如下：

Page(
  data:
    items:[
      "name":"US","value":"英国",checked:true,
      "name":"USA","value":"美国",
      "name":"ZH","value":"中国"
    ]
  ,
  bindchange:function(e)
    console.log(e.detail.value)
  

)

<radio-group class="demo-view-5" bindchange="bindchange">
        <label wx:for="items">
            <radio value="item.name" checked="item.checked" style="margin:20rpx;" >item.value</radio>
        </label>
    </radio-group>

.demo-view-5
    display:flex;
    height:100%;
    flex-direction: column;

需要注意的地方：

在设置默认选中的项时，设置checked时需要注意它后面的值，不能是字符串true或false，否则会出问题，比如将上面js中的data数据稍作修改，如下：

"name":"US","value":"英国",checked:"true",
"name":"USA","value":"美国",checked:"false",
"name":"ZH","value":"中国",checked:"false"

似乎并没有改变什么，但运行时发现，默认选择的不是第一个，而是最后一个。只要将数据改成boolean类型，而不是字符串类型即可。

同样的，在wxml中直接为radio的checked属性设置常量，而不是变量，如下面：

<radio-group name="radiogroup">
    <label>
            <radio value="USA"  />美国
            <radio value="ZH" checked="false"/>中国    
    </label>            
</radio-group>

那么，默认选中的就是第2个中国，只要设置了checked属性，不管是true还是false，都是选中状态。

如果2个radio都设置了checked属性，那么就会选中第2个
如果第1个设置了checked属性，选中第1个。

这应该是微信小程序的一个bug。

另外需要注意的一点，如果radio-group中只设置了一个radio，那么选中后，是无法取消的。即便radio-group中有多个radio，主要选中了一个，以后也必然会有一个被选中，不会出现没有radio选中的情况发生。

slider

slider的属性如下

属性名	类型	默认值	说明
min	Number	0	最小值
max	Number	100	最大值
step	Number	1	步长，取值必须大于 0，并且可被(max - min)整除
disabled	Boolean	false	是否禁用
value	Number	0	当前取值
color	Color	e9e9e9	背景条的颜色（请使用 backgroundColor）
selected-color	Color	1aad19	已选择的颜色（请使用 activeColor）
activeColor	Color	1aad19	已选择的颜色
backgroundColor	Color	e9e9e9	背景条的颜色
show-value	Boolean	false	是否显示当前 value
bindchange	EventHandle		完成一次拖动后触发的事件，event.detail = value: value

效果图如下：

Page(
  data:

  ,
  bindchange:function(e)
    console.log(e.detail.value)
  

)

<view class="demo-view-5">
    <slider value = "20" step="1" show-value bindchange="bindchange"/>    

    以上是关于微信小程序开发手记之五：组件的主要内容，如果未能解决你的问题，请参考以下文章 
 微信小程序开发优秀教程及文章合集第一期
 微信小程序开发手记之四：视图容器
 微信小程序开发手记之二：属性display
 微信小程序开发手记之六：API
 微信小程序开发手记之六：API
 微信小程序开发手记之六：API