wxAppTodos

  todomvc提供了在当今大多数流行的JavaScript MV*框架概念实现的相同的Todo应用程序，觉得这个小项目挺有意思，最近在学习微信小程序，故用小程序做一版Todo（默认你已知道Todo的基本功能）。

创建小程序项目

  初始的申请账号、安装开发工具、新建小程序项目以及基础文档部分，建议读者自行研读小程序官方文档

小程序特色

• 标签
  世上再无div，无人爱我基友p。
  1.视图容器
    view ，scroll-view ，swiper ，movable-view ，cover-view
  2.基础内容
    icon ，text ，rich-text ，progress
  3.表单组件
    button ，checkbox(checkbox-group) ，from ，input ，label ，picker ，picker-view ，radio(radio-group) ，slider ，switch ，textarea
  4.导航
    navigator
  5.媒体组件
    audio ，image ，video ，camera ，live-player ，live-pusher
  6.地图
    map
  7.画布
    canvas

• 标签属性
  以下重点说明本Todo中使用到的，其他具体请移步小程序官方文档
  1.input的placeholder的样式，有专门的属性 placeholder-class，如下：

  <input placeholder-class="phcolor" placeholder='What needs to be done?' focus="{{focus}}" value="{{ inputVal }}" />

  2.checkbox及for循环：
  checkbox的状态变换，无法直接操作checkbox，需要在checkbox-group上面操作，
  wx:for循环需加上wx:key

  <view class="" wx:for="{{ showLists }}" wx:key="index">  
  <checkbox-group bindchange="checked" data-id="{{item.id}}">
    <checkbox value="{{ item.value }}" checked="{{ item.check }}"></checkbox>
  </checkbox-group>
  </view>

  3.hidden属性：隐藏标签，标签全可用

  <view hidden="{{ hidden }}"></view>

  4.自定义属性：data-

  <text data-type="all" class="{{  dataType=='all'?'on':''  }}" bindtap="changeType">All</text>
  changeType(e){
  //js中获取data-type的值
  let dataType = e.target.dataset.type
  }

• js方面
  1.data:{}中的数据变更后，必须使用this.setData()来更新数据

  data:{ dataType:'all' },
  changeType(e) {
  let type = e.target.dataset.type
  this.setData({ dataType: type })
  }

  2.模拟双击效果：通过两次点击的时间长短来判断是否为双击

  doubleTap(e){
  let curTime = e.timeStamp
  let lastTime = this.data.lastTapDiffTime
  let that = this
  if (lastTime > 0) {
    if (curTime - lastTime < 300) {
      console.log('双击')
    }
  }
  }