小程序开发讲义【入门篇】- 03

小程序组件

表单组件

按钮组件

属性说明size：有效取值default,minitype：按钮样式primary,default,warnplain：按钮是否镂空，背景色透明，默认否disabled：是否禁用，默认否loading：名称前是否带loading图标，默认否form-type：有效值submit,reset，点击分别触发对应事件hover-class：默认button-hover，按钮点击下去的默认效果，为none时没有点击效果标签组件属性只有这个for，用于指定一个组件的id进行绑定，绑定后在触发label组件时会触发所绑定的那个组件的事件。

组件Label：

点我.测试

组件Label2：

点我1.测试

点我2.测试

对应的js：

btntest: function(){

console.log('---点我.测试---');

},

btntest1: function(){

console.log('---点我1.测试---');

},

btntest2: function(){

console.log('---点我2.测试---');

},

关于上面的两个实例，具体区别是什么？要能清楚的理解。

CheckBox组件

多选框实现多选的组件，需要放在checkbox-group内使用，且checkbox-group只有一个属性：

bindchange：触发change事件

而checkbox的属性有：value作为具体值，当选中时会传入group变更事件中去。

选择1

选择2

选择3

选择4

选择5

对应的js：

cbxgrpChge: function (me){

var getv = me.detail.value;

this.setData({ cbxsled: getv });

console.log('---CbxGrpChge---', this.data.cbxsled);

},

Radio组件与CheckBox类似

选择1

选择2

选择3

选择4

选择5

对应js：

rdogrpChge: function (me){

var getv = me.detail.value;

this.setData({ rdosled: getv });

console.log('---RdoGrpChge---', this.data.rdosled);

},

只是要注意，单选钮组件选中的是单个值。不是数组Picker选择器组件picker选择器支持3种模式，普通选择器，时间选择器和日期选择器。具体语法为：点击选择...mode为“selector”时，默认值也是这个，为普通选择器。具体属性有：range，指定范围value，选中的值bindchange，绑定事件mode为time的picker属性：value：选中的时间，格式为 hh:mmstart，end：起始和结束，格式为 hh:mmbindchange：绑定的事件

时间选择器：具体选择为：{{timePk}}

mode为date的picker属性比time多了个时间单位fieldsvalue，start，end：格式为yyyy-mm-ddfields：有效值为 day、month、yearbindchange：绑定的事件

日期选择器：具体选择为：{{datePk}}

滑动选择器 sliderslider是用于选择数值的滑块，属性有：min：最小值，默认0max：最大值，默认100step：步长，默认1disabled：是否禁用，默认 否value：当前值，默认0show-value：是否显示当前值，默认 否bindchange：每拖动一次的变化值对应js：

sliderChge: function (me){

console.log('值：', me.detail.value);

},

事件的触发是滑动结束后触发。开关选择器 switch属性有：checked：是否选中，默认 否type：类型，默认switch，另一个值 checkboxbindchange：点选后触发事件输入框组件 input属性有：value：输入值type：类型，取值有 text、number、idcard、digit、time、datepassword：是否密码类型 默认 否placeholder：提示信息placeholder-style：指定placeholder的样式placeholder-class：指定样式类名disabled：是否禁用，默认 否maxlengh：输入最大长度，默认140，如果设置-1，则不限制auto-focus：自动获得焦点，默认 否，页面里只能有一个input或textarea设置自动获得焦点。focus：获得焦点，默认 否bindinput：绑定输入事件bindfocus：获得焦点时触发bindblur：失去焦点时触发多行输入框组件 textarea属性有：value：输入值placeholder：提示信息placeholder-style：指定placeholder的样式placeholder-class：指定样式类名disabled：是否禁用，默认 否maxlengh：输入最大长度，默认140，如果设置-1，则不限制auto-focus：自动获得焦点，默认 否，页面里只能有一个input或textarea设置自动获得焦点。auto-height：自动增高，默认 否，设置true后height失效focus：获得焦点，默认 否bindlinechange：输入框行数变化时触发bindfocus：获得焦点时触发bindblur：失去焦点时触发表单Form组件

小程序中的form和普通html页面中的作用不同，因为小程序中的form不是用来做post或get提交数据的，而是通过事件对象来获取form中的数据的；form组件需配合button的form-type来使用，如果form-type为submit则点击按钮后会触发form的bindsubmit事件，同理，如果form-type为reset时，会触发form的bindreset事件。

属性：report-submit：是否返回formId发送模板消息bindsubmit：提交事件bindreset：重置事件对于form组件中的组件，必须包含name标签属性，才可以在bindsubmit事件中获取各个元素组件的值或者选择的索引值。image 图片组件标签语法：mode：默认为scaleToFill，bindload：图片加载完成后触发，传递图片的宽度和高度，单位pxmode的支持属性值：scaleToFill，为不保持纵横比，铺满拉伸至整个图片；aspectFit，保持纵横比，使得图片长边能够显示完全，可以完整显示图片aspectFill，保持纵横比，使得图片的短边能够显示完全，即会发生截取，只能是长度或垂直方向上能够显示完整，另一边会发生截取。mode还支持截取模式：top：只显示上部分bottom：只显示下部分left、right：只显示左边或右边部分center：只显示中间部分top left、top right：只显示左上或右上部分bottom left、bottom right：只显示左下或右下部分音频组件 audio属性有：id：唯一标识src：源地址loop：是否循环播放，默认 否controls：是否显示默认控件， 默认 是poster：音频封面图片的源地址name：显示在音频上的名称author：显示在音频上的作者，以上三项如果contorls为否时，设置无效binderror：错误事件bindplay：播放事件bindpause：暂停事件bindtimeupdate：播放进度改变时触发bindended：播放结束时触发
如何设置audio自动播放呢？可以通过以下方法：在js的ready方法中调用wx.createAudioContextthis.audio = wx.createAudioContext('myAudio');this.audio.play();视频组件 video属性有：src：源地址ontrols：是否显示播放控件，默认 是danmu-list：弹幕列表danmu-btn：是否显示弹幕按钮，默认否enable-danmu：是否开启弹幕，默认否autoplay：是否自动播放，默认否bindplay、bindpause、bindended、binderror：四类事件其中的danmu-list为一个数组，每个数组元素为一组json对象：[{text:'弹幕内容...', color:'#111111', time:3},{text:'弹幕内容...', color:'#111111', time:3}]如果要动态发送弹幕，可以通过相关的API来实现，如：wx.createVedioContext('vdoid')，获得返回对象句柄后，通过sendDanm({ text:'这是个弹幕', color:'#123123'})来发送。还有一个常用的与vedio相关的API是wx.chooseVedio();做一个实例，比如在js中写在获取本地视频的方法中：getLocVedio: function(){    wx.chooseVedio({        sourceType: [ 'album', 'camera' ],        maxDuration: 60,        camera: [ 'front', 'back' ],        success: function (res) {            this.setData( {  vedioSrc: res.tempFilePath } );        })    })},