wxml中的動態資料均來自對應js檔案中page的data
在js中訪問page的data用this.data 改變data中某個屬性的值用setdata方法
資料繫結使用mustache語法(雙大括號)將變數包起來.可以作用於以下區域:
1.作用於內容
}page(
})
page(
})
page(
})
1.三元運算
true :false}}" >hidden} +} +d
page(
})
5}}">}
page(
})
}
page(
})
page(
})
page(,
obj2:}})
wx:if
在框架中,我們用
wx:if="}">true也可以用wx:elif和wx:else來新增乙個else塊
5}}">1
2}}">2
3
因為wx:if 是乙個控制屬性,需要將她新增到乙個標籤上,但是如果我們想一次判斷多個元件標籤,我們可以使用乙個標籤將多個元件包裝起來,並在上班使用wx:if 控制屬性
view1
view2
wx:for
在元件中使用wx:for 控制屬性繫結乙個陣列,即可使用陣列中各項的資料重複渲染該元件
預設陣列的當前項的下標變數名預設為index,陣列當前項的變數名預設為item
}:}
page(,]
}})
使用wx:for-index可以指定陣列當前下標的變數名
wxml提供模板template 可以在模板中定義**片段,然後在不同的地方呼叫
1.定義模板
使用name屬性,作為模板的名字,然後在內定義**片段
}:}
time:}
使用is屬性,宣告需要的使用的模板,然後將模板所需要的data傳入
page(
}})
繫結事件: 以bind或catch開頭,然後跟上事件的型別,如bindtap catchtouchstart
bind事件繫結不會阻止冒泡事件向上冒泡,catch事件繫結可以阻止冒泡事件向上冒泡
type 通用事件型別
timestamp 該頁面開啟到觸發事件所經歷的毫秒數
target 觸發事件的源元件
currenttarge 事件繫結的當前元件
dataset 在元件中可以定義資料,這些資料將會通過事件傳遞給service 書寫方式:以data-開頭,多個單詞由連字元-鏈結, 不能有大寫(大寫會自動轉成小寫),如data_element-type,最終在event.target.dataset中會將字元轉成駝峰elementtype
detail 特殊事件所攜帶的資料,如表單元件的提交事件會攜帶使用者的輸入,**的錯誤事件會攜帶錯誤資訊
冒泡事件:當乙個元件上的事件被觸發後,該事件會向父節點傳遞
非冒泡事件:當乙個元件上的事件被觸發後,該事件不會向父節點傳遞
除上表之外的其他元件自定義事件都是非冒泡事件,如的submit事件,的input事件
wxml提供兩種檔案引用方式import 和include
import: 可以在該檔案中使用目標檔案定義的template
include:可以將目標檔案除了的整個**引入,相當於拷貝到include位置
微信小程式 框架wxml（六）wxml引用
wxml提供兩種引用方式，import和include 1.import和include的區別 1 import 可以在檔案中使用被import檔案中定義的template include可以在檔案中使用template及template外的內容。2 import有作用域的概念，只能引用直接impo...
微信小程式開發《三》 WXML
wxml weixin markup language 是框架設計的一套標籤語言，結合基礎元件 事件系統，可以構建出頁面的結構。使用模板 使用 is 屬性，宣告需要的使用的模板，然後將模板所需要的 data 傳入，如 view firstname lastname page.js page staf...
微信小程式 wxml列表渲染
列表渲染存在的意義 以電商為例，我們希望渲染5個商品，而又希望容易改變，我們就要在wxml中動態新增。page 上面在乙個非顯示元件block中，我們渲染五個有內容的view wx for是迴圈陣列，wx for item即給列表賦別名 子迴圈 view wx for view wx for wx ...