百度智能小程序 創(chuàng)建自定義組件

開發(fā)者可以將頁(yè)面內(nèi)的功能模塊抽象成自定義組件，在智能小程序的各個(gè)頁(yè)面中進(jìn)行使用，提升代碼復(fù)用度，節(jié)省開發(fā)成本。

解釋： 一個(gè)自定義組件由 4 個(gè)文件 (.swan .css .js .json) 組成，例如包含自定義組件 custom 的項(xiàng)目結(jié)構(gòu):

// 包含自定義組件custom的項(xiàng)目結(jié)構(gòu)
├── app.js
├── app.json
├── project.swan.json
└── components
    └── custom
        ├── custom.swan
        ├── custom.css
        ├── custom.js
        └── custom.json

要編寫一個(gè)自定義組件，首先需要在 json 文件中進(jìn)行自定義組件聲明（在 json 文件中將 component 字段設(shè)為 true 可將這一組文件設(shè)為自定義組件）：

// 自定義組件配置 (custom.json)
{
    "component": true
}

同時(shí)，類似于頁(yè)面開發(fā)。開發(fā)自定義組件，可以在 swan 文件中編寫組件模板，在 css 文件中引入樣式，它們的寫法和頁(yè)面的寫法類似。

代碼示例

<!-- 自定義組件內(nèi)部的模板 (custom.swan) -->
<view class="name">
    {{name}}
</view>

/* 自定義組件的css，在該自定義組件內(nèi)部生效 (custom.css) */
.name {
    color: red;
}

在自定義組件的 js 文件中，需要使用 Component() 來(lái)注冊(cè)組件，并提供組件的屬性定義、內(nèi)部數(shù)據(jù)和自定義方法。

組件的屬性值和內(nèi)部數(shù)據(jù)將被用于組件 swan 模板的渲染，其中，屬性是可以由組件外部傳入的。

代碼示例 

// 自定義組件邏輯 (custom.js)
Component({
    properties: {
        // 定義了name屬性，可以在使用組件時(shí)，由外部傳入。此變量可以直接在組件模板中使用
        name: {
            type: String,
            value: 'swan',
        }
    },
    data: {
        // 這里是一些組件內(nèi)部數(shù)據(jù)
        age: 1
    },
    methods: {
        // 這里是一個(gè)自定義方法
        tap: function(){}
    }
})

<!-- 自定義組件內(nèi)部的模板 (custom.swan) -->
<view class="name" bindtap="tap">
    {{name}}{{age}}
</view>

使用自定義組件

使用已注冊(cè)的自定義組件前，首先要在頁(yè)面的 json 文件中進(jìn)行引用聲明。除了在頁(yè)面使用自定義組件，你還可以在自定義組件引用自定義組件，類似于頁(yè)面引用自定義組件。以下舉例頁(yè)面級(jí)（pages/home/home）的使用場(chǎng)景:

// 項(xiàng)目目錄結(jié)構(gòu)
├── app.js
├── app.json
├── project.config.json
└──  pages
    └── home
        ├── home.swan
        ├── home.css
        ├── home.js
        └── home.json
└── components
    └── custom
        ├── custom.swan
        ├── custom.css
        ├── custom.js
        └── custom.json

首先需要提供每個(gè)自定義組件的標(biāo)簽名與其對(duì)應(yīng)的自定義組件文件路徑。

提示:1.自定義組件文 件路徑: 自定義組件 swan、css、js、json 文件所在路徑 + 該類文件的 basename，例如以上項(xiàng)目目錄結(jié)構(gòu)，該路徑即是/components/custom/custom；2.創(chuàng)建自定義組件，推薦內(nèi)層的文件(swan、css、js、json)與其自定義組件目錄保持同名。

代碼示例    

// 頁(yè)面json配置 home.json
{
    "usingComponents": {
        "custom": "/components/custom/custom"
    }
}

這樣在頁(yè)面的 swan 文件中，就可以像使用基礎(chǔ)組件一樣使用自定義組件。節(jié)點(diǎn)名即自定義組件的標(biāo)簽名，節(jié)點(diǎn)屬性即傳遞給組件的屬性值。

代碼示例

<!-- 頁(yè)面模板 (home.swan) -->
<view>
    <!-- 在頁(yè)面中對(duì)自定義組件進(jìn)行引用 -->
    <custom name="swanapp"></custom>
</view>

自定義組件的 swan 節(jié)點(diǎn)結(jié)構(gòu)在與數(shù)據(jù)結(jié)合之后，將被插入到引用位置內(nèi)。

說(shuō)明:

• 自定義組件只能在1.10.13以上的 swan.js 中使用；
• 同一頁(yè)面引用的自定義組件，不同路徑的自定義組件暫時(shí)不能使用相同的自定義組件名字；
• 在頁(yè)面級(jí)的配置（json 文件）中不能添加 "component": true，因?yàn)閷?page 當(dāng)做自定義組件使用是不允許的；
• 對(duì)于自定義組件中的資源引用路徑，使用相對(duì)路徑目前針對(duì)的是自定義組件 SWAN 文件所對(duì)應(yīng)的目錄層級(jí)，故暫時(shí)推薦使用絕對(duì)路徑。