云開發(fā) 數(shù)據(jù)綁定

今天我們來了解一下數(shù)據(jù)綁定，什么是數(shù)據(jù)綁定呢？就是把WXML 中的一些動(dòng)態(tài)數(shù)據(jù)分離出來放到對(duì)應(yīng)的js文件的 Page 的 data里。

數(shù)據(jù)綁定這個(gè)概念其實(shí)很多學(xué)過網(wǎng)頁開發(fā)的朋友也會(huì)比較困惑。大家可以不必執(zhí)著于這個(gè)深?yuàn)W的概念，而是先來動(dòng)手做一下了解是一個(gè)什么效果。在潛移默化里，你會(huì)get到前端里一個(gè)非常了不得的技術(shù)知識(shí)哦~

把數(shù)據(jù)分離出來

我們可以在小程序的頁面文件wxml里寫這樣一段代碼，比如我們可以寫在home.wxml里面，

<view>張明，您已登錄，歡迎</view>

這樣的場(chǎng)景我們經(jīng)常遇到，不同的人使用一款A(yù)pp或者H5的時(shí)候，頁面會(huì)根據(jù)不同的登錄人不同的用戶信息。

我們可以這樣把wxml的代碼修改成這樣：

<view>{{username}}，您已登錄，歡迎</view>

然后再在home.js的data里面寫這樣一段代碼，最終呈現(xiàn)的結(jié)果是：

    data: {
        username:"張明"
      },

在模擬器我們看到呈現(xiàn)的結(jié)果和之前一樣，我們可以data里面的”張明”修改成任何一個(gè)人的名字，前端的頁面也會(huì)相應(yīng)有所改變，如果通過函數(shù)的方式根據(jù)不同的用戶修改username的值，這樣不同的登錄的人登錄就會(huì)顯示相應(yīng)的用戶名。

大家再回頭來回顧一下json語法，這里的username是字段名稱，也就是變量，冒號(hào):后面的是值。在wxml文件里，只需要用雙大括號(hào){{}}把變量名包起來，就能把data里面的變量給渲染出來。

數(shù)據(jù)類型

通過前面的案例我們了解到WXML 中的動(dòng)態(tài)數(shù)據(jù)均來自對(duì)應(yīng) Page 的 data。 data 是小程序的頁面第一次渲染使用的初始數(shù)據(jù)。小程序的頁面加載時(shí)， data 將會(huì)以 JSON字符串的形式由邏輯層傳至渲染層，因此 data中的數(shù)據(jù)必須是可以轉(zhuǎn)成 JSON的類型：字符串String，數(shù)字Number，布爾值Boolean，對(duì)象Object，數(shù)組Array。

• 字符串String，用于存儲(chǔ)和處理文本，可以結(jié)合Excel單元格格式里的文本格式來理解；
• 數(shù)字Number，這個(gè)很好理解，比如233這個(gè)數(shù)，它的數(shù)字格式和文本格式是有很大不同的，學(xué)Excel一定不會(huì)陌生；
• 布爾值Boolean，就是true和false，雖然只有兩個(gè)值，但是它代表著兩種選擇，兩種不同的條件，兩種不同的結(jié)果；
• 對(duì)象Object，結(jié)合之前所學(xué)，我們?cè)賮砘仡櫼幌拢簩?duì)象由大括號(hào){}分隔，在大括號(hào){}內(nèi)部，對(duì)象的屬性以名稱和值對(duì)的形式 name : value來定義，屬性由逗號(hào),分隔

• 數(shù)組Array，結(jié)合之前所學(xué)，我們?cè)賮砘仡櫼幌拢簲?shù)組由中括號(hào)[ ]來分割，有點(diǎn)類似于列表；

  數(shù)據(jù)類型在編程語言里是一個(gè)非常重要的概念，大家可以先只需要知道是啥就可以，不必強(qiáng)行理解哦。就像我們把不同的人分為男、女、深圳人、程序員等不同類型一樣，數(shù)據(jù)類型就是一種對(duì)不同類型的數(shù)據(jù)進(jìn)行了一個(gè)分類而已，只是為了區(qū)分它們才有了不同的格式規(guī)范它們。

組件屬性的渲染

通過數(shù)據(jù)綁定，我們還可以把 style、class 、id等屬性分離出來來控制組件的樣式等信息。

使用開發(fā)者工具在home.wxml里輸入以下內(nèi)容：

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

需要按照json的語法，把下面data里面的數(shù)據(jù)添加到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%",
      },

然后在模擬器里查看顯示的效果，發(fā)現(xiàn)顯示的結(jié)果上和我們之前不采用數(shù)據(jù)綁定沒有什么區(qū)別，但是用數(shù)據(jù)綁定的好處是為我們以后添加大量數(shù)據(jù)以及進(jìn)行編程更新打下了基礎(chǔ)。 字符串與數(shù)字

在前面我們以前說過，數(shù)字Number與字符串String在Excel里是不同的，在小程序（也就是JavaScript）里也是不同的。我們來實(shí)戰(zhàn)了解一下，在home.wxml里輸入以下代碼：

<view>兩個(gè)數(shù)字Number相加：{{love1+forever1}}</view>
<view>兩個(gè)字符串String相加：{{love2+forever2}}</view>

然后把下面data里的數(shù)據(jù)添加到home.js里面:

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

在這里我們可以看到使用””雙引號(hào)包住的是字符串格式，而沒有使用雙引號(hào)的是數(shù)字格式。

可以看到數(shù)字格式的數(shù)字相加和四則運(yùn)算的加法是一致的，而字符串與字符串的相加是拼接。+ 加號(hào)在JavaScript里既可以扮演四則運(yùn)算符的角色，也可以進(jìn)行拼接，取決于數(shù)據(jù)的格式。

小任務(wù)：數(shù)字格式的520和字符串格式的520，它們?cè)陧撁娴娘@示上雖然是一樣的，但是字符串格式可以拼接，而數(shù)字格式的數(shù)字，則方便以后我們進(jìn)行數(shù)字大小的比較。請(qǐng)問出身年份是應(yīng)該使用數(shù)字格式，還是字符串格式？身份證號(hào)碼呢？

渲染數(shù)組里的單條數(shù)據(jù)

在前面我們就已經(jīng)接觸過數(shù)組，比如pages配置項(xiàng)就是小程序里所有頁面的一個(gè)列表。數(shù)組Array是值的有序集合，每個(gè)值叫做一個(gè)元素，而每個(gè)元素在數(shù)組中有一個(gè)位置，以數(shù)字表示，稱為索引。這個(gè)索引是從0開始的非負(fù)整數(shù)，也就是0，1，2，3，4，5…..

在home.wxml里輸入以下代碼：

<view>互聯(lián)網(wǎng)快訊</view>
<view>{{newstitle[0]}}</view>

然后把下面data里的數(shù)據(jù)添加到home.js里面：

  data: {
    newstitle:[
      "瑞幸咖啡：有望在三季度達(dá)到門店運(yùn)營的盈虧平衡點(diǎn)",
      "騰訊：廣告高庫存量還是會(huì)持續(xù)到下一年",
      "上汽集團(tuán)云計(jì)算數(shù)據(jù)中心落戶鄭州，總投資20億元",
      "京東：月收入超2萬元快遞小哥數(shù)量同比增長163%",
      "騰訊：《和平精英》日活躍用戶已超五千萬",
    ],
  }

我們發(fā)現(xiàn)數(shù)組的第一條數(shù)據(jù)就顯示出來了，也就是說{{array[0]}}對(duì)應(yīng)著數(shù)組array的第一項(xiàng)，0就是索引的第一個(gè)位置，也就是我們可以使用數(shù)組名+中括號(hào)[ ]+索引的位置來訪問數(shù)組的某一條數(shù)據(jù)。

小任務(wù)：我們已經(jīng)知道newstitle[0]顯示的是第1條新聞的標(biāo)題，那怎么顯示第5條新聞的標(biāo)題？還記得pages配置項(xiàng)的第一項(xiàng)就是小程序的初始頁面么，你現(xiàn)在知道它是怎么做到的么？

渲染對(duì)象類型的數(shù)據(jù)

對(duì)象（object）是 JavaScript 語言的核心概念，也是最重要的數(shù)據(jù)類型。對(duì)象是一個(gè)包含相關(guān)數(shù)據(jù)和方法的集合（通常由一些變量和函數(shù)組成，我們稱之為對(duì)象里面的屬性和方法）。

有的時(shí)候一個(gè)對(duì)象有多個(gè)屬性，就拿電影來說，就有電影名稱，國家，發(fā)行時(shí)間、票價(jià)、評(píng)價(jià)等等無數(shù)個(gè)屬性，我們?cè)撊绾伟堰@些呈現(xiàn)在頁面上呢？

在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>發(fā)行年份：{{movie.year}}</view>
<view>簡述：{{movie.desc}}</view>

在與之對(duì)應(yīng)的home.js的data里，添加如下數(shù)據(jù)：

data: {
    movie: {
      name: "肖申克的救贖",
      englishname:"The Shawshank Redemption",
      country:"美國",
      year:1994,
      img: "https://img3.doubanio.com/view/photo/s_ratio_poster/public/p480747492.webp",
      desc: "有的人的羽翼是如此光輝，即使世界上最黑暗的牢獄，也無法長久地將他圍困！"
    },
  },

這樣，對(duì)象Object類型的數(shù)據(jù)就被渲染出來啦。也就是在雙大括號(hào){{}}里，輸入變量movie+點(diǎn)+屬性名即可，這就是對(duì)象的點(diǎn)表示法。

復(fù)雜的數(shù)據(jù)嵌套

對(duì)象是可以嵌套的，也就是一個(gè)對(duì)象可以作為另外一個(gè)對(duì)象的值，除了對(duì)象里套對(duì)象，數(shù)組里也可以套對(duì)象，對(duì)象里也可以套數(shù)組。把現(xiàn)實(shí)生活中的事物轉(zhuǎn)化成錯(cuò)綜復(fù)雜的數(shù)據(jù)，是非常重要的數(shù)據(jù)思維。

比如上面我們只列出了豆瓣排名第1的電影，那top5前五的電影呢，它就是一個(gè)列表；每一部電影的工作人員又有導(dǎo)演、編劇、演員，而每一部電影的演員名單又是一個(gè)列表，每個(gè)演員又有復(fù)雜的屬性，比如姓名、出身年月、所獲獎(jiǎng)項(xiàng)（列表）…真的是子子孫孫無窮盡。當(dāng)然簡單的數(shù)據(jù)我們可以寫在data里面，而如此復(fù)雜的數(shù)據(jù)就要使用到數(shù)據(jù)庫啦。

比如我們把下面data里的數(shù)據(jù)添加到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: "風(fēng)華絕代",
        actor: [
          {
            name: "張國榮",
            role: "程蝶衣"
          },
          {
            name: "張豐毅",
            role: "段小樓"
          },
        ]
      },
    ],

那我們應(yīng)該如何把豆瓣電影排名第2的霸王別姬的主演之一的張國榮的名字給渲染到頁面呢？ {{movies[1].actor[0].name}}表示的是電影列表里的第2部電影， {{movies[1].actor[0]}}表示的是第2部電影里的排名第一的主演， {{movies[1].actor[0].name}}則表示的是主演的名字啦。

在home.wxml里輸入以下代碼測(cè)試看一下顯示的是不是張國榮？

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

那如何把第2部電影里的所有數(shù)據(jù)都渲染出來呢？

<image mode="widthFix" src="{{movies[1].img}}" style="width:300rpx"></image>
<view>電影名：{{movies[1].name}}</view>
<view>英文名：{{movies[1].englishname}}</view>
<view>發(fā)行地：{{movies[1].country}}</view>
<view>發(fā)行年份：{{movies[1].year}}</view>
<view>簡述：{{movies[1].desc}}</view>

小任務(wù)：在home.wxml輸入以下代碼會(huì)是什么結(jié)果？為什么不能這樣？

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


以上我們只是輸出了數(shù)組里的單條數(shù)據(jù)，或者對(duì)象嵌套的數(shù)據(jù)里的單條數(shù)據(jù)，如果是商品列表、電影列表、新聞列表這些我們應(yīng)該如何渲染到頁面呢？后面一節(jié)我們將會(huì)介紹列表渲染和條件渲染。