百度智能小程序 抽象節(jié)點(diǎn)

抽象節(jié)點(diǎn)自小程序基礎(chǔ)庫版本 3.90.18 、開發(fā)者工具正式版 2.9.1，beta 版 2.9.0-beta 開始支持。

在組件中使用抽象節(jié)點(diǎn)

抽象節(jié)點(diǎn)：自定義組件模板中的一些節(jié)點(diǎn)，其對(duì)應(yīng)的自定義組件不是由自定義組件本身確定的，而是由自定義組件的調(diào)用者確定的。這時(shí)可以把這個(gè)節(jié)點(diǎn)聲明為“抽象節(jié)點(diǎn)”。

例如，我們現(xiàn)在來實(shí)現(xiàn)一個(gè)“選框組”（selectable-group）組件，它其中可以放置單選框（custom-radio）或者復(fù)選框（custom-checkbox）。這個(gè)組件的 swan 可以這樣編寫：

代碼示例

開發(fā)者工具中預(yù)覽效果

<!-- selectable-group.swan -->
<view s-for="{{labels}}">
    <label bindtap="itemTap" data-index="{{index}}">
        <selectable disabled="{{false}}" selected="{{selected[index]}}" name="{{name}}"></selectable>
        {{item}}
    </label>
</view>

其中，"selectable" 不是任何在json文件的 usingComponents 字段中聲明的組件，而是一個(gè)抽象節(jié)點(diǎn)。它需要在 componentGenerics 字段中聲明：

{
    "componentGenerics": {
        "selectable": true
    }
}

使用包含抽象節(jié)點(diǎn)的組件

在使用 selectable-group 組件時(shí)，必須指定 "selectable" 具體是哪個(gè)組件：

<selectable-group generic:selectable="custom-radio" />

這樣，在生成這個(gè) selectable-group 組件的實(shí)例時(shí)，"selectable" 節(jié)點(diǎn)會(huì)生成“custom-radio”組件實(shí)例。類似地，如果這樣使用：

<selectable-group generic:selectable="custom-checkbox" />

“selectable”節(jié)點(diǎn)則會(huì)生成“custom-checkbox”組件實(shí)例。

上述的 custom-radio 和 custom-checkbox 需要包含在這個(gè) swan 對(duì)應(yīng) json 文件的 usingComponents 定義段中。

{
    "usingComponents": {
        "custom-radio": "path/to/custom/radio",
        "custom-checkbox": "path/to/custom/checkbox"
    }
}

抽象節(jié)點(diǎn)的默認(rèn)組件

抽象節(jié)點(diǎn)可以指定一個(gè)默認(rèn)組件，當(dāng)具體組件未被指定時(shí)，將創(chuàng)建默認(rèn)組件的實(shí)例。默認(rèn)組件可以在 componentGenerics 字段中指定：

{
    "componentGenerics": {
        "selectable": {
            "default": "path/to/default/component"
        }
    }
}

節(jié)點(diǎn)的generic引用generic:xxx="yyy"中，值yyy只能是靜態(tài)值，不能包含數(shù)據(jù)綁定。因而抽象節(jié)點(diǎn)特性并不適用于動(dòng)態(tài)決定節(jié)點(diǎn)名的場(chǎng)景。

常見問題

Q :createSelectorQuery 如何獲取組件內(nèi)的節(jié)點(diǎn)

A: swan.createSelectorQuery() 返回一個(gè) SelectorQuery 對(duì)象實(shí)例?？梢栽谶@個(gè)實(shí)例上使用 select 等方法選擇節(jié)點(diǎn)，并使用 boundingClientRect 等方法選擇需要查詢的信息。

代碼示例： 獲取自定義組件內(nèi)節(jié)點(diǎn) 

// 自定義組件邏輯 (custom.js)
Component({
    properties: {
        // 定義了name屬性，可以在使用組件時(shí)，由外部傳入。此變量可以直接在組件模板中使用
        name: {
            type: String,
            value: 'swan',
        }
    },
    data: {
        age: 1
    },
    methods: {
        queryMultipleNodes: function(){
            var SelectorQuery = swan.createSelectorQuery().in(this)
            SelectorQuery.select('.name').boundingClientRect(function(res){
                swan.showModal({
                    title: '節(jié)點(diǎn)信息為',
                    content: JSON.stringify(res)
                });
            }).exec()
        }
    }
});

代碼示例： 獲取基礎(chǔ)組件內(nèi)節(jié)點(diǎn) 

queryNodeInfo() {
    const query = swan.createSelectorQuery();
    query.select('.target').boundingClientRect();
    query.exec(res => {
        console.log(res)
    });
}