小聲討論微信小程序中的WXML文件(雜談語法)

花弟弟的瞎理解:

微信出了一個小程序後退出WXML標籤語言,結合組件,還有事件就能構建出頁面的邏輯結構,分別有數據綁定,列表渲染,條件渲染,模板的引用,WXML語法的佈局方式根HTML是一樣的,一些模板語法和Django、Vue的模板語法很相似,另外就是渲染就類似輸出,別像我模糊了好久,大家感興趣的話一定要去看微信的公共官方文檔。

瞎搞:

1).變量渲染(輸出):

  • 必須使用花括號{{}}包括
  • 花括號{{}}可以做簡單的四則運算及判斷等
  • 需要從js文件傳來的變量就必須花括號

2).數據綁定:

微信WXML中的動態數據是來自Page頁面中的js文件date域裏面:

3).列表渲染:(數組集合)

注意:

  • item好比如元素所對應的指針可以自己重命名
  • 一定要定義很重要的動態數據屬性key

3.列表渲染中item與index(索引值)和key的理解:

<view wx:for="{{[1,2,3,4]}}" wx:for-index='idx' wx:for-item="value" wx:key="this">

    {{idx}}/{{value}}

</view>

注意:

  • item是集合中的元素的指針
  • index是集合中元素對應的下標
  • 多重循環要自定義名稱(如上)

Key:如果列表中項目的位置會動態改變或者有新的項目添加到列表中,讓原來的人記住自己的狀態的參數,它就相當於數據庫領域中的主碼,唯一確定一行的屬性,當數據動態的更新之後,若存在key時,原有的對象只是調換順序,若不存在key時,則這些對象會重新的建立,打個比方,一個房間裏有排隊着幾個人,手裏拿着燈,第一個人手裏的燈是亮的,當有key時有人加入房間裏來,燈亮的還是剛剛那個人,當沒有key時,就是剛剛進來排第一個的燈會亮,也就是說有key時,每個對象就會記得自己的狀態。

4.模板的定義引用:

  • 模板的定義
<template name="message">//模板的名稱

    <view class="messsge-group">//class就相當於這個對象的名稱

        <text class="content">滿目山河空望也 不如憐取眼前人</text>

        <text class="person">-東邪西毒</text>

    </view>

</template>
  • 模板的引用
<import src="../templates/templates.wxml"/>

<template is ="message"></template>

注意:其中 ../ 代表返回所在地址的上一級,../../是上上一級。

話癆:

今天下好大的雨,躲在家裏默默的總結最近學過的東西,同齡人幾乎都去找兼職了,就我回家呆在家了,畢竟基礎太差了,我太難了。

花哥哥嚴肅說:

所學的知識均從課本,課外讀物,網上收集資料,如果哪有侵權惹到您不開心丫,此外還有我也是小白,如果哪有認識不對的地方還請您抽我一耳光說我哪錯了,我一定會感謝,聯繫企鵝號:184820911,有哪不明白或沒事都可以找我,陪聊,陪吃不陪睡。

 

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章