小程序標簽(組件)
小程序會自動生成一個page根節(jié)點將所有內(nèi)容包裹。
view
相當于div標簽。
-view
定義一塊區(qū)域可滾動。-x、-y定義可以滾動的方向,注意縱向滾動時需要設(shè)定容器高度,想要全屏的滾動時設(shè)定100%高度無效,因為最外層有一個page根節(jié)點,需要同時給page設(shè)定100%高度才會生效。-back-to-top屬性使點擊標題回到頂部。滾動到頂部/左邊觸發(fā)事件,滾動到底部/右邊觸發(fā)事件。
text
理解為span標簽。屬性定義文本是否可選,默認為false。
block
沒有顯示意義標簽,相當于一個虛擬的父節(jié)點標簽。
可以在模板中定義代碼片段,然后在不同的地方調(diào)用.,is屬性為使用模板的名字。注意data屬性要傳一個解構(gòu)的對象,該對象中的屬性作為數(shù)據(jù)使用。
//定義模板
{{index}}: {{msg}}
Time: {{time}}
//使用模板

Page({
data: {
item: {
index: 0,
msg: 'this is a template',
time: '2016-09-15'
}
}
})
//顯示
0: this is a template
Time:2016-09-15}
用于在其他文件中引入模板使用。注意沒有繼承性。
例如下面C B,B A,在 C 中可以使用 B 定義的,在 B 中可以使用 A 定義的,但是 C 不能使用 A 定義的。

A template
B template
可以將目標文件除了外的整個代碼引入,相當于是拷貝到位置(單標簽)。
input
輸入框,屬性為占位提示內(nèi)容,value屬性為默認輸入框中的值,屬性定義為密碼框;type屬性定義輸入內(nèi)容,有text、、digit(文本、數(shù)字、小數(shù));綁定鍵盤輸入時觸發(fā)事件,event. = {value, , }, 為鍵值,2.1.0 起支持,處理函數(shù)可以直接 一個字符串,將替換輸入框的內(nèi)容;-type屬性設(shè)置輸入時彈出鍵盤的右下角按鈕的文字,僅在type='text'時生效,有send、、next、go、done(發(fā)送、搜索、下一個、前往、完成);
跳轉(zhuǎn)標簽,相當于a標簽,用于跳轉(zhuǎn)頁面不能跳轉(zhuǎn)網(wǎng)頁,url屬性定義小程序內(nèi)的頁面路徑或者其它小程序的路徑;屬性定義在哪個目標上跳轉(zhuǎn),默認self為當前小程序,為其它小程序;open-type屬性為打開方式,默認為新頁面入棧,為替換棧頂?shù)捻撁妫ù藭r沒有回退功能),可以跳轉(zhuǎn)到app.json中中的用到的頁面(默認是不能跳轉(zhuǎn)的);
輪播圖容器,包裹-item標簽,-item為每個輪播的項目。屬性設(shè)置自動播放,屬性設(shè)置自動輪播的時間間隔(單位為ms),-dots屬性設(shè)置輪播的點。為自動輪播時滑動到下一張的時間。為當前顯示圖片序號。-itiem-id屬性定義初始顯示的圖片的序號(該序號為-item中item-id屬性值)。
-item
輪播項目。
audio
音頻播放標簽(單標簽),src為播放音頻的資源地址,loop屬性設(shè)置是否循環(huán)播放,屬性設(shè)置是否看見暫??丶瑢傩詾椴シ牌鞒跏硷@示的圖片,name屬性為歌名,屬性為作者名,屬性為播放錯誤觸發(fā)事件,為播放觸發(fā)事件 ,id屬性綁定的值可以通過wx.(id值)拿到音頻節(jié)點,上面有play、pause方法控制播放與暫停,seek()控制播放進度,單位為秒。
最新采用wx.ext()獲取音頻空間對象,該對象上通過src設(shè)置播放音頻地址,設(shè)置自動播放,()開始播放,要接收一個回調(diào)函數(shù)作為參數(shù),()為播放發(fā)送錯誤時執(zhí)行傳入的回調(diào)函數(shù)。
video
視頻播放標簽,src屬性指定視頻播放地址;-time指定初始播放位置;為進度條;loop為是循環(huán)播放;為自動播放;muted為靜音;danmu-btn為顯示彈幕按鈕;danmu-list為一個數(shù)組,數(shù)組內(nèi)每個對象為一條彈幕(例如[{text:'這是彈幕',color:'red',time:1}]),表示在1s的時候彈幕按鈕打開的話顯示一條紅色的彈幕),-danmu為初始化時打開彈幕按鈕;id屬性用于通過wx.(id)獲取video節(jié)點。video節(jié)點上有(obj)方法用于發(fā)送彈幕,obj為彈幕對象例如{text:'這是彈幕',color:'red'}。
-area
搭配-view標簽(可移動內(nèi)容),定義可移動區(qū)域。scale-area屬性定義可以雙指放大可移動區(qū)域。
-view
可移動內(nèi)容,在-view區(qū)域移動。屬性定義可移動方向有all、、、none;out-of-屬性定義可以拖動超出可移動區(qū)域;scale定義可以雙指放大可移動內(nèi)容;輸定定義慣性效果。
cover-view
覆蓋在原生組件之上的視圖,常用于覆蓋在video、、等媒體組件上。
cover-image
覆蓋在原生組件之上的圖片視圖,常用于覆蓋在video、、等媒體組件上。
rich-text
富文本,用于顯示html5中的標簽div、a、span等。注意是通過屬性確定顯示內(nèi)容。
node屬性為html內(nèi)容的字符串或者數(shù)組nodes(虛擬節(jié)點的對象形式),會將node 屬性中的內(nèi)容以html形式渲染。
進度條標簽。屬性確定進度條百分比;show-info屬性在進度條右側(cè)顯示百分比;-width屬性為進度條線的寬度;color為進度條顏色;屬性為有加載過程。
form
表單標簽,綁定提交事件,點擊嵌套在form標簽帶有屬性form-type=‘’的標簽觸發(fā);綁定重置事件(不需要手動寫重置也會重置form表單中的內(nèi)容),點擊嵌套在form標簽帶有屬性form-type=‘reset’的標簽觸發(fā)。
按鈕,type定義樣式,size大小,color定義顏色;form-type屬性對應(yīng)form中的提交或重置事件。
label
用來改進表單組件的可用性。
使用 for 屬性找到對應(yīng)的id,或者將控件放在該標簽下,當點擊時,就會觸發(fā)對應(yīng)的控件。 for優(yōu)先級高于內(nèi)部控件,內(nèi)部有多個控件的時候默認觸發(fā)第一個控件。 目前可以綁定的控件有:,,radio,,input。
單選框,value對應(yīng)綁定的實際值。
-group
多項選擇器,內(nèi)部由多個組成。綁定事件為-group中選中項發(fā)生改變時觸發(fā) 事件, = {value:[選中的 的value的數(shù)組]}。
radio
圓形單選按鈕。為是否被選中;為是否禁用;value為實際的值。
radio-group
單項選擇器,內(nèi)部由多個radio組成。為radio-group中選中項發(fā)生改變時觸發(fā)事件, = {value:[選中的 radio 的value的數(shù)組]}。
從底部彈起的滾動選擇器。mode為選擇器的模式,有、、time、date、(分別為普通、多列、事件、日期、省市區(qū)選擇器,其中默認為普通);range是選擇器選擇的內(nèi)容為一個數(shù)組(多列選擇時該數(shù)組中包含多個數(shù)組,每一列對應(yīng)一個數(shù)組);為選擇后觸發(fā)事件。
滑動選擇器。min為最小值;max為最大值;step為每次滑動最小的步長(取值必須大于 0,且(max - min)/step為整數(shù));value為實際的值。
開關(guān),type為時為單選框;為開關(guān)點擊時觸發(fā)事件。
多行輸入框。
icon
有type、size、color屬性video標簽 隱藏進度條,type定義圖標的圖片,size單位為像素(傳入數(shù)字),color為圖標顏色。:-block。
相機標簽。-屬性front定義相機前置video標簽 隱藏進度條,back為后置;flash屬性定義閃光燈,默認auto,off為關(guān);ctx=wx.()獲得相機上下文;ctx.({:'high',:(res)=>{}})進行拍照,傳入一個對象進行設(shè)置拍照精度,成功后的回調(diào)接收一個參數(shù)res.上為拍照的圖片存儲的路徑。
其它標簽
視圖容器 | 微信開放文檔
原生組件
教程 | 《小程序開發(fā)指南》
在內(nèi)置組件中,有一些組件較為特殊,它們并不完全在的渲染體系下,而是由客戶端原生參與組件的渲染,這類組件我們稱為“原生組件”,這也是小程序技術(shù)的一個應(yīng)用。
原生組件有:、、input、live-、live-、map、、video。
使用限制 原生組件的層級是最高層,其他組件無法通過z-indx來覆蓋。原生組件可以覆蓋原生組件。部分樣式無法支持原生組件CSS動畫、:fixed。在IOS下原生組件不支持觸摸事件。
教程 | 《小程序開發(fā)指南》
語法 數(shù)據(jù)綁定
和vue中的數(shù)據(jù)綁定使用相同,通過data屬性并在wxml中通過雙大括號{{}}使用。注意類型的一定要放在雙大括號中,不然默認為字符串。