微信小程式元件教程

2021-10-07 17:49:57 字數 1783 閱讀 8371

將頁面內的功能模組抽象成自定義元件，以便在不同的頁面中重複使用；也可以將複雜的頁面拆分成多個低耦合的模組，有助於**維護。

自定義元件由 json wxml wxss js 4個檔案組成

首先需要在 json 檔案中進行自定義元件宣告，將 component 設為 true.

json 檔案：

component 設為 true .

js 檔案：

component(}


,  data:},


methods:}}


)
這兩個檔案需要更改。

開始使用元件：



}


<


/component>


<


/view>
往元件傳值：



"hello"


>


<


/component>


<


/view>
接下來，我們可以在元件中獲取值並使用它。



}<


/view>


<


/view>
呼叫元件中的自定義方法：

為元件設定乙個 id



"component" msg=


"hello"


>


<


/component>


<


/view>
使用 selectcomponent 返回元件物件

var ac =


this


.selectcomponent


("#home"


)// 元件的自定義方法


ac.catmethod()


;
元件載入完成後執行：

我們可以使用 lifetimes 來監視元件是否已載入。

/**


* 頁面載入完成執行


*/lifetimes:


}
子元件向父元件傳值：

通過 triggerevent 從子元件向父元件傳值。

子元件：

this


.triggerevent


('event'


,)
父元件：

bind 後的 event 要與子元件 triggerevent 第乙個引數 event 相同。



"component" bind:event=


"bindevent"


>


<


/component>


<


/view>
bindevent


(e)
至此，它基本上包含了元件的所有操作。如果有遺漏或不清楚，歡迎指出。

demo 1：購物車

demo 2：3d 輪播圖

微信小程式button元件新手教程

button按鈕元件說明 button，顧名思義，按鈕，類似於html的button標籤。我們可以設定按鈕的屬性，比如字型顏色大小，背景顏色等，可以給按鈕繫結事件，使用者點選時會觸發事件。button按鈕元件示例 執行效果如下 下面是wxml 怎麼飛？點選 按鈕 即飛 下面是js page onlo...

微信小程式元件

class屬性 可以設定樣式,如果與動態資料繫結結合,元件的class具有動態變化的能力 style 通過style設定元件的內聯樣式,style屬性值中可以設定css的各種屬性 hidden 預設為false,不隱藏 data 屬性 可以用來為元件設定任意的自定義的屬性值,當元件繫結的事件觸發時,...

微信小程式 元件

官方文件見 我們的封裝 var basecomponentoption require utils basecomponentoption var option basecomponentoption.init 最小值限制 min 最大值 max 當前值 value 傳參物件,和 官方文件一致,只是...