小程序開發學習記錄(四)

這節,咱們來說一下小程序的開發語言--WXML。vue

用過vue等開發框架或者使用過雙花括號的同窗對於本節的內容應該會比較熟悉。小程序

WXML跟vue語法十分的類似,有相似於vue的數據綁定,v-for、v-if、模板(template)的結構。數組

1.數據綁定:框架

wxml:this

<view>{{message}}</view>

page.js:spa

Page({
  data: {
    message: 'Hello xinsira!'
  }
})

這裏我要說起一下,小程序開發沒有雙向數據綁定,修改data中message是須要使用如下的語法才能修改(其餘知識會在事件中詳細講解),你們能夠對比下和vue的區別:code

this.setData({
          message :'我要關注xinsir'
        })

2.列表渲染:xml

wxml:blog

<view wx:for="{{array}}">{{item}}</view>

page.js:事件

Page({
  data: {
    array: [1, 2, 3, 4, 5]
  }
})

在組件上使用 wx:for 控制屬性綁定一個數組,便可使用數組中各項的數據重複渲染該組件。默認數組的當前項的下標變量名默認爲 index,數組當前項的變量名默認爲 item。固然也可使用 wx:for-item 能夠指定數組當前元素的變量名,使用 wx:for-index 能夠指定數組當前下標的變量名。

<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName">
  {{idx}}: {{itemName.message}}
</view>

!!!注意:當 wx:for 的值爲字符串時,會將字符串解析成字符串數組

<view wx:for="array">
  {{item}}
</view>

獲得的結果就是:array

3.條件渲染:

wxml:

<view wx:if="{{view == 'xinsir'}}">關注xinsira</view>
<view wx:elif="{{view == 'APP'}}">APP</view>
<view wx:else="{{view == 'MINA'}}">MINA</view>

page.js:

Page({
  data: {
    view: 'xinsir'
  }
})

注意:關鍵字也須要在雙花括號內,例如true/false,不要直接寫 wx:if="false",其計算結果是一個字符串,轉成 boolean 類型後表明真值。

wx:if vs hidden:

官方給出的解釋:

由於 wx:if 之中的模板也可能包含數據綁定,因此當 wx:if 的條件值切換時,框架有一個局部渲染的過程,由於它會確保條件塊在切換時銷燬或從新渲染。

同時 wx:if 也是惰性的,若是在初始渲染條件爲 false,框架什麼也不作,在條件第一次變成真的時候纔開始局部渲染。

相比之下,hidden 就簡單的多,組件始終會被渲染,只是簡單的控制顯示與隱藏。

通常來講,wx:if 有更高的切換消耗而 hidden 有更高的初始渲染消耗。所以,若是須要頻繁切換的情景下,用 hidden 更好,若是在運行時條件不大可能改變則 wx:if 較好。

我給的解釋就是,hidden就像v-show同樣。

4.模板:

WXML提供模板(template),能夠在模板中定義代碼片斷,而後在不一樣的地方調用。

 

4.1定義模板:

 

使用 name 屬性,做爲模板的名字。而後在<template/>內定義代碼片斷

<!--
  index: int
  msg: string
  time: string
-->
<template name="msgItem">
  <view>
    <text>{{index}}: {{msg}}</text>
    <text>Time: {{time}}</text>
  </view>
</template>

 

4.2使用模板

使用 is 屬性,聲明須要的使用的模板,而後將模板所須要的 data 傳入,如:

wxml:

<template is="msgItem" data="{{...item}}" />

page.js:

Page({
  data: {
    item: {
      index: 0,
      msg: 'this is a template',
      time: '2016-09-15'
    }
  }
})

 

 

以上就是本節分享的內容,若是有建議或者意見的同窗請留言~

相關文章
相關標籤/搜索