逆战之微信小程序全局配置

1数据绑定

小程序借鉴了比如像Angular、vue这些流行框架的思想，采用数据绑定的机制来做数据的初始化和更新，不同于像Angular和Vue的双向数据绑定，小程序仅实现了单向数据绑定，即支持从逻辑层传递到视图层的数据绑定，反之则不行。

小程序使用Page方法参数里的data变量作为数据绑定的桥梁，写在data里的数据，被称为数据绑定的初始化数据。

数据的绑定有以下两种：

一种是初始化数据的数据绑定，通常将这些数据直接写在Page方法参数的data对象下面。
另外一种是使用setData方法来做数据绑定，这中方式也可以理解为数据更新。这样的数据更新将引起页面的重新渲染（Rerender）
说明：小程序的脚本是运行在JSCore中，JSCore是一个没有DOM的环境，所以小程序只能使用数据绑定来做数据的相关操作。

2、初始化数据绑定

小程序使用Mustache语法双大括号{{}}在微信，wxml组件里进行数据的绑定，通过Page实例的生命周期，解释一下初始化数据绑定的过程
当页面执行了onShow函数后，逻辑层会收到一个通知（Notify），随后逻辑层会将data对象以json的形式发动到view视图层（Send Initial Data），视图层接收到初始化数据后，开始第一次渲染，显示初始化数据（First Render），最终将数据呈现在开发者的眼前。

说明：如果数据绑定是作用在组件的属性中，比如<image src="{{pic}} />"，一定要在{{}}外边加上双引号，否则小程序会报错，如果是内容型的数据，则不需要加双引号，比如 {{data}}

3、查看数据绑定对象

通过AppData面板来查看和调试数据绑定变量，AppData下的数据以页面为组织单位，更改这里的某一项数据的值，都是实时进行更新的。

4.、数据绑定更新

可以通过setData函数来做数据绑定，这种方法可以理解为“数据更新”。setData方法位于Page对象的原型链上：Page.prototype.setData。大多数情况下，我们使用this.setData的方式来调用这个方法。

setData的参数接受一个对象，以key和value的形式将this.data中的key对应的值设置成value。

上面的话要注意两点：

setData 会改变this.data变量里相同key的值。
setData执行后会通知逻辑层执行Rerenader，并立刻重新渲染视图层。
this.setData所绑定或者更新的数据，并不要求在this.data中已预先定义。

Page({
data:{

},
onLoad: function(){
    var objData = {
        obj: {
            text:"hello"
        },
        name:"小明"
    }
    this.setData({
        pageData: objData
    })
}

})
{{pageData.obj.text}}

5、列表渲染 wx：for

标签没有实质意义，它并不是组件，所以我们称作“标签”，它仅仅是一个包装，不会在页面内被渲染，在这里可以理解为一个JavaScript编程语言中的括号，在block标签中被包裹的元素将被重复渲染。

wx:for-item=“item” 指定数组当前子元素的变量名，我们将元素的变量名指定为item，当然这个变量名可以更改。

如果不定义item数组子元素的变量名，依然是可以正常显示的，原因是小程序默认子元素的变量名就是item。

wx:for-index=“idx” 指定当前元素在数组中索引号的变量名，我们命名为idx。

wx：for 并不是一定要作用在block标签上的，也可以作用在view组件上，一样可以照常运行，但是并不推荐使用view等组件来做列表渲染，因为我们希望标签或者组件元素是语义明确的，view组件通常被用来当做视图容器或者是区域的分隔，它有它的使命，不应该滥用。

6、事件

要从一个页面跳转到另外一个页面，需要使用事件来响应点击某个动作。

什么是事件？

事件定义：事件是视图层（wxml）到逻辑层的通讯方式。简单理解：事件可以让我们在js里处理一些用户在界面上的一些操作，并对这些操作做出反馈。比如：点击一个按钮，从一个页面跳转到另外一个页面，在这个过程中，需要在js里调用MINA框架的API，使从一个页面跳转到另外一个页面。

想要实现页面跳转的这个机制，需要做两件事情

在组件上注册事件，告诉小程序要监听哪个组件的什么事件？
在js中编写事件处理函数响应事件，也就是说，监听到事件后，需要编写自己的业务。

6.1、冒泡事件和非冒泡事件

冒泡事件是指某个组件上的事件被触发后，事件还会向父级元素传递，一直到页面的顶级元素。

非冒泡事件则不会向父级元素传递事件。

bind和catch的区别

bind不会阻止事件的传播，而catch会阻止事件继续向父节点传播。