小程序学习
小程序的特点
入口浅
小程序可以从很多地方进入，比如扫一扫，摇一摇，搜索，公众好等等..
体积小
小程序对代码是有限制的，不能超过2MB,所以他的体积是很小的，不然怎么叫小程序呢是不？体验好
正是因为小程序可以通过扫一扫、摇一摇等方式进入，所以不需要像安卓app那样通过应用商城花费流量下载，并且因为小程序体积小，所以运行快，综合而言，小程序具有很好的体验性。
当然，事物都是有两面性的，小程序既有优点，也有它的缺点
比如：
1、小程序不是你想搜到就搜到，通常都是别人使用后分享过来，自己才能使用。
2、小程序没有用户体系，小程序没有人注册，所以没有自己特定的用户。
3、小程序因为体积太小，所以功能不是很强大。
等等.....
当然，这些问题暂时还不是我们所能考虑的，我们需要的就学习如何开发小程序。
小程序的开发
首先
我们需要去微信公众平台去注册，才能对小程序进行开发，在这里我就不说那些啦。
今天学习小程序，发现小程序的开发与vue框架非常像是，所以，只要vue学会了，开发小程序就会比较轻松了。
这里我将把一些有可能在开发过程中遇到的错误写下来，用于方便以后查阅。
知识点一：
在小程序中想要进行路由跳转有三种方法，第一是使用 <navigator open-type="navigateTo"/> 组件的方式，第二种是 wx.navigateTo 使用编程式路由，第三种是 tabBar 跳转页面，但是，正所谓一上不容二虎，一个页面，不可以即使用组件方式或编程式路由又使用 tabBar 方式跳转。如果使用了 tabBar 前面两种方法都将无效，但是凡事都有特列，如果我们真的即想通过组件或编程式路由跳转，又想通过 tabBar跳转，我们也可以做到，就是将组件的 open-type="navigateTo" 改为 open-type="reLaunch ",将编程式路由由 wx.navigateTo 改为 wx.reLaunch。当然这些在官方文档上都有，但是，有时候没有注意到还是很老火的。
知识点二：
小程序处理数据的方式和react比较相似。
data: {
compented:false,
lista:""
}就比如现在这个，如果想要在js中获取数据，就必须通过this.data.lista才能将lista这个数据拿到，而在更改这个数据的时候，也需要通过this.setData({}) 设置。所以，朋友们千万别搞错啦。而且当我们创建了一个组件，组件里面有通过父级传下来的数据，最终也是合并到data这里面的，所以我们既可以通过this.data.得到properties中的数据，也可以通过this.properties.得到数据。
知识点三：
小程序因为不是基于浏览器开发的，所以里面的标签没有div这一写法，虽然它大部分都和html标签差不多，但是还是有些是不一样的，只能自己总结了，今天就遇见一个，如下：
<checkbox value='{{item.isShow}}' checked='{{item.isShow}}'>
{{item.count}}
</checkbox>今天做了一个todos小案例，刚开始我将复选框写为何html标签一样，结果得到的却是type为text,于是我就想到，可能这个标签在小程序中不是这样使用的，于是在网上就搜到了如上写法。所以，当我们在写小程序无法得到自己想要的效果的时候，不防去搜索一下是不是我们写的是不是和小程序中的不一样。
知识点四：
由于在做todos的时候需要获取当前点击的列表的索引值，但是不知道事件如何传参，所以在网上搜倒一种方法，见代码：
复选框：<checkbox value='{{item.isShow}}' checked='{{item.isShow}}' data-index="{{index}}" bindtap="handlechange">{{item.count}}</checkbox>
js方法：
handlechange(event){
var cloneList=this.data.list;
var index=event.currentTarget.dataset['index'];
}通过 event.currentTarget.dataset['index'] 我获得了当前点击的列表的索引值。
知识点五：
由于小程序里没有vue那种v-model指令，所以想要获取input中的数据并实时更新只有通过 bindinput 这个事件来完成，具体代码如下：
handleAdd(ev){
this.setData({
lista:ev.detail.value //这是获取到的input的value值，然后赋值给data设置的属性
})
}在这里，本人将今天的todos小案例代码放上，当然，肯定有很多地方可以优化，暂时就不管啦。功能实现就好啦。
todos.js: todos的js文件
Component({
/**
* 组件的初始数据
*/
data: {
list:[
{count:111,isShow:true}
],
all:true,
action:false,
compented:false,
lista:""
},
/**
* 组件的方法列表
*/
methods: {
handleClick(ev){
this.setData({
all:false,
action:false,
compented:false
})
var istrue=ev.currentTarget.id;
if(istrue==="all"){
this.setData({
all:true
})
}else if(istrue==="action"){
this.setData({
action:true
})
}else{
this.setData({
compented:true
})
}
},
handleAdd(ev){
this.setData({
lista:ev.detail.value
})
},
handleKey(){
this.setData({
list:[{count:this.data.lista,isShow:false},...this.data.list]
})
},
handlechange(event){
var cloneList=this.data.list;
var index=event.currentTarget.dataset['index'];
for(var i=0;i<cloneList.length;i++){
if(i===index){
cloneList[i].isShow=!cloneList[i].isShow;
}
}
this.setData({
list:cloneList
})
}
}
})todos.wxml:todos的视图文件
<input type="text" bindinput="handleAdd"/><button bindtap="handleKey">添加</button>
<include src="all.wxml" wx:if="{{all}}" />
<include src="action.wxml" wx:if="{{action}}" />
<include src="compented.wxml" wx:if="{{compented}}" />
<button id="all" catchtap="handleClick">all</button><button id="action" catchtap="handleClick">action</button><button id="compented" catchtap="handleClick">compented</button>all.wxml:todos的全部显示区域
<view wx:for="{{list}}" wx:key="{{index}}">
<checkbox value='{{item.isShow}}' checked='{{item.isShow}}' data-index="{{index}}" bindtap="handlechange">{{item.count}}</checkbox>
</view>action.wxml:todos的已完成区域
<view wx:for="{{list}}" wx:key="{{index}}">
<checkbox value='{{item.isShow}}' checked='{{item.isShow}}' wx:if="{{item.isShow===true}}">{{item.isShow===true ? item.count : ""}}</checkbox>
</view>compented.wxml:todos的未完成区域
<view wx:for="{{list}}" wx:key="{{index}}">
<checkbox value='{{item.isShow}}' checked='{{item.isShow}}' wx:if="{{item.isShow===false}}">{{item.isShow===false ? item.count : ""}}</checkbox>
</view>