微信小程序（二）

一、模板

1. WXML提供模板（template），可以在模板中定义代码片段，然后在不同的地方调用。
2. 定义和使用模板：使用 name 属性，作为模板的名字。然后在template内定义代码片段；使用 is 属性，声明需要的使用的模板，然后将模板所需要的 data 传入，如：

   <template name="msg">
        <view>{{name}}</view>
    </template>
    <template is="msg" data="{{name:'tom'}}"></template>

is里也接收三元运算符，根据布尔值来判断使用哪个模板
3. 引用：将模板设置在当前页面里再使用，代码明显看上去很乱，而且多此一举。很多时候我们要把它设置成外链引用的形式，它既可以保证代码的清爽，又可以让整个项目的所有页面都可以使用它们。

（1）引用模板：外链template需要你设置一个template.wxml的文件，将模板设置在里面，然后在使用它的页面用import标记的src属性引入

 <import src="../template.wxml"/>

（2）引用公共块：include，设置一个.wxml文件，将其用include标记引用到任意位置，就可以将其中的除了template和wxs外的代码直接引用进去

<include src="../header.wxml"/>

二、事件

1. 小程序的事件和其他框架的事件差不多，都是写在行间并赋值一个事件函数，例如经典的点击事件

//在js文件里写方法
 handleTap (event){
        console.log(event)
    }
    //在wxml文件里写点击事件
    <view bind:tap="handleTap">
        <text>Click here!</text>
    </view>

2. event事件对象上有很多有用的属性（e）
   （1）changedTouches：当前事件手指列表，以及每个对象的属性
   （2）currentTarget：触发事件的对象信息(事件冒泡)，包括自定义属性值；id值；该元素偏移值
   （3）target：第一个触发事件的对象-事件源，包括自定义属性值；id值；该元素偏移值
   （4）detail：触发事件的额外信息，不同元素这里的信息不一样
   （5）timeStamp：时间戳
   （6）type：调用函数的事件

3. 阻止冒泡，我们想阻止事件流向上传递，但是小程序不是传统浏览器，原来的方法无法使用，小程序有它自己阻止冒泡的方法，将bind换成catch就可以设置一个不会冒泡的事件函数了。

//点击innder view 会冒泡到middle view 但不会再冒泡到outer view
<view id="outer" bindtap="handleTap1">
  outer view
  <view id="middle" catchtap="handleTap2">
    middle view
    <view id="inner" bindtap="handleTap3">
      inner view
    </view>
  </view>
</view>

三、样式

1. 给页面设置的样式放在.wxss的文件中，wxss实现了大多数css的样式，但是略有不同
   （1）单位：rpx动态单位，屏幕的宽度为750rpx，因此在常用的iPhone6的尺寸下1rpx=2px，而在其他尺寸屏幕中，它也会动态的调整大小。
   （2）选择器：目前支持的选择器包括类选择器、id选择器、标记名选择器和分组选择器，以及after和befor伪类
2. app.wxss是全局样式，默认会引入所有的.wxml页面，而给每个页面写的.wxss是当前页面的样式，只会对当前页面有影响
3. 如果是部分页面使用，我们可以自己设置一个.wxss文件，放在pages里，并在需要的页面的.wxss文件中用@import和相对路径将其引用进来
4. 行间样式，我们可以如同html一样，可以给元素设置style属性，但是值尽量不要使用固定值，因为修改样式还要获取DOM元素，我们应该用变量设置对应值，这样只要修改值就可以了

//第一种
data : {
    color : "red"
}
<view style="color:{{color}}">我要变色</view>
//第二种
changeColor(){
	this.setData({
		color:"red"
		})
	}
<view style="color:{{color}}" bind:tap="changeColor">点击变色</view>

四、更新页面

1. 在一个小程序运行期间，当数据发生变化时，页面重新渲染是时时刻刻都可能发生的
2. 但是如果你希望值发生变化的时候，页面就重新渲染确不行，这里和react一样，必须通过一个api接口方法setData()来修改的数据才能让页面重新渲染，把点击事件的对象的值改成click变量的值，然后函数内修改click的值：

 // this.data.click = "here is change";  无法改变click的值
    this.setData({
        click : "here is change"
    })

3. 该方法不会在每次修改data的时候重新渲染页面，如果在一个事件循环中你多次修改了data的值会让程序负担过重，因此它们并不是同步改变，而是在一次事件循环结束后，统一去重新渲染页面

五、组件

1. 小程序的页面就是由一个一个的组件(wxml的标记)所组成的，组件的名字各式各样，比如上面view和text，它们有的仅仅是作为盒子和装文字的标记使用，还有一些有一些特殊的功能。
2. 微信小程序组件和属性
   （1）公共属性：所有标记都会有的属性，除了和HTML标记一样的id、class和style等，还有data-name(自定义数据)、bind:tap(绑定事件属性)和hidden(显示或隐藏元素，默认值是true)
   （2）专用属性：某些或一部分标记用的属性，详见组件api
3. 自定义组件：模板（template）只有结构，而组件除了结构还有对应的样式和行为以及通过设置不同参数的变化。设置一个自己的组件：
   （1）首先在page里如同设置一个页面一样创建一个文件夹(magicNumber)，并在里面创建wxml、wxss、js和json文件，分别写好该组件的结构、样式、逻辑和配置
   （2）json和js文件配置

 {    //json文件，告诉小程序这是组件不是页面
        "component" : true  
    }
    Component({}) //在js文件里写，因为不是页面，不要写成Page

（3）在用这个组件页面的配置(json)文件中配置

{
        "usingComponents" : {
            "magic-number" : "/pages/magicNumber/mNumber"
        }
    }

最后在用这个组件页面的wxml文件中像其他组件一样使用它了，标记名既是magic-number
（4）该组件中使用的数据依然设置在js文件中

Component({
        data : {
            magicNumber : Math.random()
        },
        attached(){  // 在组件实例进入页面节点树时
            this.triggerEvent("getMagicNumber",this.data.magicNumber);  //如果希望页面加载时也向父组件传值
        },
        methods{  //不是页面，因此回调函数必须写在这里
            onTap (){  //点击事件函数
                this.setData({
                    magicNumber : Math.random()
                })
                this.triggerEvent("getMagicNumber",this.data.magicNumber);  
                //自定义事件，如果有多个需要传递的数据，第二个参数写成对象，getMagicNumber是事件
            },
        }
    })

最后在父组件中使用这个数据并给该元素一个点击事件调用onTap函数，这样我们就完成了一个点击显示随机数的组件

//使用该组件的页面wxml，这里自定义属性now-in是父组件向子组件传值的方法
  <magic-number now-in="index" bind:getMagicNumber="noGetNumber"></magic-number>
  //noGetNumber是方法
    //使用该组件的页面js
    Page({ 
        propertise : {  //子组件接收父组件的传值
            nowIn : String   
        }, //key是自定义属性名，要写成驼峰写法，值为值的类型，后如同data一样去使用它
        data : {
            thisNumber : 0
        },
        noGetNumber(ev){   //自定义事件传的数据保存在ev.detail上
            this.setData({
                thisNumber : ev.detail
            })
        }
    })

子组件里通过自定义事件将父组件要修改的值传递出去，在父组件的自定义组件的属性位置调用，并设置时间函数执行对应代码