模板
- 可以在模板中定義代碼片段椭蹄，然后在不同的地方調(diào)用闻牡。
- 通過name指定模板名字，然后通過is調(diào)用模板绳矩，通過data傳入模板所需值
- 模板擁有自己的作用域罩润，只能使用 data 傳入的數(shù)據(jù)以及模版定義文件中定義的 <wxs /> 模塊。
Page({
data: {
temData: {
index: 0,
msg: 'this is a template',
time: '2016-09-15'
}
}
})
<template name="odd">
<view> odd </view>
</template>
<template name="even">
<view> even </view>
</template>
<block wx:for="{{[1, 2, 3, 4, 5]}}">
<template is="{{item % 2 == 0 ? 'even' : 'odd'}}" data="{{...temData}}"/>
</block>
引用模板
import
可以在該文件中使用目標(biāo)文件定義的template
<!-- item.wxml -->
<template name="item">
<text>{{text}}</text>
</template>
<import src="item.wxml"/>
<template is="item" data="{{text: 'forbar'}}"/>
include
可以將目標(biāo)文件除了 <template/> <wxs/> 外全部引入到 include 位置
<!-- index.wxml -->
<include src="header.wxml"/>
<view> body </view>
<!-- header.wxml -->
<view> header </view>
WXS模塊
WXS（WeiXin Script）是小程序的一套腳本語言翼馆，結(jié)合 WXML構(gòu)建出頁面的結(jié)構(gòu)割以。
- wxs 不依賴于基礎(chǔ)庫版本金度，可以在所有版本的小程序中運行。
- wxs 與 javascript 是不同的語言拳球，有自己的語法审姓。
- wxs 的運行環(huán)境和其他 javascript 代碼是隔離的，wxs 中不能調(diào)用其他 javascript 文件中定義的函數(shù)祝峻，也不能調(diào)用小程序提供的API魔吐。
- wxs 函數(shù)不能作為組件的事件回調(diào)。
- 在 iOS 上 wxs 會比 javascript 代碼快 2 ~ 20 倍莱找。android 設(shè)備上無差異酬姆。
組件
視圖容器
- view 視圖容器
可設(shè)置點擊時動態(tài)改變class - scroll-view 可滾動視圖區(qū)域
可設(shè)置橫/豎向滾動，以及各種滾動事件奥溺，和onPullDownRefresh沖突 - swiper 滑塊視圖容器
- movable-view 可移動的視圖容器辞色，在頁面中可以拖拽滑動
- cover-view/cover-image 覆蓋在原生組件之上的視圖
- cover-view 可覆蓋的原生組件包括map、video浮定、canvas相满、camera、live-player桦卒、live-pusher立美，只支持嵌套cover-view、cover-image方灾，可在cover-view中使用button建蹄。
基礎(chǔ)內(nèi)容
- icon 微信自帶圖標(biāo)
- text 文本
可以被長按選中，可顯示連續(xù)空格裕偿，可解碼 <等 - rich-text 用數(shù)組渲染的富文本
- progress 進度條
表單組件
- button 按鈕
符合微信樣式洞慎，可提交表單及調(diào)用專屬開放能力，有點擊時動態(tài)樣式 - checkbox 多項選擇器
- form 表單
可設(shè)置submit和reset事件嘿棘，以及formId用于發(fā)送模板消息
表單內(nèi)組件需要name以進行submit - label
- picker 從底部彈起的滾動選擇器
包括普通選擇器劲腿，多列選擇器，時間選擇器鸟妙，日期選擇器焦人，省市區(qū)選擇器 - picker-view 嵌入頁面的滾動選擇器
- radio 單選項目
- slider 滑動選擇器
- switch 開關(guān)選擇器
- textarea 多行輸入框
導(dǎo)航
- navigator 頁面鏈接
- functional-page-navigator 僅在插件的自定義組件中有效，用于跳轉(zhuǎn)到插件功能頁
多媒體
- image 支持懶加載
- video
- camera
- map
- canvas
開放能力
- open-data 展示用戶信息
- web-view 占據(jù)整個頁面的web容器圆仔，無法在個人類型小程序使用
自定義組件
1. 組件的創(chuàng)建和使用
在組件json中配置為組件
{
"component": true
}
在使用處配置標(biāo)簽名和組件位置
{
"usingComponents": {
"my-component": "component/myComponent"
}
}
- 標(biāo)簽名只能是小寫字母垃瞧、中劃線和下劃線的組合
- 自定義組件也可以引用自定義組件
2. 組件的模板
- 通過slot節(jié)點可以將頁面中的內(nèi)容嵌入組件,多個slot時需要在組件js中聲明
<!-- 組件模板 -->
<view class="wrapper">
<view>這里是組件的內(nèi)部節(jié)點</view>
<slot></slot>
</view>
<!-- 引用組件的頁面模版 -->
<view>
<component-tag-name>
<view>這里是插入到組件slot中的內(nèi)容</view>
</component-tag-name>
</view>
- 通過屬性傳值 此時組件可通過properties獲取propA屬性值
<component-tag-name prop-a="{{dataFieldA}}"></component-tag-name>
3.組件的樣式
- 組件只受自身wxss樣式影響蔫劣，app.wxss和組件所在頁面樣式只有font坪郭，color等繼承樣式會影響組件，可以在 Component 中用 externalClasses 定義準許引入的外部樣式類
- 組件和引用組件的頁面無法使用id脉幢，屬性歪沃，標(biāo)簽名選擇器嗦锐，應(yīng)使用class選擇器
- 后代選擇器偶爾會有非預(yù)期表現(xiàn)
4.組件的生命周期
- created 組件實例化，但節(jié)點樹還未導(dǎo)入沪曙，因此這時不能用setData
- attached 節(jié)點樹完成奕污，可以用setData渲染節(jié)點，但無法操作節(jié)點
- ready 組件布局完成液走，這時可以用SelectorQuery獲取節(jié)點信息碳默，也可以操作節(jié)點
- moved 組件實例被移動到樹的另一個位置時觸發(fā)
- detached 組件實例從節(jié)點樹中移除時觸發(fā)
5.組件的屬性
- properties 對外屬性，可設(shè)置類型缘眶，初始值和變化時的相應(yīng)函數(shù)
- data 內(nèi)部數(shù)據(jù)
注：properties字段和data字段相互間不能沖突（盡管它們位于不同的定義段中） - methods
- relations 組件間關(guān)系
- externalClasses 外部樣式類
- options
組件通信
- WXML 數(shù)據(jù)綁定：用于父組件向子組件的指定屬性設(shè)置數(shù)據(jù)嘱根。
- 事件：用于子組件向父組件傳遞數(shù)據(jù)。
- 如果以上兩種方式不足以滿足需要巷懈，父組件還可以通過
this.selectComponent方法獲取子組件實例對象该抒，直接訪問組件的任意數(shù)據(jù)和方法。
