小程序自定義組件(1)

小程序開發語言雖然只能運行在微信小程序中， 可是它的設計一樣遵循了主流前端框架的主要特徵——組件化，在小程序中組件化的實現有兩種方式: template 模版 和 Component 組件。 這兩種方式分別適用於不一樣的場景。

1. template 模版 主要用於展現，模版中不涉及事件處理， 須要處理的事件邏輯放在調用模版的頁面中。 一個 template 模版 只包含 wxml wxss 文件。
2. Component 組件 做爲一個單獨的功能模塊，不只能夠包含頁面展現還能夠包含該模塊的事件邏輯處理。 像一個頁面同樣， Component 組件 能夠包含 wxml wxss js json 文件。

在上一篇 小程序 template 模版使用方法講解了 template 模板 的使用方法。 此次看一下自定義的組件的使用方法。

初試自定義組件

快速建立自定義組件

一個自定義組件包含 wxml wxss json js 4個文件， 使用微信開發者工具能夠快速建立一個自定義組件的這四個文件。

建立 product 組件

自定義組件的 json 文件

一個組件的肯定首先須要在組件的 json 文件中聲明定義 product.json

{
  "component": true,
  "usingComponents": {}
}
複製代碼

自定義組件的 wxml 文件

product.wxml

<view>
        <text class="custome">{{msg}}</text>
    </view>
複製代碼

自定義組件的 wxss 文件

組件內部的樣式默認狀況下只對該組件生效。 即組件內部的樣式不會影響到外部頁面的樣式， 一樣外部的樣式也不會影響到組件的樣式。

.custome {
        color: #cccccc;
    }
複製代碼

自定義組件的 js 文件

自定義組件的 js 文件不一樣於頁面的 js 文件。 它是由一個 Component 構造器來定義的; 當使用自定義的組件的時候，會使用 Component 構造器來指定組件的屬性，數據，方法等。 product.json

Component({
    properties: {}, 
    data: {/* 定義組件內部使用的數據*/},
    methods: {/*自定義的方法*/}
})
複製代碼

當使用開發者工具生成自定義組件模板的時候， 會在該組件的 js 文件中生成 Component 的三個屬性。

properties

接收調用頁面傳遞的數據， 使用場景和 vue 框架組件中的 props 類似。 對於須要接收的字段能夠限制數據類型和定義默認值

properties: {
    msg: {
        type: String,  
        value: 'some message !'
    }
}
複製代碼

使用自定義組件

使用自定義組件， 須要先在調用頁面的 json 文件中進行引用聲明。

index.json 引用生命

{
    "usingComponents": {
        "product": "../../components/product/index"
    }
}
複製代碼

這樣在頁面中就能夠像小程序的基礎組件同樣使用自定義組件。 index.wxml

<product msg="index usr message"/>
複製代碼