建站
咨詢
售后
建站咨詢
新聞中心
今天我們來了解一下數(shù)據(jù)綁定，什么是數(shù)據(jù)綁定呢？就是把WXML 中的一些動態(tài)數(shù)據(jù)分離出來放到對應(yīng)的js文件的 Page 的 data里。
公司主營業(yè)務(wù)：成都網(wǎng)站制作、網(wǎng)站建設(shè)、外貿(mào)網(wǎng)站建設(shè)、移動網(wǎng)站開發(fā)等業(yè)務(wù)。幫助企業(yè)客戶真正實(shí)現(xiàn)互聯(lián)網(wǎng)宣傳，提高企業(yè)的競爭能力。成都創(chuàng)新互聯(lián)公司是一支青春激揚(yáng)、勤奮敬業(yè)、活力青春激揚(yáng)、勤奮敬業(yè)、活力澎湃、和諧高效的團(tuán)隊(duì)。公司秉承以“開放、自由、嚴(yán)謹(jǐn)、自律”為核心的企業(yè)文化，感謝他們對我們的高要求，感謝他們從不同領(lǐng)域給我們帶來的挑戰(zhàn)，讓我們激情的團(tuán)隊(duì)有機(jī)會用頭腦與智慧不斷的給客戶帶來驚喜。成都創(chuàng)新互聯(lián)公司推出白堿灘免費(fèi)做網(wǎng)站回饋大家。
數(shù)據(jù)綁定這個概念其實(shí)很多學(xué)過網(wǎng)頁開發(fā)的朋友也會比較困惑。大家可以不必執(zhí)著于這個深奧的概念，而是先來動手做一下了解是一個什么效果。在潛移默化里，你會get到前端里一個非常了不得的技術(shù)知識哦~
把數(shù)據(jù)分離出來
我們可以在小程序的頁面文件wxml里寫這樣一段代碼，比如我們可以寫在home.wxml里面，
張明，您已登錄，歡迎 這樣的場景我們經(jīng)常遇到，不同的人使用一款A(yù)pp或者H5的時候，頁面會根據(jù)不同的登錄人不同的用戶信息。
我們可以這樣把wxml的代碼修改成這樣：
{{username}}，您已登錄，歡迎 然后再在home.js的data里面寫這樣一段代碼，最終呈現(xiàn)的結(jié)果是：
data: {
username:"張明"
},在模擬器我們看到呈現(xiàn)的結(jié)果和之前一樣，我們可以data里面的”張明”修改成任何一個人的名字，前端的頁面也會相應(yīng)有所改變，如果通過函數(shù)的方式根據(jù)不同的用戶修改username的值，這樣不同的登錄的人登錄就會顯示相應(yīng)的用戶名。
大家再回頭來回顧一下json語法，這里的username是字段名稱，也就是變量，冒號:后面的是值。在wxml文件里，只需要用雙大括號{{}}把變量名包起來，就能把data里面的變量給渲染出來。
數(shù)據(jù)類型
通過前面的案例我們了解到WXML 中的動態(tài)數(shù)據(jù)均來自對應(yīng) Page 的 data。 data 是小程序的頁面第一次渲染使用的初始數(shù)據(jù)。小程序的頁面加載時， data 將會以 JSON字符串的形式由邏輯層傳至渲染層，因此 data中的數(shù)據(jù)必須是可以轉(zhuǎn)成 JSON的類型：字符串String，數(shù)字Number，布爾值Boolean，對象Object，數(shù)組Array。
- 字符串String，用于存儲和處理文本，可以結(jié)合Excel單元格格式里的文本格式來理解；
- 數(shù)字Number，這個很好理解，比如233這個數(shù)，它的數(shù)字格式和文本格式是有很大不同的，學(xué)Excel一定不會陌生；
- 布爾值Boolean，就是true和false，雖然只有兩個值，但是它代表著兩種選擇，兩種不同的條件，兩種不同的結(jié)果；
- 對象Object，結(jié)合之前所學(xué)，我們再來回顧一下：對象由大括號{}分隔，在大括號{}內(nèi)部，對象的屬性以名稱和值對的形式 name : value來定義，屬性由逗號,分隔
-
數(shù)組Array，結(jié)合之前所學(xué)，我們再來回顧一下：數(shù)組由中括號[ ]來分割，有點(diǎn)類似于列表；
數(shù)據(jù)類型在編程語言里是一個非常重要的概念，大家可以先只需要知道是啥就可以，不必強(qiáng)行理解哦。就像我們把不同的人分為男、女、深圳人、程序員等不同類型一樣，數(shù)據(jù)類型就是一種對不同類型的數(shù)據(jù)進(jìn)行了一個分類而已，只是為了區(qū)分它們才有了不同的格式規(guī)范它們。
組件屬性的渲染
通過數(shù)據(jù)綁定，我們還可以把 style、class 、id等屬性分離出來來控制組件的樣式等信息。
使用開發(fā)者工具在home.wxml里輸入以下內(nèi)容：
需要按照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里輸入以下代碼：
兩個數(shù)字Number相加：{{love1+forever1}}
兩個字符串String相加：{{love2+forever2}} 然后把下面data里的數(shù)據(jù)添加到home.js里面:
data: {
love1:520,
love2:"520",
forever1:1314,
forever2:"1314",
}在這里我們可以看到使用””雙引號包住的是字符串格式，而沒有使用雙引號的是數(shù)字格式。
可以看到數(shù)字格式的數(shù)字相加和四則運(yùn)算的加法是一致的，而字符串與字符串的相加是拼接。+ 加號在JavaScript里既可以扮演四則運(yùn)算符的角色，也可以進(jìn)行拼接，取決于數(shù)據(jù)的格式。
小任務(wù)：數(shù)字格式的520和字符串格式的520，它們在頁面的顯示上雖然是一樣的，但是字符串格式可以拼接，而數(shù)字格式的數(shù)字，則方便以后我們進(jìn)行數(shù)字大小的比較。請問出身年份是應(yīng)該使用數(shù)字格式，還是字符串格式？身份證號碼呢？
渲染數(shù)組里的單條數(shù)據(jù)
在前面我們就已經(jīng)接觸過數(shù)組，比如pages配置項(xiàng)就是小程序里所有頁面的一個列表。數(shù)組Array是值的有序集合，每個值叫做一個元素，而每個元素在數(shù)組中有一個位置，以數(shù)字表示，稱為索引。這個索引是從0開始的非負(fù)整數(shù)，也就是0，1，2，3，4，5…..
在home.wxml里輸入以下代碼：
互聯(lián)網(wǎng)快訊
{{newstitle[0]}} 然后把下面data里的數(shù)據(jù)添加到home.js里面：
data: {
newstitle:[
"瑞幸咖啡：有望在三季度達(dá)到門店運(yùn)營的盈虧平衡點(diǎn)",
"騰訊：廣告高庫存量還是會持續(xù)到下一年",
"上汽集團(tuán)云計算數(shù)據(jù)中心落戶鄭州，總投資20億元",
"京東：月收入超2萬元快遞小哥數(shù)量同比增長163%",
"騰訊：《和平精英》日活躍用戶已超五千萬",
],
}我們發(fā)現(xiàn)數(shù)組的第一條數(shù)據(jù)就顯示出來了，也就是說{{array[0]}}對應(yīng)著數(shù)組array的第一項(xiàng)，0就是索引的第一個位置，也就是我們可以使用數(shù)組名+中括號[ ]+索引的位置來訪問數(shù)組的某一條數(shù)據(jù)。
小任務(wù)：我們已經(jīng)知道newstitle[0]顯示的是第1條新聞的標(biāo)題，那怎么顯示第5條新聞的標(biāo)題？還記得pages配置項(xiàng)的第一項(xiàng)就是小程序的初始頁面么，你現(xiàn)在知道它是怎么做到的么？
渲染對象類型的數(shù)據(jù)
對象（object）是 JavaScript 語言的核心概念，也是最重要的數(shù)據(jù)類型。對象是一個包含相關(guān)數(shù)據(jù)和方法的集合（通常由一些變量和函數(shù)組成，我們稱之為對象里面的屬性和方法）。
有的時候一個對象有多個屬性，就拿電影來說，就有電影名稱，國家，發(fā)行時間、票價、評價等等無數(shù)個屬性，我們該如何把這些呈現(xiàn)在頁面上呢？
在home.wxml文件里輸入以下代碼：
電影名：{{movie.name}}
英文名：{{movie.englishname}}
國家：{{movie.country}}
發(fā)行年份：{{movie.year}}
簡述：{{movie.desc}} 在與之對應(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: "有的人的羽翼是如此光輝，即使世界上最黑暗的牢獄，也無法長久地將他圍困！"
},
},這樣，對象Object類型的數(shù)據(jù)就被渲染出來啦。也就是在雙大括號{{}}里，輸入變量movie+點(diǎn)+屬性名即可，這就是對象的點(diǎn)表示法。
復(fù)雜的數(shù)據(jù)嵌套
對象是可以嵌套的，也就是一個對象可以作為另外一個對象的值，除了對象里套對象，數(shù)組里也可以套對象，對象里也可以套數(shù)組。把現(xiàn)實(shí)生活中的事物轉(zhuǎn)化成錯綜復(fù)雜的數(shù)據(jù)，是非常重要的數(shù)據(jù)思維。
比如上面我們只列出了豆瓣排名第1的電影，那top5前五的電影呢，它就是一個列表；每一部電影的工作人員又有導(dǎo)演、編劇、演員，而每一部電影的演員名單又是一個列表，每個演員又有復(fù)雜的屬性，比如姓名、出身年月、所獲獎項(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里輸入以下代碼測試看一下顯示的是不是張國榮？
豆瓣電影排名第2、最重要的主演演員名：
{{movies[1].actor[0].name}} 那如何把第2部電影里的所有數(shù)據(jù)都渲染出來呢？
電影名：{{movies[1].name}}
英文名：{{movies[1].englishname}}
發(fā)行地：{{movies[1].country}}
發(fā)行年份：{{movies[1].year}}
簡述：{{movies[1].desc}} 小任務(wù)：在home.wxml輸入以下代碼會是什么結(jié)果？為什么不能這樣？
以上我們只是輸出了數(shù)組里的單條數(shù)據(jù)，或者對象嵌套的數(shù)據(jù)里的單條數(shù)據(jù)，如果是商品列表、電影列表、新聞列表這些我們應(yīng)該如何渲染到頁面呢？后面一節(jié)我們將會介紹列表渲染和條件渲染。
文章名稱：創(chuàng)新互聯(lián)小程序云教程：云開發(fā)數(shù)據(jù)綁定
文章地址：http://www.dlmjj.cn/article/dhhdseh.html
