微信小程序学习笔记二（数据绑定）

小程序介绍

    利用 XML + CSS + JS 编写移动应用程序

微信小程序的一大特性就是： 动态绑定数据。

数据绑定（基本语法）

假设在pages内的index文件夹下：

index.js中的代码

Page({
    //有一个data属性
    data : {
        greeting : "Hello World",
        textColor : "blue",
        isShowError : false,
        isLoading : true,
        num1 : 100,
        num2 : 200,
        username : Rose,
        languages : {
            {name:"Chinese",country:"China"},
            {name:"Korean",country:"Korea"},
            {name:"English",country:"British"}
        }
    }
})

index.wxml中代码

{{内容}}：出现双括号，就会使用框架去查询index.js中data属性中是否有“ 内容 ”这个成员，如果有则显示。

① 绑定标签内容

<view>{{greeting}}</view>
<!--
    在index.js中的data中有greeting属性，且值为“ Hello World ”
    因此，当编译后，可以在页面上看到 “Hello World”字样
-->

② 绑定标签属性

<view class="txt-{{textColor}}">这行文字会显示成蓝色</view>
<!--
    在index.js中查找textColor ，得到blue，
    因此该标签的类名时 txt-blue，且在index.wxss中有：
       .txt-blue {
          color: blue;
      }
    所以该样式会使那段文字渲染成蓝色
  -->

③ 三元运算

<view>{{isLoading ? '加载中......' : '加载完毕！！！'}}</view>
<!--
    在index.js中 isLoading的值为true，所以输出 “加载中”
-->

④ 算术运算

<view>{{num1}} + {{num2}} = {{num1 + num2}}</view>
<!--
    在index.js中，num1为100，num2为200
    输出结果为：
        100 + 200 = 300
-->

⑤ 字符串运算

 <view>{{"Hello," + username}}</view>
 <!--
     这里将进行字符串的拼接操作。
     而在index.js中username的值为 Rose
     所以输出结果：
        Hello，Rose
 -->

⑥ 逻辑运算

<view wx:if="{{num1 + num2 === 300}}">总数等于300</view>
 <!--
    这里将调用if方法，判断num1的值 加上num2的值 是否等于 300，
    如果等于，则返回true，显示这标签
    如果不等，则返回false，隐藏这标签
 -->

⑦ 组合数据

<view wx:for="{{[1,2,3,4,5,6,num1,num2]}}" wx:for-item="n">{{n}}</view>
<!--
    这里调用for循环，将得到数组[1,2,3,4,5,6,100,200]
    for-item=n表示n为遍历时的当前值，
    输出n，则会遍历输出
    1 
    2
    3
    4
    5
    6
    100
    200
-->

⑧ 组合对象

<!-- 定义模板 要添加name属性-->
<template name="t1">{{val1}} | {{val2}}</template>
<!-- 使用模板 要使用is属性指定模板的name值-->
<template is="t1" data="{{val1:num1,val2:num2}}"></template>
<!--
    在使用了t1模板后，使用data属性用来填充模板，
    使得val1的值为num1的值为100
    使得val2的值为num2的值为200
    最后的输出结果：
        100 | 200
-->

⑨ 简单的条件渲染

<view wx:if="{{isShowError}}">
    <text class="error-msg"></text>
</view>
<!--
    如果isShowError的值为true，则创建该元素以及子元素等
    如果值为false，则忽略这条代码
-->

⑩ 带分支的条件渲染

<view wx:if="{{num1 > 100}}">1</view>
<view wx:elif="{{length > 50}}">2</view>
<view wx:else>3</view>
<!--
    条件语法：
        如果num1的值 大于 100，则创建该元素
        如果length的值 大于 50，则创建第二条元素
        否则，创建第三条元素

    结果：
        由于num1的值为100，不满足条件，
        由于没有length这个成员，不满足条件
        因此，输出3
-->

11 . 用来进行包含了多个组件的条件渲染

<block wx:if="{{true}}">
    <view>view1</view>
    <view>view2</view>
</block>
<!--
    用block标签可以用来包含多个标签，这样，在block标签上使用if语法，
    如果返回为true，则内部的所有标签都能创建

    由于if的值为true，所以可以创建这个block标签以及它的子元素。
    输出结果：
        view1
        view2
-->

12 . 列表选渲染

默认数组的当前项的下标变量名默认为 index，数组当前项的变量名默认为 item

<view wx:for="{{languages}}" wx:for-index="i" wx:for-item="langu">
    {{i}} : {{langu.name}} : {{langu.country}}
</view>
<!--
    wx:for 用于装需要遍历的数组
        数组有多少个元素，就创建多少个view元素
    wx:for-index 用于装索引的变量
    wx:for-item 遍历数组时，对每个元素的一个引用

    输出结果：
        0 ： Chinese ： China
        1 ： Korean ： Korea
        2 ： English ： British
-->

注意：

<!-- 当wx:for 的值是一个字符串时，会将字符串解析成字符串数组 -->
<view wx:for="array">{{item}}</view>

<!-- 将会解析成如下代码： -->
<view wx:for="{{['a','r','r','a','y']}}">{{item}}</view>

重点：

<!-- 特别注意：当双花括号和引号之间有空格时，将不会进行渲染，而是解析为字符串 -->
<view wx:for="{{array}} "></view>
<!-- 解析成了字符串数组 -->
<view wx:for="{{['a','r','r','a','y']+' '}}">

13 . 模板（可重用）

    <!-- 定义一个模板 -->
    <template name="pro1">
        <view>
          <text>Name : {{name}}</text>
        </view>
        <view>
          <text>Age : {{age}}</text>
        </view>
    </template>

    <!-- 定义一个模板 -->
    <template is="pro1" data="{{name:"Rose",age:20}}"></template>

    <!--
        注意： 模板不能引用到逻辑代码中的data属性中的成员。
        模板的作用是封闭的，因此，只能使用data传入数据对象
        data传入的数据对象就可以被模板所使用

        输出结果：
            Name： Rose
            Age ： 20
    -->

14 . 引入其他文件中的模板

1 . 使用：导入文件中的template模板

<import src="templates/pro1.wxml" />
<!--
    假设有一个templates文件夹中有一个pro1.wxml文件
    且pro1.wxml中的代码为：
    <template name="pro1">
           <view>
             <text>Name : {{name}}</text>
           </view>
           <view>
             <text>Age : {{age}}</text>
           </view>
       </template>
        因此可以在导入了这个文件后，就可以在下方使用template标签来使用模板
    -->
<!-- 使用模板 -->
<template is="pro1" data="{{name:'Jack',age:20}}"></template>

2 . 使用：相当于将文件里的内容赋值到include处

<include src="templates/banner.wxml" />
<!--
    使用include标签，引入了templates文件夹中的banner.wxml文件，
    这样就相当于，将banner.wxml文件的所有代码放在include标签处。
    假设banner.wxml文件中代码是：
        <template name="pro1">
            <view>
              <text>Name : {{name}}</text>
            </view>
            <view>
              <text>Age : {{age}}</text>
            </view>
        </template>
    相当于：
        <include src="templates/banner.wxml" />
        就是：
        <template name="pro1">
            <view>
              <text>Name : {{name}}</text>
            </view>
            <view>
              <text>Age : {{age}}</text>
            </view>
        </template>
-->

15 . 对象

 <!-- 单个对象 -->
Page({
    data : {
        a: 1,
        b: 2
    }
})
<template is="temp1" data="{{for:a,bar:b}}"></template>
<!-- 最终组合而成的对象为： {for:1,bar:2} -->


 <!-- 组合对象
        用扩展运算符 ... 来将一个对象展开
 -->
 Page({
     data : {
         obj1 : {
             a: 1,
             b: 2
         },
         obj2 : {
             c: 3,
             d: 4
         }
     }
 })
<template is="temp2" data="{{...obj1,...obj2,e:3}}"></template>
<!--
    最终组合而成的对象：
    {a:1,b:2,c:3,d:4,e:5}
-->

事件机制

在小程序中，绑定事件有两种方法

① bind方法

     使用bind方法，可以接受冒泡事件

② catch方法

     若使用了catch事件后，就不会再往上冒泡，会在当前元素截止。

<view class="outer" bindtap="outerTap">
    <view class="center" catchtap="centerTap">
        <view class="inner" bindtap="innerTap"></view>
    </view>
</view>
<!-- 
    点击inner时，结果为：  
        inner
        center
    是因为inner使用的是bind方式 --- 支持向上冒泡
         center使用的是catch方式 -- 不支持向上冒泡，所以在这里停住
        将不会调用outer的tap事件
-->

//index.js中的代码
Page({
  outerTap : function (event) {
        console.log("outer");
        console.log(event);
  },
  centerTap : function (event) {
        console.log("center");
        console.log(event);
  },
  innerTap : function (event) {
        console.log("inner");
        console.log(event);
  }
})