小程序学习

小程序的特点

• 入口浅

  小程序可以从很多地方进入，比如扫一扫，摇一摇，搜索，公众好等等..

• 体积小

  小程序对代码是有限制的，不能超过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>