成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

微信小程序開發(fā)教程(基礎(chǔ)篇)7-數(shù)據(jù)綁定上

I_Am / 2790人閱讀

摘要：在之前的教程中寫到，微信小程序框架將程序分為邏輯層文件和視圖層文件。關(guān)于數(shù)據(jù)綁定的更多講述，敬請(qǐng)期待微信小程序開發(fā)教程基礎(chǔ)篇數(shù)據(jù)綁定下

在之前的教程中寫到，微信小程序框架將程序分為邏輯層(.js文件)和視圖層(.wxml文件)。這是一種常見的UI和邏輯分離的程序設(shè)計(jì)方式，開發(fā)出來的程序更加靈活，易擴(kuò)展。

這種程序設(shè)計(jì)方式通常要解決兩個(gè)問題:

UI層響應(yīng)邏輯層邏輯和數(shù)據(jù)的變化
UI層將用戶的操作反饋到邏輯層

通常來說可以讓UI層和邏輯層互相暴露接口給對(duì)方，不過出于對(duì)靈活性和擴(kuò)展性的考慮，會(huì)引入中間層來進(jìn)行管理，這樣可以避免UI層和邏輯層之間的直接依賴。

微信小程序框架正是基于這種模式進(jìn)行設(shè)計(jì)的，.wxml文件來描述UI層(微信官方名稱為視圖層，教程后續(xù)也將用視圖層來命名)，.js文件來處理邏輯層，而微信的框架則作為中間層管理兩者之間的調(diào)用。

為了更好的幫助開發(fā)者開發(fā)微信小程序，微信定義了一些語(yǔ)法和規(guī)則來幫助開發(fā)者連接視圖層和邏輯層。

數(shù)據(jù)綁定

顯示字符串內(nèi)容

//page.wxml
{{motto}}

//page.js
 data: {
    motto: "Hello World",
  },

通過將"{{motto}}"嵌入視圖層代碼中，界面會(huì)顯示"Hello World"

更改字符串內(nèi)容

setData({
  motto:"Hello My World"
  })

當(dāng)執(zhí)行上述代碼后，界面會(huì)顯示"Hello My World"

上述部分有兩點(diǎn)需要說明:

1: 視圖層嵌入的是{{motto}}而不是{{data.motto}}，微信框架默認(rèn)設(shè)定視圖層綁定的變量定義在Page對(duì)象的data屬性中，也就是說，如果變量需要綁定到視圖層，一定要定義data屬性中

2: 通過調(diào)用Page對(duì)象的setData(Page對(duì)象預(yù)定義)方法，可以更新界面數(shù)據(jù)，但是直接設(shè)置變量是無(wú)效的，因此對(duì)于綁定到視圖層的變量，要永遠(yuǎn)使用setData方法來設(shè)置變量值

顯示圖片
在開發(fā)工具默認(rèn)生成的程序首頁(yè)，顯示了用戶的頭像，相關(guān)代碼如下:

//index.wxml
 

//index.js
onLoad: function () {
    console.log("onLoad")
    var that = **this**
    //調(diào)用應(yīng)用實(shí)例的方法獲取全局?jǐn)?shù)據(jù)
    app.getUserInfo(function(userInfo){
      //更新數(shù)據(jù)
      that.setData({
        userInfo:userInfo
      })
    })
  }

image標(biāo)簽的src屬性綁定了userInfo.avatarUrl變量，并在onLoad方法中通過調(diào)用setData方法設(shè)置userInfo。

屬性綁定

可以將變量綁定到視圖組件的屬性值上(如上面image標(biāo)簽的src屬性)，注意在綁定到屬性時(shí)，需要在外面加入一對(duì)雙引號(hào)。

src="{{userInfo.avatarUrl}}"

除了用于顯示圖片外，屬性綁定還有許多作用。

關(guān)聯(lián)數(shù)據(jù)

假設(shè)要做一個(gè)學(xué)生管理程序，頁(yè)面使用列表來展示用戶數(shù)據(jù)，當(dāng)用戶點(diǎn)擊某一學(xué)生信息時(shí)，進(jìn)入該學(xué)生的詳情頁(yè)頁(yè)面。
當(dāng)獲取到用戶的點(diǎn)擊事件時(shí)，必須要知道點(diǎn)擊的是哪一個(gè)學(xué)生的數(shù)據(jù)，這時(shí)可以將學(xué)生的id綁定到視圖組件的id屬性中來進(jìn)行數(shù)據(jù)關(guān)聯(lián)。

控制視圖的隱藏/顯示

可以將變量綁定到視圖組件的hidden屬性中，通過更改組件hidden屬性的值，可以控制組件是否顯示。

控制屬性
上面說到可以通過屬性綁定的方法來控制視圖組件是否顯示，還可以通過控制屬性來實(shí)現(xiàn)這一功能。

//Page.wxml
 

//Page.js
Page({
  data: {
    condition: true
  }
})

通過綁定數(shù)據(jù)到wx:if屬性，可以控制該組件是否顯示。
框架還提供了wx:elif和wx:else屬性，用法如下:

 1 
 2 
 3

如果想同時(shí)控制多個(gè)視圖組件，可以使用block wx:if


   view1 
   view2

同樣，控制屬性綁定時(shí)也需要添加雙引號(hào)

wx:if vs hidden

一般來說，wx:if 有更高的切換消耗而 hidden 有更高的初始渲染消耗。因此，如果需要頻繁切換的情景下，用 hidden
更好，如果在運(yùn)行時(shí)條件不大可能改變則 wx:if 較好。

關(guān)鍵字
框架提供了兩個(gè)關(guān)鍵字來表示真和假
true：boolean 類型的 true，代表真值。
false： boolean 類型的 false，代表假值。

代碼示例

 
特別注意：不要直接寫 checked="false"，其計(jì)算結(jié)果是一個(gè)字符串，轉(zhuǎn)成 boolean 類型后代表真值。

關(guān)于數(shù)據(jù)綁定的更多講述，敬請(qǐng)期待微信小程序開發(fā)教程(基礎(chǔ)篇)8-數(shù)據(jù)綁定下

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/88065.html

相關(guān)文章

  • 微信小程序開發(fā)教程(基礎(chǔ)篇)3-app.js 解析

    摘要：微信小程序框架提供了一系列來幫助我們進(jìn)行本地?cái)?shù)據(jù)存儲(chǔ)，上面的代碼中使用到了和兩個(gè)更多相關(guān)可以參考這里方法很容易理解，會(huì)執(zhí)行獲取用戶信息的功能。 上一篇教程中寫道，開發(fā)工具會(huì)生成一個(gè)默認(rèn)的程序框架，其中程序的主流程代碼包含在app.js中。默認(rèn)實(shí)現(xiàn)中，該部分功能比較簡(jiǎn)單，不過對(duì)于學(xué)研究小程序開發(fā)還是比較有價(jià)值的。 由于代碼行數(shù)不多，下面一次性貼出來后進(jìn)行講解 //app.js App({...

    lemon 評(píng)論0 收藏0

  • 微信小程序開發(fā)教程(基礎(chǔ)篇)5-index 頁(yè)面解析

    摘要：上一篇教程談了些和微信小程序開發(fā)本身無(wú)關(guān)的技術(shù)問題，現(xiàn)在回到主題。這邊教程主要對(duì)默認(rèn)生成的頁(yè)面進(jìn)行講解。而的顯示則是由屬性直接指定。在該例子中，當(dāng)用戶點(diǎn)擊用戶頭像和昵稱的視圖區(qū)域時(shí)，程序便會(huì)顯示頁(yè)面。 上一篇教程談了些和微信小程序開發(fā)本身無(wú)關(guān)的技術(shù)問題，現(xiàn)在回到主題。 這邊教程主要對(duì)默認(rèn)生成的index 頁(yè)面進(jìn)行講解。在之前的教程中有寫道，每一個(gè)頁(yè)面都包含.js(處理邏輯)，.wxml...

    GT 評(píng)論0 收藏0

  • 微信小程序開發(fā)教程(基礎(chǔ)篇)6-logs頁(yè)面解析

    摘要：到此為止，默認(rèn)生成程序的解析部分就結(jié)束了。這個(gè)解析過程是為了對(duì)微信小程序有個(gè)總體上的理解，所以很多地方并沒有深入。在后面的教程中，我會(huì)繼續(xù)講解微信小程序開發(fā)的各個(gè)方面。 上一篇教程中對(duì)index頁(yè)面進(jìn)行了解析，這一篇來解析下logs頁(yè)面 老規(guī)矩先上圖 showImg(https://segmentfault.com/img/remote/1460000007613022?w=378&h...

    shiguibiao 評(píng)論0 收藏0

  • 微信小程序開發(fā)教程(基礎(chǔ)篇)2-微信小程序結(jié)構(gòu)概覽

    摘要：在新建一個(gè)項(xiàng)目后，微信小程序會(huì)生成一個(gè)默認(rèn)的程序框架，后續(xù)程序的開發(fā)工作都在這個(gè)框架上進(jìn)行。微信小程序的開發(fā)模式確實(shí)和開發(fā)很相似。通常一個(gè)完整的微信小程序包含上面兩部分，當(dāng)然我們也可以定義自己的目錄用于存放公共代碼和程序需要的其它文件。 在上一篇教程的最后，我們生成了一個(gè)類似Hello World的小程序，這個(gè)過程中沒有編寫任何一行代碼。在新建一個(gè)項(xiàng)目后，微信小程序會(huì)生成一個(gè)默認(rèn)的程序...

    muddyway 評(píng)論0 收藏0

  • 微信小程序開發(fā)教程(基礎(chǔ)篇)8-數(shù)據(jù)綁定下

    摘要：教程接上篇，當(dāng)需要展示一組數(shù)據(jù)時(shí)，可以使用其中是當(dāng)前數(shù)據(jù)索引的默認(rèn)變量名，是當(dāng)前數(shù)據(jù)項(xiàng)的默認(rèn)變量名。保留關(guān)鍵字代表在循環(huán)中的本身，這種表示需要本身是一個(gè)唯一的字符串或者數(shù)字，上面引用自微信官方教程。 教程接上篇，當(dāng)需要展示一組數(shù)據(jù)時(shí)，可以使用wx:for //.wxml {{index}}: {{item.message}} //.js age({ data: { ...

    gaara 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<