什么是微信小程序微信小程序是一种不需下载安装即可使用的应用，他实现了应用“触手可及”的梦想。用户扫一扫或者搜一下即可打开应用，也提现了“用完即走”的理念。用户不用关心是否安装太多应用的问题，应用将无处不在又随时可用，但又“无需安装卸载”。微信上才能使用微信小程序和原生App的比较

1.功能方面，小程序应该比原生App更单一；设计方面，小程序应该比原生App更简洁；使用场景方面，小程序比原生App更明确。（微信小程序应该聚焦某个功能点，成为随时解决用户单一需求的工具）

微信公众平台接口测试帐号申请

2.注意：一个邮箱对应一个公众号或小程序。

注册账号注册账号类型为：小程序注册邮箱不能是微信开放平台注册过的邮箱，也不能是个人微信号绑定的邮箱。邮箱激活信息登记ps:主体类型为企业时注册方式有"小额转账"和"微信认证",通常情况下这两个操作起来都既不方便,又耗时.这时候可以使用小程序复用公众号资质快速认证

3.条件：1.可快速认证的小程序：企业、媒体、政府和其他组织类型的小程序；2.要求公众号必须先完成微信认证；3.公众号与小程序关联，且主体相同。申请入口：登录公众号-小程序-小程序管理-关联小程序-添加登录公众号-小程序-小程序管理-关联小程序-选中相关小程序（详情）-申请

4.详情见：http://kf.qq.com/faq/170427FvEZNN170427YJjiAJ.html

登录小程序管理后台完善小程序信息选择适合自己的服务类目，后期也可以添加服务类目，一个小程序可以添加五个服务类目。绑定开发者小程序代码结构

5.接下来就可以下载微信开发者工具来创建小程序了，AppId可以在小程序管理后台“设置”–“开发设置”中查看。

框架全局文件（App.xx）App.js小程序逻辑定义全局数据（变量）和函数的使用，可以指定小程序的生命周期函数。

6.生命周期函数官方教程：https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/page.html

App.json小程序公共设置App.json可以对5个都能进行设置：设置配置路径、配置窗口表现、配置标签导航、配置网络超时、配置debug模式。配置页面路径pages页面路径是进行页面访问的必要条件，如果没有配置页面访问路径，页面被访问时会报错，如果定义了，则微信小程序开发工具会自动创建对应文件夹以及文件。

7.一般只用于创建pages目录下的文件夹（页面代码文件夹）

配置窗口表现配置标签导航配置网络超时配置网络请求、文件上传、文件下载时最大的请求时间，超过这个时间将不再请求。App.wxss小程序公共样式表App.wxss是默认的全局样式文件，对CSS样式进行了扩展，和CSS使用方式一样。注意有一些CSS样式在这里是不起作用的。

8.与CSS相比，WXSS扩展的特性有：尺寸单位样式导入详情见：https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxss.html

工具类文件（utils/util.js）utils文件夹下用来存放工具栏的js函数，如可以放置一些日期格式化的函数。定义完函数后要使用module.exports将定义的函数名称注册进来，在其他页面才可以使用。util.js文件的js旨在本文件之内有效，当其他子页面想调用其中的js方法或者变量时，需要两步骤：①在utils.js文件中，面向对象的方式模型输出：module.exports={要调用的函数名称：要调用的函数名称}；②在要调用util.js的js文件中模块化引入utils的js文件varobject=require(“utils被调用的js文件地址”)；可以输出一下object就能看到被调用的方法了；

9.

App()函数注册程序

10.App.js的App()函数内不仅可以定义全局函数和数据，还可以指定小程序的生命周期函数。

App({onLaunch:function(){//生命周期函数-监听小程序初始（当小程序初始化完全时触发，全局只触发一次）},onShow:function(){//生命周期函数-监听小程序显示（小程序启动和后台进入前台显示时触发）},onHide:function(){//生命周期函数-监听小程序隐藏（当小程序从前台进入后台是触发）},onError:function(){//错误监听函数（当小程序发生脚本错误或者api调用失败时会触发onError并上错误信息）},//任意数据globalData:'iamaglobaldata',globalFun:function(){//任意函数}})

11.在页面的js文件中调用全局函数或者数据(不要调用生命周期函数)：

varAppInstance=getApp();console.log(AppInstance.globalData);App()函数必须在App.js中注册，且不能注册多个不要在App()函数内使用getApp()，使用this就可以拿到App实例。Page()函数注册页面

12.在每个页面文件夹的js文件中通过Page()函数注册一个页面，和App()函数一样接受一个object参数，其指定一个页面的初始数据、生命周期函数、事件处理函数等页面的所有业务逻辑。

//pages/index/index.jsPage({data:{//页面的初始数据，作为页面的第一次渲染。data将以JSON的形式由逻辑层传至渲染层，//所以数据必须可以转换成JSON格式——字符串，数字，布尔值，对象或者数组。（一般都是写成对象）},onLoad:function(options){//生命周期函数--监听页面加载。一个页面只会调用一次，//接收页面参数可以获取wx.navigateTo和wx.redirectTo及navigator/中的query},onReady:function(){//生命周期函数--监听页面初次渲染完成。一个页面只会调用一次，代表页面已经准备妥当，//可以和视图层进行交互，对界面设置如wx.setNavigationBarTitle请在onReady之后进行},onShow:function(){//生命周期函数--监听页面显示。每次打开页面都会调用一次。},onHide:function(){//生命周期函数--监听页面隐藏。当navigateTo或底部Tab切换时调用。},onUnload:function(){//生命周期函数--监听页面卸载。当redirectTo或者navigateBack时调用。},onPullDownRefresh:function(){//页面相关事件处理函数--监听用户下拉动作。需要在config的window选项中开启enablePullDownRefresh。//处理完数据刷新后，wx.stopPullDownRefresh可以停止当前页面的下拉刷新},onReachBottom:function(){//页面上拉触底事件的处理函数。当上拉至底部时就会触发onReachBottom函数来进行相应动作,//这在大数据量显示的时候很有用},onShareAppMessage:function(){//用户点击右上角分享。只有定义了此事件处理函数，右上角菜单才会显示“分享”按钮，用户单击“分享”按钮时调用，此事件需要return一个Object（参数title,desc,path），用于自定义分享内容。},pageFun:function(){//开发者可以添加任意函数（包括事件处理函数）或者数据，在Page()函数内可以用this获取实例访问.}})page()中的设值函数setData()

13.该函数接收一个对象参数，用于将this.data中的key对应的值改变成对象参数的值。注意，该方法也可用于添加数据。

!--pages/index/index.wxml--view{{text}}/viewbuttonbindtap='changeText'Changenormaldata/buttonview{{array[0].text}}/viewbuttonbindtap='changeTextInArray'Changearraydata/buttonview{{object.text}}/viewbuttonbindtap='changeTextInObject'Changeobjectdata/buttonview{{newData.text}}/viewbuttonbindtap='addNewData'Addnewdata/button//pages/index/index.jsPage({data:{//页面的初始数据，作为页面的第一次渲染。data将以JSON的形式由逻辑层传至渲染层，//所以数据必须可以转换成JSON格式——字符串，数字，布尔值，对象或者数组。text:'initdata',array:[{text:'initdata'}],object:{text:'initdata'}},changeText:function(){this.setData({//this.data.text='changeddata'//itcannotwork无效text:'changeddata'})},changeTextInArray:function(){this.setData({'array[0].text':'changeddata'})},changeTextInObject:function(){this.setData({'object.text':'changeddata'})},addNewData:function(){this.setData({'newData.text':'changeddata'})},

14.注意，单次设值数据不能超过1024kb.

动态绑定数据

15.wxml中的动态数据来自js文件中的Page的data。通过双花括号{{}}进行绑定。在需要绑定的任意位置{{data}}写入，即绑定数据的地方都需要{{}},这点和vue不同。同样，和vue等双向数据绑定框架一致，{{}}差值表达式内可以进行一些三元运算、数学运算、逻辑判断、路径运算等简单的运算。

条件渲染wx:if

16.

可以看到，当条件不满足时，页面结构不会被渲染。（这里我们在index.js的data里定义sex:‘男’）对于需要一次性判断多个组件，我们可以使用block标签进行包裹。!--这里block的wx:if下面的写法都是错的，不能正确渲染。原因嘛，现在还不了解--blockwx:if={{true}}!--报错--blockwx:if="true"!--不管是true还是false都是相当于true--blockwx:if=true!--不管是true还是false都是相当于true--

17.注意，block标签并不是一个组件，仅仅是一个包装元素，不会再页面中做任何渲染，只接受控制属性。

列表循环wx:for

18.在组件上使用wx:for控制属性绑定一个数组，即可使用数组中的各项数据重复渲染该组件。举个栗子，首先js中定义个对象数组：

//pages/index/index.jsPage({data:{array:[{name:'小明'},{name:'小红'},{name:'小白'}]}})

19.然后定义页面结构：

!--pages/index/index.wxml--viewwx:for="{{array}}"{{index}}:{{item.name}}/view

20.index对应每一项的下标，从0开始。item对应当前项。可以使用wx:for-item和wx:for-index指定变量名。如下，

viewwx:for="{{array}}"wx:for-index="num"wx:for-item="itemName"{{num}}:{{itemName.name}}/view

21.和wx:if一样，可以使用block来渲染多个组件。

!--pages/index/index.wxml--blockwx:for="{{array}}"view{{index}}/viewview姓名：{{item.name}}/viewview年龄：{{item.age}}/viewview分数：{{item.score}}/view/block

22.

对wx:for指定唯一标识符wx:key

23.如果表中项目位置会动态改变或者有新的项目添加到列表中，并且希望列表中的项目保持自己的特征和状态，需要指定wx:key。wx:key的值有两种形式：①字符串。要求该字符串是列表中的唯一，且不能动态改变。②保留关键字*this。*this代表for循环中item本身，需要保证item是唯一的字符串或者数字。

selectwx:for="{{objectArray}}"wx:key="unique"style="display:block"{{item.id}}/select//下面是index.js文件Page({data:{objectArray:[{id:5,unique:'unique_1'},{id:4,unique:'unique_2'},{id:3,unique:'unique_3'},{id:2,unique:'unique_4'},{id:1,unique:'unique_5'}]}})

24.如果明确地知道列表是静态或者不关心其位置，可不指定。但是会有warning,忽略即可。

模板

25.定义模板：使用template标签，name属性声明模板名称。使用模板：is属性声明使用的模板，data属性引入数据。可使用三元运算符动态决定具体渲染哪个模板。ps:发现这里使用模板的时候可以写成自闭和标签

!--pages/index/index.wxml--templatename="odd"odd/templatetemplatename="even"even/templateblockwx:for="{{[1,2,3,4,5,6]}}"viewtemplateis="{{item%2==0?'even':'odd'}}"//view/block引用

26.①import引用在该文件中引用目标文件定义的template②include引用将目标文件除了template之外的整个代码引入，相当于复制到include位置。

scroll-view可滚动视图区域横向滚动!--pages/headline/headline.wxml--viewclass='section'viewclass='section_title'横向滚动/viewscroll-viewscroll-x="true"style='width:100%'viewclass="main"viewclass="box"推荐/viewviewclass="box"推荐/viewviewclass="box"推荐/viewviewclass="box"推荐/viewviewclass="box"推荐/viewviewclass="box"推荐/viewviewclass="box"推荐/viewviewclass="box"推荐/viewviewclass="box"推荐/viewviewclass="box"推荐/view/view/scroll-view/view/*pages/headline/headline.wxss*/.main{display:flex;width:1000%;}.main.box{width:100%;height:400px;background-color:yellow;}.main.box:nth-child(even){background-color:yellowgreen;}

27.3.纵向滚动

!--pages/index/index.wxml--!--scroll-y:允许纵向滚动--!--bindscrolltoupper:指定滚动到顶部/左边触发的事件--!--bindsrolltolower:指定滚动到底部/右边触发的事件--!--bindscroll:指定滚动时触发的事件--!--scroll-into-view:滚动到子元素指定id区域--!--scroll-top:设置竖向滚动条的位置--!--upper-threshold:距顶部/左边多远时(单位px),触发scrolltoup事件默认值:50--!--lower-threshold:距底部/右边多远时(单位px),触发scrolltoup事件默认值:50--viewclass='section'viewclass='section_title'纵向滚动/viewscroll-viewscroll-y="true"bindscrolltoupper="upper"bindsrolltolower="lower"bindscroll="scroll"scroll-into-view="{{toView}}"scroll-top="{{scrollTop}}"viewid='green'/viewviewid='red'/viewviewid='yellow'/viewviewid='blue'/viewviewid='pink'/viewviewid='black'/view/scroll-viewviewclass='btn-area'buttontype='default'bindtap="tap"clickmescrollintoview/buttonbuttontype='default'bindtap="tapMove"clickmetoscroll/button/view/view/*pages/index/index.wxss*/scroll-view{height:200px;}#green{width:100%;height:100px;background-color:green;}#red{width:100%;height:100px;background-color:red;}#yellow{width:100%;height:100px;background-color:yellow;}#blue{width:100%;height:100px;background-color:blue;}#pink{width:100%;height:100px;background-color:pink;}#black{width:100%;height:100px;background-color:black;}.section.btn-areabutton{margin:10px;}//pages/index/index.jsPage({data:{toView:'red',scrollTop:100},upper:function(e){console.log("=====upper===="+e);},lower:function(e){console.log("=====lower===="+e);},scroll:function(e){console.log("=====scroll===="+e);},tap:function(){this.setData({toView:'green',scrollTop:0//注意这里滚动都green，但是scrollTop依旧为之前的值。});},tapMove:function(){this.setData({scrollTop:this.data.scrollTop+100});}})

28.(1)请勿在scroll-view中使用textarea、map、canvas、video组件(2)scroll-into-view优先级高于scroll-top(3)在scroll-view中滚动无法触发onPullDownRefresh

swiper滑块视图!--pages/cook/cook.wxml--viewclass='header'!--indicator-dots:是否显示面板指示点默认:false--!--autoplay:是否自动切换默认值:false--!--current:当前所在页面的index(开始的位置)默认值:0--!--interval:自动切换时间间隔默认值:5000--!--duration:切换动画时长默认值:500--!--circular:是否采用衔接滑动(就是能重复)默认值:false--!--bindchange:current改变时会触发change事件--swiperindicator-dots='true'autoplay='true'current='1'interval='3000'duration='1000'circular='true'bindchange='hasChange'blockwx:for="{{imgUrls}}"swiper-itemimagesrc='{{item}}'class='silde-image'style='width:100%;height:158px'/image/swiper-item/block/swiper/view//pages/cook/cook.jsPage({data:{imgUrls:['https://s1.cdn.xiangha.com/caipu/201707/031210164843.jpg/MHgw.webp','https://s3.cdn.xiangha.com/caipu/201707/031455386879.jpg/MHgw.webp','https://s1.cdn.xiangha.com/caipu/201511/271833544565.jpg/MHgw.webp']},hasChange:function(){console.log('changed');}})

29.

页签切换效果

30.swiper滑块的页签切换效果实现多种类别方式切换

!--pages/me/me.wxml--viewclass='content'viewclass='loginTitle'viewclass="{{currentTab==0?'select':'default'}}"data-current='0'bindtap='switchNav'账号密码登录/viewviewclass="{{currentTab==1?'select':'default'}}"data-current='1'bindtap='switchNav'手机快捷登录/view/viewviewclass='hr'/viewswipercurrent='{{currentTab}}'style='height:{{winHeight}}px'swiper-itemviewclass='area'账号密码登录区域/view/swiper-itemswiper-itemviewclass='area'手机快捷登录区域/view/swiper-item/swiper/view/*pages/me/me.wxss*/.loginTitle{display:flex;width:100%;}.select{font-size:12px;color:red;width:50%;text-align:center;height:45px;line-height:45px;border-bottom:5rpxsolidred;}.default{font-size:12px;margin:0auto;padding:15px;}.hr{border:1pxsolid#ccc;opacity:0.2;}.area{margin-top:10px;border:1pxsolid#ccc;width:99%;height:200px;text-align:center;}//pages/me/me.jsPage({data:{currentTab:0,winWidth:0,winHeight:0},/***生命周期函数--监听页面加载*/onLoad:function(options){varpage=this;wx.getSystemInfo({success:function(res){console.log(res);page.setData({winWidth:res.windowWidth});page.setData({winHeight:res.windowHeight});},})},switchNav:function(e){varpage=this;if(this.data.currentTab==e.target.dataset.current){returnfalse;}else{page.setData({currentTab:e.target.dataset.current});}}})

31.

基础内容组件1.icon图标组件

32.

33.注意size不用加像素单位px,否则识别不了size为0

2.text文本组件

34.该组件支持转义符’’，如t,,f等。text组件内只支持text嵌套，除了文本节点，其他节点都无法长按选中。

35.可以看出text组件相当于行内元素

3.progress进度条组件!--percent:百分比默认值：0--!--show-info:进度条右侧显示百分比默认值：false--progresspercent='20'show-info/progress!--stroke-width:进度条线宽（高？）默认值：6--progresspercent='40'stroke-width='12'/progress!--color:进度条颜色默认值：#09BB07--progresspercent='60'color='pink'/progress!--active:进度条从左往右出现动画默认值：false--progresspercent='80'active/progress

36.

表单组件button这里指定了view{background-color:yellow;}

37.2.checkbox多项选择器要想在表单提交时获取到chckbox的值，需要在checkbox-group标签里面加上name属性。

radio单项选择器

38.纠正：上面的checkbox和radio都是自闭合标签，在输入的时候开发工具的智能提示补全成双标签，这点没有注意到，但是能够正常显示，不知道是否非自闭合才是官方写法呢？

input单行输入框!--pages/message/message.wxml--!--focus：获取焦点默认值：false--viewclass='section'点击聚焦：inputplaceholder='只有在单击下方按钮时才聚焦'focus='{{focus}}'/viewclass='btn-area'buttonbindtap='tapToFocus'点我获取焦点/button/view/view!--password：是否是密码类型默认值：false--viewclass='section'密码：inputtype='number'value='123456'passwordplaceholder='不带小数点的数字键盘'//view!--type：input的类型，有效值有：text,number,idcard,digit默认值：text--viewclass='section'inputtype='digit'placeholder='带小数点的数字键盘'//view!--placeholder-style：指定placeholder的样式--viewclass='section'inputtype='idcard'placeholder='身份证输入键盘（数字键盘，不带小数点，有个x键）'placeholder-style='color:pink'//view!--placeholder-class：指定placeholder的样式类--!--maxlength：最大输入长度，默认值140.设置为-1不限制最大长度--viewclass='section'inputmaxlength='10'placeholder='最大输入长度10'placeholder-class='plred'//view!--bindinput：键盘输入时触发input事件，处理函数可以直接return一个字符串，将替换输入框中的内容--viewclass='section'inputbindinput='bindKeyInput'placeholder='输入同步到view中'/您输入的是：{{inputvalue}}/viewviewclass='section'inputbindinput='bindReplaceInput'placeholder='连续两个1变成2'//viewviewclass='section'inputbindinput='bindHideKeyboard'placeholder='输入123收起键盘'//view!--除了bindinput还有bindfocus,bindblur,bindconfirm分别对应获得焦点，失去焦点，单击“完成”按钮时触发的事件--/*pages/message/message.wxss*/.section{margin-top:10px;padding:020px;}input{border:1pxsolid#ccc;}.plred{color:red;}//pages/message/message.jsPage({data:{focus:false,inputvalue:''},tapToFocus:function(){this.setData({focus:true});},bindKeyInput:function(e){this.setData({inputvalue:e.detail.value});},bindReplaceInput:function(e){varvalue=e.detail.value;varpos=e.detail.cursor;if(pos!=-1){//光标在中间varleft=e.detail.value.slice(0,pos);//计算光标的位置pos=left.replace(/11/g,'2').length;;}//直接返回对象，可以对输入进行过滤处理，同时可以控制光标的位置return{value:value.replace(/11/g,'2'),cursor:pos}//或者直接返回字符串，光标在最后//returnvalue.replace(/11/g,'2');},bindHideKeyboard:function(e){if(e.detail.value==='123'){//收起键盘wx.hideKeyboard();}}})

39.效果图：

40.input组件是一个native组件，字体是系统字体，所以无法设置font-family。默认input输入框没有边框。

textarea多行输入框这是一个与input单行输入框相对应的组件，属性与input相似。除了type和password属性，其他value,placeholder,placeholder-style,placeholder-class,disabled,maxlength,cursor-spacing,focus,bindinput,bindfocus,bindblur,bindconfirm与input单行输入框用法一致（bindinput除外，其不能将返回值反映到textarea上）viewclass='sectionfixed'!--如果textarea是在一个position:fixed的区域，需要显示指定属性fixed为true。默认值：false--textareafixed="true"/textarea/viewviewclass='section'!--输入框行数变化时调用，event.detail={height:0,heightRpx:0,lineCount:0}--textareabindlinechange='lineChange'/textarea/viewviewclass='section'!--auto-height是否自动增加行高。设置了该属性css的height无效.默认值false--textareaauto-heightplaceholder='自动变高'/textarea/view

41.

.section{margin-top:150px;}textarea{border:1pxsolid#999;padding:3px8px;}.fixed{position:fixed;top:50px;left:0;}.fixedtextarea{background-color:#ccc;}

42.注意：属性的填写，fixed默认是false的，但是如果有业务需要变动状态（某状态要false，某状态要true），则需要添加绑定，直接写false会默认转化为true。

label组件用于绑定表单元素，目前可以绑定的有button,checkbox,radio,switch等组件。它只有一个属性for用于绑定id。==label包住元素==!--pages/message/message.wxml--labelview点我/viewbuttonbindtap='clickBtn'hidden我是button/buttoncheckbox-groupbindchange="checkboxChange"checkboxvalue='USA'/美国checkboxvalue='CHN'/中国/checkbox-groupradio-groupbindchange="radioChange"radiovalue='woman'/女人radiovalue='man'/男人/radio-group/label//pages/message/message.jsPage({})函数内clickBtn:function(){console.log("单击了button按钮");},checkboxChange:function(){console.log("单击了checkbox多项选择器");},radioChange:function(){console.log("单击了radio单项选择器");},

43.

44.单击label组件触发包含的第一个控件的事件，无论是否隐藏。亦可使label的for属性绑定组件的id，即可触发对应组件的事件，无论是否包含。

45.

picker滚动选择器（普通选择器、时间选择器、日期选择器）（1）普通选择器model=“selector”默认值range：类型可以是array也可以是objectArray，对mode为selector的选择器有效。默认值：[]range-key：range为objectArray时，通过range-key来指定Object中key的值作为选择器显示内容value：表示选择了range中的第几个（下标从0开始）默认值：0bindchange：value改变时触发bindchange事件，event.detail={value:value}disabled：是否禁用默认值：false!--range：类型可以是array也可以是objectArray，对mode为selector的选择器有效。默认值：[]--!--range-key：range为objectArray时，通过range-key来指定Object中key的值作为选择器显示内容--!--value：表示选择了range中的第几个（下标从0开始）默认值：0--!--bindchange：value改变时触发bindchange事件，event.detail={value:value}--!--disabled：是否禁用默认值：false--viewclass='section'viewclass='section_title'地区选择器1/viewpickerbindchange='pickerChange'value='{{value}}'range='{{array}}'aclass='picker'href="javascript:;"点击选择/a/pickerview当前选择：{{array[index]}}/view/viewviewclass='section'viewclass='section_title'地区选择器2/viewpickerbindchange='pickerChange'value='{{value}}'range='{{objectArray}}'range-key='name'aclass='picker'href="javascript:;"点击选择/a/pickerview当前选择：{{objectArray[index].name}}/view/view.section{margin-top:50px;}.picker{padding:3px8px;background:#ff9000;border-radius:50px;font-weight:bold;color:white;margin:50px110px;}Page({data:{index:0,array:['广州','深圳','佛山','东莞','肇庆','珠海','清远'],objectArray:[{id:0,name:'广州'},{id:1,name:'深圳'},{id:2,name:'佛山'},{id:3,name:'东莞'},{id:4,name:'肇庆'},{id:5,name:'珠海'},{id:6,name:'清远'},]},pickerChange:function(e){console.log("picker发生了改变，新值为："+e.detail.value);this.setData({index:e.detail.value});}})

46.（2）时间选择器model=“time”value：表示选中的时间，格式hh:mm类型Stringstart：有效时间范围的开始，格式hh:mm类型String无法选择早于start的时间end：有效时间范围的结束，格式hh:mm类型String无法选择晚于end的时间bindchange：value值发生改变时触发event.detail={value:value}

!--value：表示选中的时间，格式hh:mm类型String--!--start：有效时间范围的开始，格式hh:mm类型String无法选择早于start的时间--!--end：有效时间范围的结束，格式hh:mm类型String无法选择晚于end的时间--!--bindchange：value值发生改变时触发event.detail={value:value}--viewclass='section'viewclass='section_title'时间选择器/viewpickermode="time"value='{{time}}'start="09:01"end="21:01"bindchange='timeChange'class="picker"选择时间/pickerview当前选择：{{time}}/view/viewPage({data:{time:'12:01'},timeChange:function(e){this.setData({time:e.detail.value});},})

47.（3）日期选择器model="date’value：表示选中的日期，格式YYYY-MM-DD类型String--start：有效日期范围的开始，格式YYYY-MM-DD类型String无法选择早于start的时间--end：有效日期范围的结束，格式YYYY-MM-DD类型String无法选择晚于end的时间--bindchange：value值发生改变时触发event.detail={value:value}--fileds：有效值year,month,day表示选择器的粒度默认值：day--disabled：是否禁用默认值：false--

!--value：表示选中的日期，格式YYYY-MM-DD类型String--!--start：有效日期范围的开始，格式YYYY-MM-DD类型String无法选择早于start的时间--!--end：有效日期范围的结束，格式YYYY-MM-DD类型String无法选择晚于end的时间--!--bindchange：value值发生改变时触发event.detail={value:value}--!--fileds：有效值year,month,day表示选择器的粒度默认值：day--!--disabled：是否禁用默认值：false--viewclass='section'viewclass='section_title'日期选择器/viewpickermode="date"value='{{date}}'start="2014-09-01"end="2019-01-05"bindchange='dateChange'class="picker"选择日期/pickerview当前选择：{{date}}/view/viewPage({data:{date:'2019-01-05'},timeChange:function(e){this.setData({date:e.detail.value});},})

48.（4）picker-view嵌入页面滚动选择器picker-view嵌入页面滚动选择器只有picker-view-column组件。

!--pages/message/message.wxml--!--value：类型是数组，分别表示picker-view-column选择的第几项（下标从0开始），数字大于可选长度时选择最后一项--!--indicator-style：设置选择器中间选中框的样式--!--bindchange：value值改变时触发，event.detail={value:value}。value为数组，表示picker-view-column当前选择的是第几项（下标从0开始）--viewviewstyle='text-align:center'{{year}}年{{month}}月{{day}}日/viewpicker-viewindicator-style='height:40px'style='width:100%;height:200px;'value="{{value}}"bindchange="pickerChange"picker-view-columnviewwx:for="{{years}}"style='line-height:40px'{{item}}年/view/picker-view-columnpicker-view-columnviewwx:for="{{months}}"style='line-height:40px'{{item}}月/view/picker-view-columnpicker-view-columnviewwx:for="{{days}}"style='line-height:40px'{{item}}日/view/picker-view-column/picker-view/view//pages/message/message.jsconstdate=newDate();constyears=[];constmonths=[];constdays=[];for(leti=1990;i=date.getFullYear();i++){years.push(i);}for(leti=1;i=12;i++){months.push(i);}for(leti=1;i=31;i++){days.push(i);}Page({data:{years:years,year:date.getFullYear(),months:months,month:date.getMonth()+1,days:days,day:date.getDate(),value:[999,0,1]},pickerChange:function(e){constval=e.detail.value;this.setData({year:this.data.years[val[0]],month:this.data.months[val[1]],day:this.data.days[val[2]]});},})

49.

silder滑动选择器viewclass='section'viewclass='section_title'slider滑动选择器/viewviewclass='view-body'!--min：最小值，默认值为0--!--max：最大值，默认值为100--!--step：步长，取值必须大于0且可以被（max-min）整除，默认值为1--!--value：当前取值，默认值为0--!--show-value：是否显示当前value，默认值为false--!--block-size：设置滑块大小--!--activeColor：滑动区域颜色，默认值为#1aad19--!--backgroundColor：未滑动区域颜色，默认值为#e9e9e9--!--bindchange：完成一次拖动后出发，event.detail={value:value}--slidermin='50'max='200'step='5'block-size='40'activeColor="#1aad19"backgroundColor='red'bindchange='sliderChange'show-value/sliderslider/slider/view/viewPage({sliderChange:function(e){console.log("当前值："+e.detail.value);},})

50.

switch开关选择器switch开关选择器只有两个状态：开和关。checked:是否选中，默认值falsetype:样式，有效值switch，checkboxcolor:选中时的颜色bindchange:checked改变时触发，event.detail={value,checked}viewclass='switch'viewclass="section"view接收新消息通知/viewswitchtype='switch'checked/switch/viewviewclass="section"view通知显示消息详情/viewswitchtype='switch'color='red'/switch/viewviewstyle='height:30px'/viewviewclass="section"view声音/viewswitchtype='checkbox'checked/switch/viewviewclass="section"view震动/viewswitchtype='checkbox'bindchange='switchChange'/switch/view/view.switch{background-color:#ccc;padding-top:10px;}.switch.section{display:flex;justify-content:space-between;background-color:#fff;}Page({switchChange:function(e){//返回true或者falseconsole.log("是否选中："+e.detail.value);},})

51.

form表单form表单可以提交switchinputcheckboxsliderradiopicker这些组件的value值，表单组件需要加上name作为key。viewclass='mt15'formbindsubmit='formSubmit'bindreset='formReset'viewclass='mt15fwb'switch开关选择器/viewswitchname='switch'/viewclass='mt15fwb'input单行输入框/viewinputname='input'placeholder='pleaseinputhere'/viewclass='mt15fwb'slider滑动选择器/viewslidername='slider'show-value/sliderviewclass='mt15fwb'radio单项选择器/viewradio-groupname='radio'labelradiovalue='man'/男/labellabelradiovalue='woman'/女/label/radio-groupviewclass='mt15fwb'checkbox多项选择器/viewcheckbox-groupname='checkbox'labelcheckboxvalue='1'/A/labellabelcheckboxvalue='2'/B/labellabelcheckboxvalue='3'/C/labellabelcheckboxvalue='4'/D/label/checkbox-groupviewclass='mt15fwb'picker滚动选择器/viewpickername='picker'mode='time'value='{{time_value}}'start="09:01"end="23:01"{{time_value}}/pickerviewclass='btn-area'buttonformType='submit'type='submit'Submit/buttonbuttonformType='reset'Reset/button/view/form/view.mt15{margin-top:15px;}.fwb{font-weight:bold;}Page({data:{time_value:'22:13'},sliderChange:function(e){console.log("当前值："+e.detail.value);},switchChange:function(e){console.log("是否选中："+e.detail.value);},formSubmit:function(e){console.log(e.detail.value);console.log("input的值为："+e.detail.value.input);},formReset:function(){console.log("表单重置了！");},});

52.

53.云开发测试环境与正式环境

暂停服务

54.设置－－＞暂停服务设置－－＞暂停服务

一些调试报错记录。代码没有问题，报错Error,提示是个已删除文件。出现该问题是由于你删除掉的文件还处于编辑状态，这时候关闭编辑器里的已删除文件窗口即可。

55.https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/event.html

56.https://www.imooc.com/article/40838?block_id=tuijian_wz---------未完待续-------------