微信小程式開發5 WXML

2021-09-13 16:02:21 字數 1886 閱讀 1573

1.html元素是構建網頁的一種單位,是由html標籤和html屬性組成的,html元素也是網頁中的一種基本單位。html與其他標記語言一樣,html的關鍵,是標籤(tag)。html標籤是html語言中最基本的單位,html標籤是html語言最重要的組成部分。標籤是經過編碼的符號,用於區分和分隔內容的不同部分,並告知瀏覽器它處理的是什麼型別的內容。大多數html標籤的名字都準確地描述了它們的用途和它們所標註的內容的型別,如標題、段落、列表、影象等。

2.html的標籤包括在一對尖括號(<>)之間,以便將它們與普通文字區分開來。第乙個尖括號(<)標明了標籤的開頭,隨後是特定的標籤名(tag name),最後以乙個反向的尖括號(>)結束。例如下面是乙個表示段落的開頭的html標籤:

在html中,標籤名是大小寫不敏感的,就是說不區分大小寫,但在wxml中的屬性是大小寫 敏感的。也就是說 } 和 } 是兩個不同的變數。

3.大多數標籤配對使用:乙個開標籤[(opening tag),也叫開始標籤、起始標籤(start tag)],用於表明乙個內容片段的開始,還有乙個閉標籤[closing tag,也叫結束標籤、結尾標籤、終止(end tag)],用於表明其結束。例如段落的開始用開標籤表示,其結尾標籤用

表示。閉標籤中第乙個尖括號後的斜線(/)將它與開標籤區分開。乙個完整的段落標記如下:

hello, world!

4.沒有被定義的變數的或者是被設定為 undefined 的變數不會被同步到 wxml 中。

5.通過 } 語法可以使得 wxml 擁有動態渲染的能力,除此外還可以在 } 內進行簡單的邏輯運算。

三元運算

算數運算

字串拼接

}

6.wxml 中,使用 wx:if="}" 來判斷是否需要渲染該**塊(條件邏輯): 

true
7.使用 wx:for-item 指定陣列當前元素的變數名,使用 wx:for-index 指定陣列當前下標的變數名

8.並不是乙個元件,它僅僅是乙個包裝元素,不會在頁面中做任何渲染,只接受控制屬性。

因為 wx:if 是乙個控制屬性,需要將它新增到乙個標籤上。如果要一次性判斷多個元件標籤,可以使用乙個 標籤將多個元件包裝起來,並在上邊使用 wx:if 控制屬性。

view1 

view2 

2.類似 block wx:if,也可以將 wx:for 用在標籤上,以渲染乙個包含多節點的結構塊。例如:

}:  } 

9.wxml 提供兩種檔案引用方式import和include。

需要注意的是 import 有作用域的概念,即只會 import 目標檔案中定義的 template,而不會 import 目標檔案中 import 的 template,簡言之就是 import 不具有遞迴的特性。

include 可以將目標檔案中除了外的整個**引入,相當於是拷貝到 include 位置。

10.所有wxml 標籤都支援的屬性稱之為共同屬性

屬性名型別

描述註解

idstring

元件的唯一標識

整個頁面唯一

class

string

元件的樣式類

在對應的 wxss 中定義的樣式類

style

string

元件的內聯樣式

可以動態設定的內聯樣式

hidden

boolean

元件是否顯示

所有元件預設顯示

data-*

any自定義屬性

元件上觸發的事件時,會傳送給事件處理函式

bind*/catch*

eventhandler

元件的事件

微信小程式開發《三》 WXML

wxml weixin markup language 是框架設計的一套標籤語言,結合基礎元件 事件系統,可以構建出頁面的結構。使用模板 使用 is 屬性,宣告需要的使用的模板,然後將模板所需要的 data 傳入,如 view firstname lastname page.js page staf...

微信小程式 框架wxml(六)wxml引用

wxml提供兩種引用方式,import和include 1.import和include的區別 1 import 可以在檔案中使用被import檔案中定義的template include可以在檔案中使用template及template外的內容。2 import有作用域的概念,只能引用直接impo...

微信小程式 四 wxml詳解

wxml中的動態資料均來自對應js檔案中page的data 在js中訪問page的data用this.data 改變data中某個屬性的值用setdata方法 資料繫結使用mustache語法 雙大括號 將變數包起來.可以作用於以下區域 1.作用於內容 page 2.作用於元件屬性 page 3.作...