• 創(chuàng)建自定義組件
  • 使用自定義組件

創(chuàng)建自定義組件

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

創(chuàng)新互聯(lián)建站，為您提供重慶網(wǎng)站建設公司、成都網(wǎng)站制作、網(wǎng)站營銷推廣、網(wǎng)站開發(fā)設計，對服務成都效果圖設計等多個行業(yè)擁有豐富的網(wǎng)站建設及推廣經(jīng)驗。創(chuàng)新互聯(lián)建站網(wǎng)站建設公司成立于2013年,提供專業(yè)網(wǎng)站制作報價服務,我們深知市場的競爭激烈，認真對待每位客戶，為客戶提供賞心悅目的作品。 與客戶共同發(fā)展進步，是我們永遠的責任！

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

 
 
 

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

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

 
 
 

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

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

代碼示例

 
 
 

  
  
  

  
  
  

  
  
  
 {{name}}
  
  
  

 
 
 

 
 
 

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

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

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

代碼示例

在開發(fā)者工具中打開

在開發(fā)者工具中打開

在 WEB IDE 中打開

 
 
 

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

 
 
 

  
  
  

  
  
  

  
  
  
 {{name}}{{age}}
  
  
  

 
 
 

使用自定義組件

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

 
 
 

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

首先需要提供每個自定義組件的標簽名與其對應的自定義組件文件路徑。

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

代碼示例

 
 
 

  
  
  
// 頁面json配置 home.json
  
  
  
{
  
  
  
 "usingComponents": {
  
  
  
 "custom": "/components/custom/custom"
  
  
  
 }
  
  
  
}
 
 
 

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

代碼示例

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

說明:

• 自定義組件只能在1.10.13以上的 swan.js 中使用；
• 同一頁面引用的自定義組件，不同路徑的自定義組件暫時不能使用相同的自定義組件名字；
• 在頁面級的配置（json 文件）中不能添加 "component": true，因為將 page 當做自定義組件使用是不允許的；
• 對于自定義組件中的資源引用路徑，使用相對路徑目前針對的是自定義組件 SWAN 文件所對應的目錄層級，故暫時推薦使用絕對路徑。

當前題目：創(chuàng)新互聯(lián)百度小程序教程：創(chuàng)建自定義組件
網(wǎng)站URL：http://www.dlmjj.cn/article/dhcdchj.html