自定義元件 : 官方教程
一 小程式提供了很多api和基礎元件,但為減少**的複雜度和提高復用率,小程式也提供了自己的**復用機制:
小程式復用:頁面模版(template),元件模版(component,使用時用標籤的形式)。
這兩種模版的寫法和之前頁面的寫法是一樣的,都有四個檔案 wxml,js,wxss, json
二我們在使用基礎元件時比如 總會寫事件和屬性值,
自定義元件也一樣需要有自己的屬性和事件,
屬性分內部屬性和外部屬性,這兩種屬性共同設定了元件的樣式。內部屬性可以理解為手機的預裝軟體。外部屬性可以理解為手機的應用商店,可以自己手動管理。當然我們也會提供介面供使用者來修改內部屬性。
三,生命週期:
元件也有生命週期函式,和頁面一樣。
頁面有:onload onready onshow onhide onunload
元件有:created attached ready detached move
新建component元件:
四,自定義元件,這是官方提供的例子
component(),app檔案的app({})
beh**iors: ,
properties: // 屬性被改變時執行的函式(可選),也可以寫成在methods段中定義的方法名字串, 如:'_propertychange'
myproperty2: string // 簡化的定義方式
data: {}, // 私有資料,可用於模版渲染
// 生命週期函式,可以為函式,或乙個在methods段中定義的方法名
attached: function(){},
moved: function(){},
detached: function(){},
methods: } 如}
需求:自定義元件中放其他的基礎元件。
方法:在自定義元件的wxml檔案中使用標籤
自定義元件:,將此標籤放入想要安置的位置。
引用頁面 ://如果想要設定樣式的話寫在標籤中是無效的。
元件不論是自定義元件還是基礎元件,都有自己的屬性,事件。
注意:如果元件wxml檔案中的slot標籤中寫了name屬性,那麼就必須在元件的js檔案中寫上options:,不然不起作用。
03小程式自定義元件
在需要引入元件的頁面檔案下的json格式中新增component欄位 值為true 1.元件內不能使用類選擇器以外的選擇器。2.自定義的元件標籤名最好只是小寫字母 中劃線 下劃線的組合,且命名不能以wx 開頭。元件內的類樣式與元件外的類樣式,預設是有乙個隔離的效果。類似沙盒模式 1 元件內的樣式預設...
小程式之自定義元件
小程式允許我們使用自定義元件的方式來構建頁面。自定義元件官方文件 類似於頁面,乙個自定義元件由jsonwxmlwxssjs4個檔案組成 首先需要在 自定義元件下json檔案中進行自定義元件宣告 同時,還要在wxml檔案中編寫元件模板,在wxss檔案中加入元件樣式 注意 在元件wxss中不應使用id選...
小程式中自定義元件
一般單獨放在乙個資料夾中 類似以線面的這種結構,單獨出來 和一般新建的page頁面不同的是 字尾名是js 檔案中的page 變成了component 字尾名為json的檔案中多了 component true 使用的時候 需要在指定使用頁面的json 檔案中做配置 參考如下配置 前面的是元件的名稱,...