您现在的位置是：网站首页>>微信>>微信小程序

一：button按钮

button组件属性：

size:按钮的大小,默认为default，可选参数defaul(默认大小)，mini(小尺寸)

type：按钮的样式类型,默认为default,可选参数：primary(绿色),default(白色),warn(红色)

plain:按钮是否镂空，背景色透明,默认为false

disabled:是否禁用,默认为false

loading:名称前是否带 loading 图标,默认为false

form-type:用于 form 组件，可选参数为：submit(提交表单)，reset(重置表单  )点击分别会触发 form 组件的submit/reset

open-type:微信开放能力,常用参数为：getPhoneNumber(获取用户手机号,可以从bindgetphonenumber回调中获取到用户信息),getUserInfo(获取用户信息，可以从bindgetuserinfo回调中获取到用户信息)

hover-class：指定按钮按下去的样式类。当 hover-class="none" 时，没有点击态效果，默认为button-hover

hover-stop-propagation：指定是否阻止本节点的祖先节点出现点击态，默认为false

hover-start-time：按住后多久出现点击态，单位毫秒，默认为20

hover-stay-time：手指松开后点击态保留时间，单位毫秒，默认为70

lang：指定返回用户信息的语言，zh_CN 简体中文，zh_TW 繁体中文，en 英文，默认为en

bindgetuserinfo：用户点击该按钮时，会返回获取到的用户信息，open-type="getUserInfo"时有效

bindgetphonenumber:获取用户手机号回调，open-type=getPhoneNumber时有效

例：

<!-- wxml -->
<view  wx:for="{{types}}">
<button 
type="{{item}}" 
size="{{warnSize}}" 
loading="{{loading}}" 
plain="{{plain}}" 
disabled="{{disabled}}" 
bindtap="{{item}}"
> {{item}} </button>
</view>
<button open-type="getUserInfo" lang="zh_CN" bindgetuserinfo="userInfo">获取用户信息</button>
<button open-type="getPhoneNumber" lang="zh_CN" bindgetphonenumber="phoneNumber">获取用户手机号</button>

Page({
data: {
disabled: false,//设置是否禁用
plain: false,//设置是否镂空
loading: false,//设置名称前是否加loading
types: ['default', 'primary', 'warn']
},
userInfo: function (e) {
//授权获取用户信息
console.log(e.detail)
},
phoneNumber: function (e) {
//授权获取用户手机
console.log(e.detail)
},
})

现象如下：



二：多选框(checkbox + checkbox-group)

checkbox组件属性：

value:checkbox标识，选中时触发checkbox-group的 change 事件，并携带 checkbox 的 value

disabled：是否禁用,默认为false

checked：当前是否选中,默认为false

color：checkbox的颜色,默认为#09BB07

checkbox-group组件属性：

bindchange：checkbox-group中选中项发生改变时触发 change 事件，detail = {value:[选中的checkbox的value的数组]}

例：

<!-- wxml -->
<checkbox-group bindchange="checkboxChange">
<label class="checkbox" wx:for="{{items}}">
<checkbox value="{{item.name}}" checked="{{item.checked}}"/>{{item.value}}
</label>
</checkbox-group>

// js
Page({
data: {
items: [
{name: 'USA', value: '美国'},
{name: 'CHN', value: '中国', checked: 'true'},
{name: 'BRA', value: '巴西'},
{name: 'JPN', value: '日本'},
{name: 'ENG', value: '英国'},
{name: 'TUR', value: '法国'},
]
},
checkboxChange: function(e) {
console.log('checkbox发生change事件，携带value值为：', e.detail.value)
}
})

现象如下：




三：form表单组件

form组件属性：

report-submit：是否返回 formId 用于发送模板消息，默认为false

report-submit-timeout：等待一段时间（毫秒数）以确认 formId 是否生效，如果失败，将返回 requestFormId:fail 开头的 formId 

bindsubmit：携带 form 中的数据触发 submit 事件，event.detail = {value : {'name': 'value'} , formId: ''} 

bindreset：表单重置时会触发 reset 事件 

例：

<form bindsubmit="formSubmit" bindreset="formReset">
<view>
<input name="input" placeholder="请输入" />
</view>
<view>
<button form-type="submit">Submit</button>
<button form-type="reset">Reset</button>
</view>
</form>

Page({
formSubmit: function (e) {
console.log('form发生了submit事件，携带数据为：', e.detail.value)
},
formReset: function () {
console.log('form发生了reset事件')
}
})

四：input组件


input属性参考：https://developers.weixin.qq.com/miniprogram/dev/component/input.html

例：


<!--input.wxml-->
<view class="section">
<input placeholder="这是一个可以自动聚焦的input" auto-focus/>
</view>
<view class="section">
<input password type="text"  placeholder="这是一个密码输入框"/>
</view>

五：滚动选择器

1：picker选择器属性参考：https://developers.weixin.qq.com/miniprogram/dev/component/picker.html

例：

<!--wxml-->
<view class="section">
<view class="section__title">普通选择器</view>
<picker bindchange="bindPickerChange" value="{{index}}" range="{{array}}">
<view class="picker">
当前选择：{{array[index]}}
</view>
</picker>
</view>
<view class="section">
<view class="section__title">多列选择器</view>
<picker mode="multiSelector" bindchange="bindMultiPickerChange" bindcolumnchange="bindMultiPickerColumnChange" value="{{multiIndex}}" range="{{multiArray}}">
<view class="picker">
当前选择：{{multiArray[0][multiIndex[0]]}}，{{multiArray[1][multiIndex[1]]}}，{{multiArray[2][multiIndex[2]]}}
</view>
</picker>
</view>
<view class="section">
<view class="section__title">时间选择器</view>
<picker mode="time" value="{{time}}" start="09:01" end="21:01" bindchange="bindTimeChange">
<view class="picker">
当前选择: {{time}}
</view>
</picker>
</view>
<view class="section">
<view class="section__title">日期选择器</view>
<picker mode="date" value="{{date}}" start="2015-09-01" end="2020-09-01" bindchange="bindDateChange">
<view class="picker">
当前选择: {{date}}
</view>
</picker>
</view>
<view class="section">
<view class="section__title">省市区选择器</view>
<picker mode="region" bindchange="bindRegionChange" value="{{region}}" custom-item="{{customItem}}">
<view class="picker">
当前选择：{{region[0]}}，{{region[1]}}，{{region[2]}}
</view>
</picker>
</view>

Page({
data: {
array: ['美国', '中国', '巴西', '日本'],
objectArray: [
{
id: 0,
name: '美国'
},
{
id: 1,
name: '中国'
},
{
id: 2,
name: '巴西'
},
{
id: 3,
name: '日本'
}
],
index: 0,
multiArray: [['无脊柱动物', '脊柱动物'], ['扁性动物', '线形动物', '环节动物', '软体动物', '节肢动物'], ['猪肉绦虫', '吸血虫']],
objectMultiArray: [
[
{
id: 0,
name: '无脊柱动物'
},
{
id: 1,
name: '脊柱动物'
}
], [
{
id: 0,
name: '扁性动物'
},
{
id: 1,
name: '线形动物'
},
{
id: 2,
name: '环节动物'
},
{
id: 3,
name: '软体动物'
},
{
id: 3,
name: '节肢动物'
}
], [
{
id: 0,
name: '猪肉绦虫'
},
{
id: 1,
name: '吸血虫'
}
]
],
multiIndex: [0, 0, 0],
date: '2016-09-01',
time: '12:01',
region: ['广东省', '广州市', '海珠区'],
customItem: '全部'
},
bindPickerChange: function (e) {
console.log('picker发送选择改变，携带值为', e.detail.value)
this.setData({
index: e.detail.value
})
},
bindMultiPickerChange: function (e) {
console.log('picker发送选择改变，携带值为', e.detail.value)
this.setData({
multiIndex: e.detail.value
})
},
bindMultiPickerColumnChange: function (e) {
console.log('修改的列为', e.detail.column, '，值为', e.detail.value);
var data = {
multiArray: this.data.multiArray,
multiIndex: this.data.multiIndex
};
data.multiIndex[e.detail.column] = e.detail.value;
switch (e.detail.column) {
case 0:
switch (data.multiIndex[0]) {
case 0:
data.multiArray[1] = ['扁性动物', '线形动物', '环节动物', '软体动物', '节肢动物'];
data.multiArray[2] = ['猪肉绦虫', '吸血虫'];
break;
case 1:
data.multiArray[1] = ['鱼', '两栖动物', '爬行动物'];
data.multiArray[2] = ['鲫鱼', '带鱼'];
break;
}
data.multiIndex[1] = 0;
data.multiIndex[2] = 0;
break;
case 1:
switch (data.multiIndex[0]) {
case 0:
switch (data.multiIndex[1]) {
case 0:
data.multiArray[2] = ['猪肉绦虫', '吸血虫'];
break;
case 1:
data.multiArray[2] = ['蛔虫'];
break;
case 2:
data.multiArray[2] = ['蚂蚁', '蚂蟥'];
break;
case 3:
data.multiArray[2] = ['河蚌', '蜗牛', '蛞蝓'];
break;
case 4:
data.multiArray[2] = ['昆虫', '甲壳动物', '蛛形动物', '多足动物'];
break;
}
break;
case 1:
switch (data.multiIndex[1]) {
case 0:
data.multiArray[2] = ['鲫鱼', '带鱼'];
break;
case 1:
data.multiArray[2] = ['青蛙', '娃娃鱼'];
break;
case 2:
data.multiArray[2] = ['蜥蜴', '龟', '壁虎'];
break;
}
break;
}
data.multiIndex[2] = 0;
break;
}
console.log(data.multiIndex);
this.setData(data);
},
bindDateChange: function (e) {
console.log('picker发送选择改变，携带值为', e.detail.value)
this.setData({
date: e.detail.value
})
},
bindTimeChange: function (e) {
console.log('picker发送选择改变，携带值为', e.detail.value)
this.setData({
time: e.detail.value
})
},
bindRegionChange: function (e) {
console.log('picker发送选择改变，携带值为', e.detail.value)
this.setData({
region: e.detail.value
})
}
})

六：slider滑动选择器


slider属性参考：https://developers.weixin.qq.com/miniprogram/dev/component/slider.html

例：

<!--wxml-->
<view class="section section_gap">
  <text class="section__title">显示当前value</text>
  <view class="body-view">
    <slider 
    bindchange="sliderchange" //完成一次拖动后触发的事件
    show-value //显示当前数据
    step="5" //步长,取值必须大于 0，并且可被(max - min)整除
    min="0" //最小值
    max="200"//最大值
    />
  </view>
</view>

//js
Page({
sliderchange(e) {
console.log('slider' + 'index' + '发生 change 事件，携带值为', e.detail.value)
}
})

现象如下：




七：switch开关组件

switch属性参考：https://developers.weixin.qq.com/miniprogram/dev/component/switch.html

例：

<!-- wxml -->
<view class="body-view">
<switch checked bindchange="switch1Change"/>
<switch bindchange="switch2Change"/>
</view>

// js
Page({
switch1Change: function (e) {
console.log('switch1 发生 change 事件，携带值为', e.detail.value)
},
switch2Change: function (e) {
console.log('switch2 发生 change 事件，携带值为', e.detail.value)
}
})

现象如下：