界面結(jié)構(gòu)wxmL比較容易理解幸冻,主要是由八大類基礎(chǔ)組件構(gòu)成:
一、視圖容器(View Container)
二庞溜、基礎(chǔ)內(nèi)容(Basic Content)
三流码、表單組件(Form)
四、操作反饋組件(Interaction)
五漫试、導(dǎo)航(Navigation)
六驾荣、多媒體(Media)
七、地圖(Map)
八审编、畫布(Canvas)
常用的:view歧匈、text、navigator伤溉、template妻率、block宫静、swiper...
view相當(dāng)于div元素;
text用于字體元素伏伯,如p、span等说搅;
navigator官方文檔定義為應(yīng)用內(nèi)跳轉(zhuǎn)弄唧,即有時(shí)候我們需要通過循環(huán)遍歷出來的塊元素霍衫,當(dāng)點(diǎn)擊這個(gè)塊元素會跳轉(zhuǎn)到另一個(gè)頁面時(shí),我們就可以用navigator澄干。例如我在產(chǎn)品的列表頁麸俘,遍歷出來的數(shù)據(jù),當(dāng)我點(diǎn)擊其中一個(gè)數(shù)據(jù)从媚,它會通過綁定的id跳轉(zhuǎn)到產(chǎn)品詳情頁;
(navigator類似于a標(biāo)簽炭懊,但是它默認(rèn)是塊元素)
<navigaro url"../list/list?id={{id}}"> ? ?</navigator>
template用于分裝公用組件拂檩,可以通過import導(dǎo)入和它的屬性name引用組件;
(先通過import引用template模板父阻,然后通過is屬性綁定加矛,最后將模板所需要的數(shù)據(jù)通過data傳入)
block和template配合使用煤篙,例如我們可以在template的外層包含一個(gè)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ū)別!重要的事情說三遍>还巍Mス濉抢埋!
注:理論上,使用html標(biāo)簽是可以的穷吮,但它們都是inline屬性捡鱼,需要自行設(shè)置display驾诈;因此推薦使用微信小程序封裝好的組件溶浴;