小程式之自定義元件

2022-01-22 04:04:24 字數 1085 閱讀 3933

小程式允許我們使用自定義元件的方式來構建頁面。

自定義元件官方文件

類似於頁面,乙個自定義元件由jsonwxmlwxssjs4個檔案組成

首先需要在 自定義元件下json檔案中進行自定義元件宣告

同時,還要在wxml檔案中編寫元件模板,在wxss檔案中加入元件樣式

注意:在元件wxss中不應使用id選擇器、屬性選擇器和標籤名選擇器。

}

/* 這裡的樣式只應用於這個自定義元件 */

.inner

在自定義元件的js檔案中,需要使用component()來註冊元件,並提供元件的屬性定義、內部資料和自定義方法

component(

},data:

},methods:

}})

首先要在頁面的json檔案中進行引用宣告。還要提供對應的元件名和元件路徑

}

# 頁面中wxml

# 在元件中

properties:

}

在頁面的wxml中:

bind:icre="icre"

第乙個icre為元件方法裡繫結的事件,第二件icre為頁面的事件

頁面

頁面中js

icre:function(e))

},

元件中的wxml

加我
元件中的js

clickpush:function(e),{})

}

03小程式自定義元件

在需要引入元件的頁面檔案下的json格式中新增component欄位 值為true 1.元件內不能使用類選擇器以外的選擇器。2.自定義的元件標籤名最好只是小寫字母 中劃線 下劃線的組合,且命名不能以wx 開頭。元件內的類樣式與元件外的類樣式,預設是有乙個隔離的效果。類似沙盒模式 1 元件內的樣式預設...

小程式中自定義元件

一般單獨放在乙個資料夾中 類似以線面的這種結構,單獨出來 和一般新建的page頁面不同的是 字尾名是js 檔案中的page 變成了component 字尾名為json的檔案中多了 component true 使用的時候 需要在指定使用頁面的json 檔案中做配置 參考如下配置 前面的是元件的名稱,...

微信小程式之自定義元件

根據官方文件 自定義元件一步一步來 在元件的wxml中可以包含 slot 節點,用於承載元件使用者提供的wxml結構。class circle box style width px height px class circle bg canvas id style width px height p...