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

1.

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

3.

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

5.

6.

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

7.

8.

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

10.

11.

12.和View有关的。

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

14.

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

16.

17.这是单标签的展示方式。

18.

19.

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

20.

21.

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

22.

23.

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

24.

25.

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

26.

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

28.

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

30.

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

32.

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

33.

34.

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

35.

36.

37.

38.

39.

40.

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

42.

43.

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

44.

45.

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

46.

47.

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

48.

49.

//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("datahasbeenresetted...");}})

50.

51.

{"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"}}

52.

53.

54.

55.

56.

57.

58.inputs.wxml

59.

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

60.

61.

62.

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

63.

64.'

65.

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

66.

67.

68.

69.

70.

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

71.

72.

73.

74.

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

75.

76.

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

77.

78.

79.

80.

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

81.

bindinputEventHandle键盘输入时触发，event.detail={value,cursor,keyCode}，keyCode为键值，2.1.0起支持，处理函数可以直接return一个字符串，将替换输入框的内容。bindfocusEventHandle输入框聚焦时触发，event.detail={value,height}，height为键盘高度，在基础库1.9.90起支持bindblurEventHandle输入框失去焦点时触发，event.detail={value:value}bindconfirmEventHandle点击完成按钮时触发，event.detail={value:value}

82.

83.

84.

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

85.

86.

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

87.

88.

89.

90.

//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"},]}})

91.

92.

pickermode="selector"range='{{array}}'请选择我/pickerpickermode="selector"range='{{arrayObj}}'请选择我/picker

93.

94.

95.

96.

//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"},]}})

97.

98.

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

99.

100.

101.

102.

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

103.

104.

//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"},]}})

105.

106.

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

107.

108.

//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){varindex=e.detail.value;console.log("index下标值为:"+index);},cancelme:function(e){console.log("触发取消事件....");}})

109.

110.

111.

//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){varindex=e.detail.value;console.log("index下标值为:"+index);varid=this.data.arrayObj[index].id;varname=this.data.arrayObj[index].name;this.setData({showme:id+name});},cancelme:function(e){console.log("触发取消事件....");}})

112.

113.

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

114.

115.

116.

117.

118.

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

119.

120.

//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]],arrayObjMulti:[[{id:1001,name:"jack"},{id:1002,name:"lilei"},{id:1003,name:"hanmeimei"},{id:1004,name:"lucy"},{id:1005,name:"poly"},],[{id:1001,name:"jack"},{id:1002,name:"lilei"},{id:1003,name:"hanmeimei"},{id:1004,name:"lucy"},{id:1005,name:"poly"},]]},changeme:function(e){varindex=e.detail.value;console.log("index下标值为:"+index);varid=this.data.arrayObj[index].id;varname=this.data.arrayObj[index].name;this.setData({showme:id+name});},cancelme:function(e){console.log("触发取消事件....");},columnchange:function(e){console.log("触发取消事件....");},columnchange:function(e){console.log(e.detail);},changemeMulti:function(e){varindexs=e.detail.value;vararrayObjMulti=this.data.arrayObjMulti;for(vari=0;iindexs.length;i++){varindexTmp=indexs[i];varid=arrayObjMulti[i][indexTmp].id;varname=arrayObjMulti[i][indexTmp].name;console.log(id+""+name);}}})

121.

122.

//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]],arrayObjMulti:[[{id:1001,name:"jack"},{id:1002,name:"lilei"},{id:1003,name:"hanmeimei"},{id:1004,name:"lucy"},{id:1005,name:"poly"},],[{id:1001,name:"jack"},{id:1002,name:"lilei"},{id:1003,name:"hanmeimei"},{id:1004,name:"lucy"},{id:1005,name:"poly"},]]},changeme:function(e){varindex=e.detail.value;console.log("index下标值为:"+index);varid=this.data.arrayObj[index].id;varname=this.data.arrayObj[index].name;this.setData({showme:id+name});},cancelme:function(e){console.log("触发取消事件....");},columnchange:function(e){console.log("触发columnchange事件...."+e);},columnchange:function(e){console.log(e.detail);},changemeMulti:function(e){varindexs=e.detail.value;vararrayObjMulti=this.data.arrayObjMulti;for(vari=0;iindexs.length;i++){varindexTmp=indexs[i];varid=arrayObjMulti[i][indexTmp].id;varname=arrayObjMulti[i][indexTmp].name;console.log(id+""+name);}}})

123.

124.

125.

126.

view单列选择器/viewpickermode="selector"range='{{array}}'请选择我/pickerpickermode="selector"range='{{arrayObj}}'range-key='name'bindchange='changeme'bindcancel='cancelme'bindcolumnchange="columnchange"view{{showme}}/view/pickerviewstyle='margin-top:100rpx;'多列选择器/viewpickermode="multiSelector"range='{{arrayMulti}}'请选择我/pickerpickermode="multiSelector"range='{{arrayObjMulti}}'range-key='id'bindchange='changemeMulti'bindcancel=''bindcolumnchange="columnchange"view{{showme}}/view/pickerviewstyle='margin-top:100rpx;'时间选择器/viewpickermode="time"start="08:08"end="22:30"bindchange='changeTime'view{{timeLable}}/view/pickerviewstyle='margin-top:100rpx;'日期选择器/viewpickermode="date"start="2018-03-01"end="2018-06-25"bindchange='changeDate'fields="month"view{{dateLable}}/view/pickerviewstyle='margin-top:100rpx;'城市选择器/viewpickermode="region"bindchange='changeCity'view{{cityLable}}/view/picker

127.

128.

129.

130.

131.

//pages/view/view.jsPage({data:{year:[1990,1995,2000,2005,2010,2015,2020],month:[1,2,3,4,5,6,7,8,9,10,11,12],day:[1,5,10,15,20,25,30]}})

132.

133.

picker-viewstyle='width:100%;height:250px;'picker-view-columnviewwx:for="{{year}}"{{item}}/view/picker-view-columnpicker-view-columnviewwx:for="{{month}}"{{item}}/view/picker-view-columnpicker-view-columnviewwx:for="{{day}}"{{item}}/view/picker-view-column/picker-view

134.

135.

{"pages":["pages/form/pickerview/pickerview","pages/form/pickers/pickers","pages/inputs/inputs","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"}}

136.

bindchangeEventHandle当滚动选择，value改变时触发change事件，event.detail={value:value}；value为数组，表示picker-view内的picker-view-column当前选择的是第几项（下标从0开始）

137.

//pages/view/view.jsPage({data:{year:[1990,1995,2000,2005,2010,2015,2020],month:[1,2,3,4,5,6,7,8,9,10,11,12],day:[1,5,10,15,20,25,30],myvalue:"请选择日期"},changeme:function(e){varindexs=e.detail.value;varyear=this.data.year[indexs[0]];varmonth=this.data.month[indexs[1]];varday=this.data.day[indexs[2]];this.setData({myvalue:year+"年"+month+"月"+day+"日"});}})

138.

139.

picker-viewstyle='width:100%;height:250px;'bindchange="changeme"picker-view-columnviewwx:for="{{year}}"{{item}}/view/picker-view-columnpicker-view-columnviewwx:for="{{month}}"{{item}}/view/picker-view-columnpicker-view-columnviewwx:for="{{day}}"{{item}}/view/picker-view-column/picker-viewview{{myvalue}}/view

140.

141.

142.

143.

{"pages":["pages/form/radios/radios","pages/form/pickerview/pickerview","pages/form/pickers/pickers","pages/inputs/inputs","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"}}

144.

145.

radio-groupradiochecked='{{true}}'中国/radioradiochecked='{{true}}'美国/radioradiochecked='{{true}}'俄国/radio/radio-group

146.

147.

radio-groupradiochecked='{{true}}'中国/radioradiochecked='{{true}}'disabled='{{true}}'美国/radioradiochecked='{{true}}'color='red'俄国/radio/radio-group

148.

149.

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

150.

radio-groupblockwx:for="{{array}}"radiochecked='{{true}}'value='{{item.name}}'{{item.value}}/radio/block/radio-group

151.

152.

153.

radio-groupbindchange="changeme"blockwx:for="{{array}}"radiochecked='{{true}}'value='{{item.name}}'{{item.value}}/radio/block/radio-groupview{{myvalue}}/view

154.

155.

//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}],myvalue:"请选择一个radio"},changeme:function(e){varvalue=e.detail.value;this.setData({myvalue:value});}})

156.

157.

158.

159.

slidermin="10"max="90"show-value="{{true}}"activeColor="red"backgroundColor="blue"block-size="20"block-color="green"/sliderviewstyle='background-color:green;width:100%;height:500rpx;'/viewbindchangeEventHandle完成一次拖动后触发的事件，event.detail={value:value}bindchangingEventHandle拖动过程中触发的事件，event.detail={value:value}

160.

//pages/view/view.jsPage({data:{myheight:"500rpx",staticHeight:500},iamchanging:function(e){varval=e.detail.value;console.log(val);varnewHeight=this.data.staticHeight*(val/100);this.setData({myheight:newHeight+"rpx"})}})

161.

162.

slidermin="10"max="90"show-value="{{true}}"activeColor="red"backgroundColor="blue"block-size="20"block-color="green"bindchanging='iamchanging'/sliderviewstyle='background-color:green;width:100%;height:{{myheight}};'/view

163.

slidermin="10"max="90"show-value="{{true}}"activeColor="red"backgroundColor="blue"block-size="20"block-color="green"bindchanging=''bindchange="changeme"/sliderviewstyle='background-color:green;width:100%;height:{{myheight}};'/view

164.

//pages/view/view.jsPage({data:{myheight:"500rpx",staticHeight:500},iamchanging:function(e){varval=e.detail.value;console.log(val);varnewHeight=this.data.staticHeight*(val/100);this.setData({myheight:newHeight+"rpx"})},changeme:function(e){varval=e.detail.value;console.log(val);varnewHeight=this.data.staticHeight*(val/100);this.setData({myheight:newHeight+"rpx"})}})

165.

166.bindchanging和bindchange事件不能同时存在，否则会冲突。

167.

168.

169.switch是变种的checkbox。

170.

switchchecked="{{true}}"type="checkbox"这是一个开关选择器/switchswitchchecked="{{true}}"color='red'bindchange="changeme"开关/switchviewstyle='background-color:{{color}};width:100%;height:700rpx;'/view

171.

Page({data:{color:"white"},changeme:function(e){varflag=e.detail.value;console.log(flag);if(flag){//开灯this.setData({color:"white"});}else{//关灯this.setData({color:"black"});}}})

172.

173.

174.

175.textarea是一个多行文本框的输入，和之前的input差不多。textarea的属性有几个和input是不同的。

176.

177.其实有一个是

show-confirm-barBooleantrue是否显示键盘上方带有”完成“按钮那一栏bindlinechangeEventHandle输入框行数变化时调用，event.detail={height:0,heightRpx:0,lineCount:0}bindinputEventHandle当键盘输入时，触发input事件，event.detail={value,cursor}，bindinput处理函数的返回值并不会反映到textarea上

178.bindinput在讲input组件的时候也有。textarea是不支持通过renturn把里面的一个字符串反映到我们的一个文本框里面去。处理函数是不会把返回值反映到我们的textarea上去。textarea的用法和input是差不多的。

179.布置一个作业

180.

formbindsubmit='submitme'class='fontSize'inputname="username"placeholder='请输入用户名'/inputinputname="password"password='{{true}}'placeholder='请输入密码'/inputcheckbox-groupname="skill"style='margin-top:25rpx;'请选择技能viewwx:for="{{skills}}"checkboxid='{{item.id}}'value='{{item.name}}'{{item.value}}/checkbox/view/checkbox-grouppickername="birthday"mode="date"start="2018-03-01"end="2018-06-25"bindchange='changeDate'style='margin-top:25rpx;'view{{dateLable}}/view/pickerpickername="city"mode="region"bindchange="changeCity"style='margin-top:25rpx;'view{{cityLable}}/view/pickerradio-groupname="sex"bindchange="changeme"style='margin-top:25rpx;'radiovalue='男'checked='{{true}}'男/radioradiovalue='女'style='margin-left:25rpx;'女/radio/radio-group/form

181.

182.

183.

184.wx.navigator和wx.redirector，wx.是微信的API，我们可以通过API在JS里面去进行触发。这个导航标签在html里面可以类似于a标签，navigate和redirect属性可以类似于浏览器里面的一些相关的事件，比如window.href和window.location其实都是一个类似的道理。

185.

186.

view这是page1/viewnavigatoropen-type='redirect'url='../page2/page2'跳转到第2页/navigatornavigatorurl='../page3/page3'跳转到第3页/navigatorview这是page2/viewnavigatorurl='../page3/page3'跳转到第3页/navigatornavigatoropen-type='navigateBack'返回/navigatorview这是page3/viewnavigatoropen-type='navigateBack'delta="2"返回/navigatorview这是page1/view!--open-type='redirect'--navigatorurl='../page2/page2'跳转到第2页/navigatornavigatorurl='../page3/page3'跳转到第3页/navigatorview这是page2/viewnavigatorurl='../page3/page3'跳转到第3页/navigatornavigatoropen-type='navigateBack'返回/navigatorview这是page3/viewnavigatoropen-type='navigateBack'delta="2"返回/navigator

187.

188.页面之间是可以进行参数的传递的。

view这是page1/view!--open-type='redirect'--navigatorurl='../page2/page2?id=1001&name=慕课网'跳转到第2页/navigatornavigatorurl='../page3/page3'跳转到第3页/navigator

189.

//pages/nav/page2/page2.jsPage({/***页面的初始数据*/data:{},onLoad:function(parmas){console.log(parmas);}})

190.

191.

192.

193.

194.

{"pages":["pages/images/images","pages/nav/page1/page1","pages/nav/page2/page2","pages/nav/page3/page3","pages/form/formtest/formtest","pages/form/switch/switch","pages/form/slider/slider","pages/form/radios/radios","pages/form/pickerview/pickerview","pages/form/pickers/pickers","pages/inputs/inputs","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"}}

195.

196.

197.

198.

!--imagesrc="https://mp.weixin.qq.com/debug/wxadoc/dev/image/cat/0.jpg?t=2018712"/image--blockwx:for="{{array}}"imagesrc="{{src}}"mode='{{item.mode}}'style='width:200px;height:200px;'/image/block

199.

//pages/nav/page1/page1.jsPage({/***页面的初始数据*/data:{array:[{mode:'scaleToFill',text:'scaleToFill：不保持纵横比缩放图片，使图片完全适应'},{mode:'aspectFit',text:'aspectFit：保持纵横比缩放图片，使图片的长边能完全显示出来'},{mode:'aspectFill',text:'aspectFill：保持纵横比缩放图片，只保证图片的短边能完全显示出来'},{mode:'top',text:'top：不缩放图片，只显示图片的顶部区域'},{mode:'bottom',text:'bottom：不缩放图片，只显示图片的底部区域'},{mode:'center',text:'center：不缩放图片，只显示图片的中间区域'},{mode:'left',text:'left：不缩放图片，只显示图片的左边区域'},{mode:'right',text:'right：不缩放图片，只显示图片的右边边区域'},{mode:'topleft',text:'topleft：不缩放图片，只显示图片的左上边区域'},{mode:'topright',text:'topright：不缩放图片，只显示图片的右上边区域'},{mode:'bottomleft',text:'bottomleft：不缩放图片，只显示图片的左下边区域'},{mode:'bottomright',text:'bottomright：不缩放图片，只显示图片的右下边区域'}],src:"Fdejong.gif"}})

200.

201.

lazy-loadBooleanfalse图片懒加载。只针对page与scroll-view下的image有效bindloadHandleEvent当图片载入完毕时，发布到AppService的事件名，事件对象event.detail={height:'图片高度px',width:'图片宽度px'}

202.

203.

204.

//pages/nav/page1/page1.jsPage({/***页面的初始数据*/data:{array:[{mode:'scaleToFill',text:'scaleToFill：不保持纵横比缩放图片，使图片完全适应'},{mode:'aspectFit',text:'aspectFit：保持纵横比缩放图片，使图片的长边能完全显示出来'},{mode:'aspectFill',text:'aspectFill：保持纵横比缩放图片，只保证图片的短边能完全显示出来'},{mode:'top',text:'top：不缩放图片，只显示图片的顶部区域'},{mode:'bottom',text:'bottom：不缩放图片，只显示图片的底部区域'},{mode:'center',text:'center：不缩放图片，只显示图片的中间区域'},{mode:'left',text:'left：不缩放图片，只显示图片的左边区域'},{mode:'right',text:'right：不缩放图片，只显示图片的右边边区域'},{mode:'topleft',text:'topleft：不缩放图片，只显示图片的左上边区域'},{mode:'topright',text:'topright：不缩放图片，只显示图片的右上边区域'},{mode:'bottomleft',text:'bottomleft：不缩放图片，只显示图片的左下边区域'},{mode:'bottomright',text:'bottomright：不缩放图片，只显示图片的右下边区域'}],src:"Fdejong.gif"},load:function(e){console.log(e.detail);}})

205.

!--imagesrc="https://mp.weixin.qq.com/debug/wxadoc/dev/image/cat/0.jpg?t=2018712"/image--blockwx:for="{{array}}"imagesrc="{{src}}"mode='{{item.mode}}'style='width:200px;height:200px;'lazy-load='{{false}}'bindload="load"/image/block

206.

207.

208.

209.

!--imagesrc="https://mp.weixin.qq.com/debug/wxadoc/dev/image/cat/0.jpg?t=2018712"/image--blockwx:for="{{array}}"imagesrc="{{src}}"mode='{{item.mode}}'style='width:200px;height:200px;'lazy-load='{{true}}'bindload="load"/image/block

210.

//pages/nav/page1/page1.jsPage({/***页面的初始数据*/data:{array:[{mode:'scaleToFill',text:'scaleToFill：不保持纵横比缩放图片，使图片完全适应'},{mode:'aspectFit',text:'aspectFit：保持纵横比缩放图片，使图片的长边能完全显示出来'},{mode:'aspectFill',text:'aspectFill：保持纵横比缩放图片，只保证图片的短边能完全显示出来'},{mode:'top',text:'top：不缩放图片，只显示图片的顶部区域'},{mode:'bottom',text:'bottom：不缩放图片，只显示图片的底部区域'},{mode:'center',text:'center：不缩放图片，只显示图片的中间区域'},{mode:'left',text:'left：不缩放图片，只显示图片的左边区域'},{mode:'right',text:'right：不缩放图片，只显示图片的右边边区域'},{mode:'topleft',text:'topleft：不缩放图片，只显示图片的左上边区域'},{mode:'topright',text:'topright：不缩放图片，只显示图片的右上边区域'},{mode:'bottomleft',text:'bottomleft：不缩放图片，只显示图片的左下边区域'},{mode:'bottomright',text:'bottomright：不缩放图片，只显示图片的右下边区域'}],src:"Fdejong.gif"},load:function(e){console.log(e.detail);}})

211.

!--imagesrc="https://mp.weixin.qq.com/debug/wxadoc/dev/image/cat/0.jpg?t=2018712"/image--blockwx:for="{{array}}"imagesrc="{{src}}"mode='{{item.mode}}'style='width:150px;height:150px;'lazy-load='{{true}}'bindload="load"/image/block

212.

//pages/nav/page1/page1.jsPage({/***页面的初始数据*/data:{array:[{mode:'scaleToFill',text:'scaleToFill：不保持纵横比缩放图片，使图片完全适应'},{mode:'aspectFit',text:'aspectFit：保持纵横比缩放图片，使图片的长边能完全显示出来'},{mode:'aspectFill',text:'aspectFill：保持纵横比缩放图片，只保证图片的短边能完全显示出来'},{mode:'top',text:'top：不缩放图片，只显示图片的顶部区域'},{mode:'bottom',text:'bottom：不缩放图片，只显示图片的底部区域'},{mode:'center',text:'center：不缩放图片，只显示图片的中间区域'},{mode:'left',text:'left：不缩放图片，只显示图片的左边区域'},{mode:'right',text:'right：不缩放图片，只显示图片的右边边区域'},{mode:'topleft',text:'topleft：不缩放图片，只显示图片的左上边区域'},{mode:'topright',text:'topright：不缩放图片，只显示图片的右上边区域'},{mode:'bottomleft',text:'bottomleft：不缩放图片，只显示图片的左下边区域'},{mode:'bottomright',text:'bottomright：不缩放图片，只显示图片的右下边区域'}],src:"Fdejong.gif"},load:function(e){console.log(e.detail);}})

213.

214.

215.小程序不像是一个Web应用，Web应用我们发布之后可以直接在浏览器里面去打上一个本地的地址外加一个端口就可以访问了。小程序是不可以的，它只可以去访问一些在线的并且是通过域名绑定过的后台程序。通过内网穿透就可以把本地的IP和端口号暴露到公网，并且可以映射某一个域名。

216.

217.用户可以通过防火墙直接穿透，穿透到我们的云端，这样子就可以相互进行访问。作用是内网穿透。

218.

219.

220.

221.

222.

223.

224.

225.

226.

227.

228.

229.

230.

231.

projectxmlns="http://maven.apache.org/POM/4.0.0"xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation="http://maven.apache.org/POM/4.0.0http://maven.apache.org/maven-v4_0_0.xsd"modelVersion4.0.0/modelVersiongroupIdimooc-video-mini-api/groupIdartifactIdimooc-video-mini-api/artifactIdversion1.0-SNAPSHOT/versionpacka