界面結(jié)構(gòu)wxmL比較容易理解,主要是由八大類基礎組件構(gòu)成:
一、視圖容器(View Container)
二、基礎內(nèi)容(Basic Content)
三、表單組件(Form)
四、操作反饋組件(Interaction)
五、導航(Navigation)
六、多媒體(Media)
七、地圖(Map)
八、畫布(Canvas)
常用的:view、text、navigator、template、block、swiper...
view相當于div元素;
text用于字體元素,如p、span等;
navigator官方文檔定義為應用內(nèi)跳轉(zhuǎn),即有時候我們需要通過循環(huán)遍歷出來的塊元素,當點擊這個塊元素會跳轉(zhuǎn)到另一個頁面時,我們就可以用navigator。例如我在產(chǎn)品的列表頁,遍歷出來的數(shù)據(jù),當我點擊其中一個數(shù)據(jù),它會通過綁定的id跳轉(zhuǎn)到產(chǎn)品詳情頁;
(navigator類似于a標簽,但是它默認是塊元素)
<navigaro url"../list/list?id={{id}}"> ? ?</navigator>
template用于分裝公用組件,可以通過import導入和它的屬性name引用組件;
(先通過import引用template模板,然后通過is屬性綁定,最后將模板所需要的數(shù)據(jù)通過data傳入)
block和template配合使用,例如我們可以在template的外層包含一個block塊元素,并在block元素使用for循環(huán)方法遍歷template組件;
<import src="../../template/productCard/productCard.wxml"/>
<block wx:for="{{productNewList}}"><template is="productCard" data="{{...item}}" /></block>
區(qū)別!區(qū)別!區(qū)別!重要的事情說三遍?。?!
注:理論上,使用html標簽是可以的,但它們都是inline屬性,需要自行設置display;因此推薦使用微信小程序封裝好的組件;