3-4章 第3章 form表单组件与小程序前后端通信

View它相当于是一个点击触发一个事件，但是它的事件应该是相对来说可能是比较是偏向于页面上的一些展示，或者说是页面上的一些导航的一些跳转。Button它是一个标签，

button是一个标签，一般去触发按钮的话大部分我们会去让我们的小程序页面和我们的后端进行一个交互，交互的时候它会有一个网络的延时。当有网络延时的时候我们就可以使用这个loading。

button按钮/buttonbutton size="mini"按钮1/buttonbutton size="mini" type='default'按钮2/buttonbutton size="mini" type='primary'按钮3/buttonbutton size="mini" type='warn' plain='{{true}}'按钮4/buttonbutton size="mini" type='warn' disabled='{{true}}' loading='{{true}}'按钮5/button

form-type要结合form表单一起去使用。

和View有关的。

checkbox是多选框。在Web开发的html页面里面肯定也是有用过checkbox。checkbox它也是可以配合label一起来使用的。

把所有的多选框全部放到多选框组checkbox-group内才可以。并且这个组会有一个change事件。这是我们以前所说的onchange事件。那么我们通过bindchange就可以绑定一个change事件。

这是单标签的展示方式。

checkbox-group    checkbox value='v中国'/中国    checkbox value='v美国' disabled='{{true}}'/美国    checkbox value='v俄国' checked='{{true}}' color='red'/俄国/checkbox-groupcheckbox-group    view wx:for="{{array}}"    checkbox value='{{item.name}}' checked='{{item.checked}}' color='{{item.color}}' disabled='{{item.disabled}}'/{{item.value}}    /view/checkbox-group

// pages/view/view.jsPage({    data:{        array:[           {name:"v中国",value:"中国",checked:true,color:"red",disabled:false},           {name:"v美国", value: "美国", checked:false,color: "blue",disabled:false},           {name: "v俄国", value: "俄国" , checked: true, color: "pink",disabled:false}        ]    }})

checkbox-group    checkbox value='v中国'/中国    checkbox value='v美国' disabled='{{true}}'/美国    checkbox value='v俄国' checked='{{true}}' color='red'/俄国/checkbox-groupcheckbox-group    view wx:for="{{array}}"    checkbox value='{{item.name}}' checked='{{item.checked}}' color='{{item.color}}' disabled='{{item.disabled}}'{{item.value}}/checkbox    /view/checkbox-group

// pages/view/view.jsPage({    data:{        array:[           {name:"v中国",value:"中国",checked:true,color:"red",disabled:false},           {name:"v美国", value: "美国", checked:false,color: "blue",disabled:false},           {name: "v俄国", value: "俄国" , checked: true, color: "pink",disabled:false}        ]    }})

这是改为用双标签去展示。

还有另外一种方式。官方建议我们使用label和checkbox绑定使用。label它其实可以配合很多去进行使用。

因为View是竖排/纵排的排序。然后label是横排。

checkbox-group    checkbox value='v中国'/中国    checkbox value='v美国' disabled='{{true}}'/美国    checkbox value='v俄国' checked='{{true}}' color='red'/俄国/checkbox-groupcheckbox-group    label wx:for="{{array}}"    checkbox id="{{item.id}}" value='{{item.name}}' checked='{{item.checked}}' color='{{item.color}}' disabled='{{item.disabled}}'/{{item.value}}    /label/checkbox-grouplabel for='1001'测试点击/label

// pages/view/view.jsPage({    data:{        array:[           { id: "1001", name:"v中国",value:"中国",checked:true,color:"red",disabled:false},           { id: "1002", name:"v美国", value: "美国", checked:false,color: "blue",disabled:false},           { id: "1003", name: "v俄国", value: "俄国" , checked: true, color: "pink",disabled:false}        ]    }})

e是事件对象，并且它是一个change事件，并且它里面我们触发一个change的时候，它所有的值带过来是一个数组对象，

// pages/view/view.jsPage({    data:{        array:[           { id: "1001", name:"v中国",value:"中国",checked:true,color:"red",disabled:false},           { id: "1002", name:"v美国", value: "美国", checked:false,color: "blue",disabled:false},           { id: "1003", name: "v俄国", value: "俄国" , checked: true, color: "pink",disabled:false}        ]    },    changed: function(e) {       debugger    }})

checkbox-group bindchange="changed"    checkbox value='v中国'/中国    checkbox value='v美国' disabled='{{true}}'/美国    checkbox value='v俄国' checked='{{true}}' color='red'/俄国/checkbox-groupcheckbox-group    label wx:for="{{array}}"    checkbox id="{{item.id}}" value='{{item.name}}' checked='{{item.checked}}' color='{{item.color}}' disabled='{{item.disabled}}'{{item.value}}/checkbox    /label/checkbox-group

form bindsubmit='formSubmit' bindreset='formReset'checkbox-group name="aa" bindchange="changed"    checkbox value='v中国'/中国    checkbox value='v美国' disabled='{{true}}'/美国    checkbox value='v俄国' checked='{{true}}' color='red'/俄国/checkbox-groupcheckbox-group name="bb"    label wx:for="{{array}}"    checkbox id="{{item.id}}" value='{{item.name}}' checked='{{item.checked}}' color='{{item.color}}' disabled='{{item.disabled}}'{{item.value}}/checkbox    /label/checkbox-group    button form-type='submit'提交/button    button form-type='reset'重置/button/form

// pages/view/view.jsPage({    data:{        array:[           { id: "1001", name:"v中国",value:"中国",checked:true,color:"red",disabled:false},           { id: "1002", name:"v美国", value: "美国", checked:false,color: "blue",disabled:false},           { id: "1003", name: "v俄国", value: "俄国" , checked: true, color: "pink",disabled:false}        ]    },    changed: function(e) {           },    formSubmit: function(e) {        debugger;    },    formReset: function () {      console.log("data has been resetted...");    }})

{  "pages":[    "pages/form/myform/myform",    "pages/form/checkbox/checkbox",    "pages/form/buttons/buttons",    "pages/basic/basic",    "pages/movable/movable",    "pages/swiper/swiper",    "pages/scrollView/scrollView",    "pages/view/view",    "pages/index/index"  ],  "window":{    "backgroundTextStyle":"light",    "navigationBarBackgroundColor": "#fff",    "navigationBarTitleText": "WeChat",    "navigationBarTextStyle":"black"  }}

inputs.wxml

view123456/viewview123456/viewview123456/viewview123456/viewview123456/viewview123456/viewview123456/viewview123456/viewview123456/viewview123456/viewview123456/viewview123456/viewview123456/viewview123456/viewview123456/viewinput value="学习小程序实战" maxlength='10' cursor-spacing='0'/inputinput value="number" type='number'/inputinput value="idcard" type='idcard'/inputinput value="digit" type='digit'/input密码框: input value="" password='{{true}}'/inputplaceholder: input value="" placeholder='请输入你的用户名' placeholder-style='color:green;'/inputplaceholder: input value="" placeholder='请输入你的用户名' placeholder-class='placeholder'/inputview123456/viewview123456/viewview123456/viewview123456/viewview123456/viewview123456/viewview123456/viewview123456/viewview123456/viewview123456/viewview123456/viewview123456/viewview123456/viewview123456/viewview123456/view

view123456/viewview123456/viewview123456/viewview123456/viewview123456/viewview123456/viewview123456/viewview123456/viewview123456/viewview123456/viewview123456/viewview123456/viewview123456/viewview123456/viewview123456/viewinput value="学习小程序实战" maxlength='10' cursor-spacing='300'/inputinput value="number" type='number'/inputinput value="idcard" type='idcard'/inputinput value="digit" type='digit'/input密码框: input value="" password='{{true}}'/inputplaceholder: input value="" placeholder='请输入你的用户名' placeholder-style='color:green;'/inputplaceholder: input value="" placeholder='请输入你的用户名' placeholder-class='placeholder'/inputview123456/viewview123456/viewview123456/viewview123456/viewview123456/viewview123456/viewview123456/viewview123456/viewview123456/viewview123456/viewview123456/viewview123456/viewview123456/viewview123456/viewview123456/view

'

view123456/viewview123456/viewview123456/viewview123456/viewview123456/viewview123456/viewview123456/viewview123456/viewview123456/viewview123456/viewview123456/viewview123456/viewview123456/viewview123456/viewview123456/viewinput value="学习小程序实战" maxlength='10' cursor-spacing='300'/inputinput value="number" type='number' focus='{{true}}'/inputinput value="idcard" type='idcard'/inputinput value="digit" type='digit'/input密码框: input value="" password='{{true}}'/inputplaceholder: input value="" placeholder='请输入你的用户名' placeholder-style='color:green;'/inputplaceholder: input value="" placeholder='请输入你的用户名' placeholder-class='placeholder'/inputview123456/viewview123456/viewview123456/viewview123456/viewview123456/viewview123456/viewview123456/viewview123456/viewview123456/viewview123456/viewview123456/viewview123456/viewview123456/viewview123456/viewview123456/view

view123456/viewview123456/viewview123456/viewview123456/viewview123456/viewview123456/viewview123456/viewview123456/viewview123456/viewview123456/viewview123456/viewview123456/viewview123456/viewview123456/viewview123456/viewinput value="学习小程序实战" maxlength='10' cursor-spacing='300' confirm-type='next'/inputinput value="number" type='number' focus='{{true}}'/inputinput value="idcard" type='idcard'/inputinput value="digit" type='digit'/input密码框: input value="" password='{{true}}'/inputplaceholder: input value="" placeholder='请输入你的用户名' placeholder-style='color:green;'/inputplaceholder: input value="" placeholder='请输入你的用户名' placeholder-class='placeholder'/inputview123456/viewview123456/viewview123456/viewview123456/viewview123456/viewview123456/viewview123456/viewview123456/viewview123456/viewview123456/viewview123456/viewview123456/viewview123456/viewview123456/viewview123456/view

view123456/viewview123456/viewview123456/viewview123456/viewview123456/viewview123456/viewview123456/viewview123456/viewview123456/viewview123456/viewview123456/viewview123456/viewview123456/viewview123456/viewview123456/viewinput value="学习小程序实战" maxlength='10' cursor-spacing='300' confirm-type='next' confirm-hold='{{true}}'/inputinput value="number" type='number' focus='{{true}}' cursor='3'/inputinput value="idcard" type='idcard'/inputinput value="digit" type='digit'/input密码框: input value="" password='{{true}}'/inputplaceholder: input value="" placeholder='请输入你的用户名' placeholder-style='color:green;'/inputplaceholder: input value="" placeholder='请输入你的用户名' placeholder-class='placeholder'/inputview123456/viewview123456/viewview123456/viewview123456/viewview123456/viewview123456/viewview123456/viewview123456/viewview123456/viewview123456/viewview123456/viewview123456/viewview123456/viewview123456/viewview123456/view

view123456/viewview123456/viewview123456/viewview123456/viewview123456/viewview123456/viewview123456/viewview123456/viewview123456/viewview123456/viewview123456/viewview123456/viewview123456/viewview123456/viewview123456/viewinput value="学习小程序实战" maxlength='10' cursor-spacing='300' confirm-type='next' confirm-hold='{{true}}'/inputinput value="number" type='number' focus="{{true}}" cursor="3" selection-start='2' selection-end='4'/inputinput value="idcard" type='idcard'/inputinput value="digit" type='digit'/input密码框: input value="" password='{{true}}'/inputplaceholder: input value="" placeholder='请输入你的用户名' placeholder-style='color:green;'/inputplaceholder: input value="" placeholder='请输入你的用户名' placeholder-class='placeholder'/inputview123456/viewview123456/viewview123456/viewview123456/viewview123456/viewview123456/viewview123456/viewview123456/viewview123456/viewview123456/viewview123456/viewview123456/viewview123456/viewview123456/viewview123456/view

view123456/viewview123456/viewview123456/viewview123456/viewview123456/viewview123456/viewview123456/viewview123456/viewview123456/viewview123456/viewview123456/viewview123456/viewview123456/viewview123456/viewview123456/viewinput value="学习小程序实战" maxlength='10' cursor-spacing='300' confirm-type='next' confirm-hold='{{true}}'/inputinput value="number" type='number' focus="{{true}}" cursor="3" selection-start='2' selection-end='4' adjust-position="{{true}}"/inputinput value="idcard" type='idcard'/inputinput value="digit" type='digit'/input密码框: input value="" password='{{true}}'/inputplaceholder: input value="" placeholder='请输入你的用户名' placeholder-style='color:green;'/inputplaceholder: input value="" placeholder='请输入你的用户名' placeholder-class='placeholder'/inputview123456/viewview123456/viewview123456/viewview123456/viewview123456/viewview123456/viewview123456/viewview123456/viewview123456/viewview123456/viewview123456/viewview123456/viewview123456/viewview123456/viewview123456/view

Page({   inputEvent:function() {       console.log("inputEvent");       return "imooc";   },   blurEvent: function() {     console.log("blurEvent");   },   focusEvent: function () {     console.log("focusEvent");   },   confirmEvent: function () {     console.log("confirmEvent");   }})

view123456/viewview123456/viewview123456/viewview123456/viewview123456/viewview123456/viewview123456/viewview123456/viewview123456/viewview123456/viewview123456/viewview123456/viewview123456/viewview123456/viewview123456/viewinput value="学习小程序实战" maxlength='10' cursor-spacing='300' confirm-type='next' confirm-hold='{{true}}' bindinput='inputEvent' bindfocus='focusEvent' bindblur='blurEvent' bindconfirm='confirmEvent'/inputinput value="number" type='number' focus="{{true}}" cursor="3" selection-start='2' selection-end='4' adjust-position="{{true}}"/inputinput value="idcard" type='idcard'/inputinput value="digit" type='digit'/input密码框: input value="" password='{{true}}'/inputplaceholder: input value="" placeholder='请输入你的用户名' placeholder-style='color:green;'/inputplaceholder: input value="" placeholder='请输入你的用户名' placeholder-class='placeholder'/inputview123456/viewview123456/viewview123456/viewview123456/viewview123456/viewview123456/viewview123456/viewview123456/viewview123456/viewview123456/viewview123456/viewview123456/viewview123456/viewview123456/viewview123456/view

// pages/view/view.jsPage({  data:{    array:[1,2,3,4,5,6,7,8,9,0],    arrayObj:[         { id: 1001, name: "jack" },         { id: 1002, name: "lilei" },         { id: 1003, name: "hanmeimei" },         { id: 1004, name: "lucy" },         { id: 1005, name: "poly" },    ]  }})

picker mode="selector" range='{{array}}'    请选择我/pickerpicker mode="selector" range='{{arrayObj}}'    请选择我/picker

// pages/view/view.jsPage({  data:{    array:[1,2,3,4,5,6,7,8,9,0],    arrayObj:[         { id: 1001, name: "jack" },         { id: 1002, name: "lilei" },         { id: 1003, name: "hanmeimei" },         { id: 1004, name: "lucy" },         { id: 1005, name: "poly" },    ]  }})

picker mode="selector" range='{{array}}'    请选择我/pickerpicker mode="selector" range='{{arrayObj}}' range-key='id'    请选择我/picker

picker mode="selector" range='{{array}}'    请选择我/pickerpicker mode="selector" range='{{arrayObj}}' range-key='name'    请选择我/picker

// pages/view/view.jsPage({  data:{    array:[1,2,3,4,5,6,7,8,9,0],    arrayObj:[         { id: 1001, name: "jack" },         { id: 1002, name: "lilei" },         { id: 1003, name: "hanmeimei" },         { id: 1004, name: "lucy" },         { id: 1005, name: "poly" },    ]  }})

picker mode="selector" range='{{array}}'    请选择我/pickerpicker mode="selector" range='{{arrayObj}}' range-key='name' bindchange='changeme' bindcancel='cancelme'     view请选择我/view/picker

// pages/view/view.jsPage({  data:{    array:[1,2,3,4,5,6,7,8,9,0],    arrayObj:[         { id: 1001, name: "jack" },         { id: 1002, name: "lilei" },         { id: 1003, name: "hanmeimei" },         { id: 1004, name: "lucy" },         { id: 1005, name: "poly" },    ]  },  changeme: function (e) {      var index = e.detail.value;      console.log("index下标值为: " + index);  },  cancelme: function (e) {     console.log("触发取消事件....");  }})

// pages/view/view.jsPage({  data:{    array:[1,2,3,4,5,6,7,8,9,0],    arrayObj:[         { id: 1001, name: "jack" },         { id: 1002, name: "lilei" },         { id: 1003, name: "hanmeimei" },         { id: 1004, name: "lucy" },         { id: 1005, name: "poly" },    ],    showme: "请选择一个人名"  },  changeme: function (e) {      var index = e.detail.value;      console.log("index下标值为: " + index);      var id = this.data.arrayObj[index].id;      var name = this.data.arrayObj[index].name;      this.setData({                  showme :  id + name      });  },  cancelme: function (e) {     console.log("触发取消事件....");  }})

picker mode="selector" range='{{array}}'    请选择我/pickerpicker mode="selector" range='{{arrayObj}}' range-key='name' bindchange='changeme' bindcancel='cancelme'     view{{showme}}/view/picker

view单列选择器/viewpicker mode="selector" range='{{array}}'    请选择我/pickerpicker mode="selector" range='{{arrayObj}}' range-key='name' bindchange='changeme' bindcancel='cancelme' bindcolumnchange="columnchange"    view{{showme}}/view/pickerview style='margin-top:100rpx;'多列选择器/viewpicker mode="multiSelector" range='{{arrayMulti}}'    请选择我/pickerpicker mode="multiSelector" range='{{arrayObjMulti}}' range-key='id' bindchange='changemeMulti' bindcancel='' bindcolumnchange="columnchange"    view{{showme}}/view/picker

// pages/view/view.jsPage({  data:{    array:[1,2,3,4,5,6,7,8,9,0],    arrayObj:[         { id: 1001, name: "jack" },         { id: 1002, name: "lilei" },         { id: 1003, name: "hanmeimei" },         { id: 1004, name: "lucy" },         { id: 1005, name: "poly" },    ],    showme: "请选择一个人名",    arrayMulti: [    [1, 2, 3, 4, 5, 6, 7, 8, 9, 0],    [1, 2, 3, 4, 5, 6, 7, 8, 9, 0]    ],    arrayObjMu