微信小程式 自定義元件及新增屬性

2021-10-05 09:43:21 字數 791 閱讀 3998

一、建立元件

1、自定義乙個components資料夾,用來存放所有自定義的元件。

2、再針對每乙個元件建立乙個資料夾,用來存放這個元件相關的檔案。比如這個元件,那麼可以建立乙個mysearch的乙個資料夾。

3、在指定元件的資料夾中右鍵->新建component建立元件。這樣建立的目的是在json檔案中新增"component": true,將其申明為乙個元件。

4、在wxml檔案中做好元件的節點布局。比如以下**:

二、使用元件

1、在需要使用自定義元件的頁面的json檔案中註冊元件。新增類似如下**:

}

2、然後在wxml模板檔案中使用元件:

三、給自定義元件新增屬性

1、在元件的js檔案中,在properties中新增屬性,新增屬性的時候,需要指定兩個值,乙個是type,代表的是這個屬性的型別,乙個是value,代表的是這個屬性的預設值。示例**如下:

component(

} })

然後在wxml模板中就可以使用了。示例**如下:

3、在使用元件的時候,可以直接在元件上給這個屬性設定值:

4、還有另外一種使用data的形式,data中的資料可以渲染到元件的**中,但是使用data不能作為屬性來使用。

微信小程式自定義元件

父元素 子元件 可以由多個 子元件 a,b,c,d 父元素 首先是關於元件的建立 1 單獨建立乙個資料夾存放 wxss x.js wxml json這四個檔案,其中主要對元件進行宣告的是json檔案,需要寫入 這段 就是讓元件允許被使用,如果元件需要呼叫另乙個元件中,那麼就需要再usingcompe...

微信小程式自定義元件

根據專案需要,抽離出公共的元件。1 在專案根目錄新建乙個component的資料夾,然後新建自己需要的檔案 專案目錄如下 在component裡面我新建了3個子元件。2 子元件的寫法 只有js檔案格式不一樣,其他的檔案都正常寫。js需要自定義乙個component,參考 示例 component d...

微信小程式 自定義元件

建立自定義元件 元件的構成類似頁面,由json wxml wxss js 4個檔案組成。在新建乙個元件的時候需要在元件的json檔案中設定 components 字段 true 在元件wxss中不應使用id選擇器 屬性選擇器和標籤名選擇器。這句是官方說的,我想應該是會全域性汙染 自定義元件的js檔案...