数据绑定

今天我们来了解一下数据绑定，什么是数据绑定呢？就是把WXML 中的一些动态数据分离出来放到对应的js文件的 Page 的 data里。

数据绑定这个概念其实很多学过网页开发的朋友也会比较困惑。大家可以不必执着于这个深奥的概念，而是先来动手做一下了解是一个什么效果。在潜移默化里，你会get到前端里一个非常了不得的技术知识哦~

把数据分离出来

我们可以在小程序的页面文件wxml里写这样一段代码，比如我们可以写在home.wxml里面，

<view>张明，您已登录，欢迎</view>

这样的场景我们经常遇到，不同的人使用一款App或者H5的时候，页面会根据不同的登录人不同的用户信息。

我们可以这样把wxml的代码修改成这样：

<view>{{username}}，您已登录，欢迎</view>

然后再在home.js的data里面写这样一段代码，最终呈现的结果是：

    data: {
        username:"张明"`
      },

在模拟器我们看到呈现的结果和之前一样，我们可以data里面的”张明”修改成任何一个人的名字，前端的页面也会相应有所改变，如果通过函数的方式根据不同的用户修改username的值，这样不同的登录的人登录就会显示相应的用户名。

大家再回头来回顾一下json语法，这里的username是字段名称，也就是变量，冒号:后面的是值。在wxml文件里，只需要用双大括号{{}}把变量名包起来，就能把data里面的变量给渲染出来。

数据类型

通过前面的案例我们了解到WXML 中的动态数据均来自对应 Page 的 data。 data 是小程序的页面第一次渲染使用的初始数据。小程序的页面加载时， data 将会以 JSON字符串的形式由逻辑层传至渲染层，因此 data中的数据必须是可以转成 JSON的类型：字符串String，数字Number，布尔值Boolean，对象Object，数组Array。

数据类型在编程语言里是一个非常重要的概念，大家可以先只需要知道是啥就可以，不必强行理解哦。就像我们把不同的人分为男、女、深圳人、程序员等不同类型一样，数据类型就是一种对不同类型的数据进行了一个分类而已，只是为了区分它们才有了不同的格式规范它们。

组件属性的渲染

通过数据绑定，我们还可以把 style、class 、id等属性分离出来来控制组件的样式等信息。

使用开发者工具在home.wxml里输入以下内容：

<navigator id="item-{{id}}" class="{{itemclass}}" url="{{itemurl}}" >
      <image style="width: {{imagewidth}}" mode="{{imagemode}}" src="{{imagesrc}}"></image>
</navigator>

需要按照json的语法，把下面data里面的数据添加到home.js的data里面：

data: {
        id: 233,
        itemurl:"/pages/home/imgshow/imgshow",
        itemclass:"event-item",
        imagesrc: "https://hackwork.oss-cn-shanghai.aliyuncs.com/lesson/weapp/4/weapp.jpg",
        imagemode:"widthFix",
        imagewidth:"100%",
      },

然后在模拟器里查看显示的效果，发现显示的结果上和我们之前不采用数据绑定没有什么区别，但是用数据绑定的好处是为我们以后添加大量数据以及进行编程更新打下了基础。 字符串与数字

在前面我们以前说过，数字Number与字符串String在Excel里是不同的，在小程序（也就是JavaScript）里也是不同的。我们来实战了解一下，在home.wxml里输入以下代码：

<view>两个数字Number相加：{{love1+forever1}}</view>
<view>两个字符串String相加：{{love2+forever2}}</view>

然后把下面data里的数据添加到home.js里面:

  data: {
    love1:520,
    love2:"520",
    forever1:1314,
    forever2:"1314",
  }

在这里我们可以看到使用””双引号包住的是字符串格式，而没有使用双引号的是数字格式。

可以看到数字格式的数字相加和四则运算的加法是一致的，而字符串与字符串的相加是拼接。+ 加号在JavaScript里既可以扮演四则运算符的角色，也可以进行拼接，取决于数据的格式。

小任务：数字格式的520和字符串格式的520，它们在页面的显示上虽然是一样的，但是字符串格式可以拼接，而数字格式的数字，则方便以后我们进行数字大小的比较。请问出身年份是应该使用数字格式，还是字符串格式？身份证号码呢？

渲染数组里的单条数据

在前面我们就已经接触过数组，比如pages配置项就是小程序里所有页面的一个列表。数组Array是值的有序集合，每个值叫做一个元素，而每个元素在数组中有一个位置，以数字表示，称为索引。这个索引是从0开始的非负整数，也就是0，1，2，3，4，5…..

在home.wxml里输入以下代码：

<view>互联网快讯</view>
<view>{{newstitle[0]}}</view>

然后把下面data里的数据添加到home.js里面：

  data: {
    newstitle:[
      "瑞幸咖啡：有望在三季度达到门店运营的盈亏平衡点",
      "腾讯：广告高库存量还是会持续到下一年",
      "上汽集团云计算数据中心落户郑州，总投资20亿元",
      "京东：月收入超2万元快递小哥数量同比增长163%",
      "腾讯：《和平精英》日活跃用户已超五千万",
    ],
  }

我们发现数组的第一条数据就显示出来了，也就是说{{array[0]}}对应着数组array的第一项，0就是索引的第一个位置，也就是我们可以使用数组名+中括号[ ]+索引的位置来访问数组的某一条数据。

小任务：我们已经知道newstitle[0]显示的是第1条新闻的标题，那怎么显示第5条新闻的标题？还记得pages配置项的第一项就是小程序的初始页面么，你现在知道它是怎么做到的么？

渲染对象类型的数据

对象（object）是 JavaScript 语言的核心概念，也是最重要的数据类型。对象是一个包含相关数据和方法的集合（通常由一些变量和函数组成，我们称之为对象里面的属性和方法）。

有的时候一个对象有多个属性，就拿电影来说，就有电影名称，国家，发行时间、票价、评价等等无数个属性，我们该如何把这些呈现在页面上呢？

在home.wxml文件里输入以下代码：

<image mode="widthFix" src="{{movie.img}}" style="width:300rpx"></image>
<view>电影名：{{movie.name}}</view>
<view>英文名：{{movie.englishname}}</view>
<view>国家：{{movie.country}}</view>
<view>发行年份：{{movie.year}}</view>
<view>简述：{{movie.desc}}</view>

在与之对应的home.js的data里，添加如下数据：

data: {
    movie: {
      name: "肖申克的救赎",
      englishname:"The Shawshank Redemption",
      country:"美国",
      year:1994,
      img: "https://img3.doubanio.com/view/photo/s_ratio_poster/public/p480747492.webp",
      desc: "有的人的羽翼是如此光辉，即使世界上最黑暗的牢狱，也无法长久地将他围困！"
    },
  },

这样，对象Object类型的数据就被渲染出来啦。也就是在双大括号{{}}里，输入变量movie+点+属性名即可，这就是对象的点表示法。

复杂的数据嵌套

对象是可以嵌套的，也就是一个对象可以作为另外一个对象的值，除了对象里套对象，数组里也可以套对象，对象里也可以套数组。把现实生活中的事物转化成错综复杂的数据，是非常重要的数据思维。

比如上面我们只列出了豆瓣排名第1的电影，那top5前五的电影呢，它就是一个列表；每一部电影的工作人员又有导演、编剧、演员，而每一部电影的演员名单又是一个列表，每个演员又有复杂的属性，比如姓名、出身年月、所获奖项（列表）…真的是子子孙孙无穷尽。当然简单的数据我们可以写在data里面，而如此复杂的数据就要使用到数据库啦。

比如我们把下面data里的数据添加到home.js里面：

    movies:[
      {
        name: "肖申克的救赎",
        englishname: "The Shawshank Redemption",
        country: "美国",
        year: 1994,
        img: "https://img3.doubanio.com/view/photo/s_ratio_poster/public/p480747492.webp",
        desc: "有的人的羽翼是如此光辉，即使世界上最黑暗的牢狱，也无法长久地将他围困！",
        actor:[
          {
            name:"蒂姆·罗宾斯",
            role:"安迪·杜佛兰"
          },
          {
            name:"摩根·弗里曼",
            role:"艾利斯·波伊德·瑞德"
          },
        ]
      },
      {
        name: "霸王别姬",
        englishname: "Farewell My Concubine",
        country: "中国",
        year: 1993,
        img: "https://img3.doubanio.com/view/photo/s_ratio_poster/public/p2561716440.webp",
        desc: "风华绝代",
        actor: [
          {
            name: "张国荣",
            role: "程蝶衣"
          },
          {
            name: "张丰毅",
            role: "段小楼"
          },
        ]
      },
    ],

那我们应该如何把豆瓣电影排名第2的霸王别姬的主演之一的张国荣的名字给渲染到页面呢？ {{movies[1].actor[0].name}}表示的是电影列表里的第2部电影， {{movies[1].actor[0]}}表示的是第2部电影里的排名第一的主演， {{movies[1].actor[0].name}}则表示的是主演的名字啦。

在home.wxml里输入以下代码测试看一下显示的是不是张国荣？

<view>豆瓣电影排名第2、最重要的主演演员名：</view>
<view>{{movies[1].actor[0].name}}</view>

那如何把第2部电影里的所有数据都渲染出来呢？

<image mode="widthFix" src="{{movies[1].img}}" style="width:300rpx"></image>
<view>电影名：{{movies[1].name}}</view>
<view>英文名：{{movies[1].englishname}}</view>
<view>发行地：{{movies[1].country}}</view>
<view>发行年份：{{movies[1].year}}</view>
<view>简述：{{movies[1].desc}}</view>

小任务：在home.wxml输入以下代码会是什么结果？为什么不能这样？

 <view&{{movies}}</view&
 <view&{{movies[1]}}</view&
 <view&{{movies[1].actor}}</view&

以上我们只是输出了数组里的单条数据，或者对象嵌套的数据里的单条数据，如果是商品列表、电影列表、新闻列表这些我们应该如何渲染到页面呢？后面一节我们将会介绍列表渲染和条件渲染。