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

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

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

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

解釋： 一個(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í)，類似于頁面開發(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屬性，可以在使用組件時(shí)，由外部傳入。此變量可以直接在組件模板中使用
  
  
  
 name: {
  
  
  
 type: String,
  
  
  
 value: 'swan',
  
  
  
 }
  
  
  
 },
  
  
  
 data: {
  
  
  
 // 這里是一些組件內(nèi)部數(shù)據(jù)
  
  
  
 age: 1
  
  
  
 },
  
  
  
 methods: {
  
  
  
 // 這里是一個(gè)自定義方法
  
  
  
 tap: function(){}
  
  
  
 }
  
  
  
})
 
 
 

 
 
 

  
  
  

  
  
  

  
  
  
 {{name}}{{age}}
  
  
  

 
 
 

使用自定義組件

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

 
 
 

  
  
  
// 項(xiàng)目目錄結(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
 
 
 

首先需要提供每個(gè)自定義組件的標(biāo)簽名與其對應(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)與其自定義組件目錄保持同名。

代碼示例

 
 
 

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

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

代碼示例

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

說明:

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

當(dāng)前文章：創(chuàng)新互聯(lián)百度小程序教程：創(chuàng)建自定義組件
文章位置：http://m.5511xx.com/article/dhcdchj.html