微信小程式小結(2) 自定義元件

2022-08-21 00:15:07 字數 975 閱讀 3877

在小程式中有模板跟元件的概念。但模板更多的用於內容的展示,更複雜的互動邏輯就沒辦法了。所以在小程式中也定義了一些元件來解決一些簡單邏輯的功能。

但有時預定義的元件並不能滿足我們的需求,這時就需要我們自己定義了。

這裡主要講用component構造器來自定義元件。

本例為乙個評分的小組件。

首先定義元件

建立自定義元件目錄(與正常頁面結構相同擁有:.js,.json,.wxml,.wxss)

在mycom.json中宣告該檔案為component 構造器構造的元件

在mycom.js中定義元件的邏輯

component(

},data: ,

methods: ,

},//注意宣告週期函式也有所變化

attached: function()

})其餘的mycom.wxml跟mycom.wxss和正常的頁面一樣寫。

注意:在 properties 定義段中,屬性名採用駝峰寫法(propertyname);在 wxml 中,指定屬性值時則對應使用連字元寫法(component-tag-name property-name="attr value"),應用於資料繫結時採用駝峰寫法(attr="}")。

引用自定義的元件

在index.json中宣告要用的元件名字及路徑

}

在index.wxml中

//監聽並響應事件

在index.js中

getscore(e) )

}

例子效果:

微信小程式自定義元件

父元素 子元件 可以由多個 子元件 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檔案...