小程序使用之自定義組件

序言

今天要介紹的是小程序的 自定義組件 ,類似的在做android 開發的過程中會用到自定義view,封裝成通用的組件可以在不同頁面裡重複使用;可以將複雜的頁面拆分成多個低耦合的模塊,便於代碼的維護。

自定義組件

一個自定義組件由js json wxml wxss 4個文件組成,微信開發者工具裡新建 選擇 Component,會自動創建這個4個文件, json文件裡設置:

小程序使用之自定義組件


這一組文件可以當做自定義組件使用。

一個簡單的例子,自定義item當做組件使用。

在組件的wxml文件裡碼上頁面元素

小程序使用之自定義組件


組件提供<slot>節點,用於承載組件在引用時提供的子節點,可以當做佔位的標誌,後面可以將視圖直接填充到此節點。/<slot>

wxss是對應組件的樣式

小程序使用之自定義組件


js文件裡的Component構造器可以指定組件的屬性、數據、方法等。

小程序使用之自定義組件


屬性列表裡的值對應渲染在組件的wxml裡。

小程序使用之自定義組件


組件的內部數據用於wxml的渲染。

在需要用到組件的頁面json文件裡添加,注意路徑是絕對路徑

小程序使用之自定義組件


wxml頁面內直接使用<item>標籤,該標籤下的節點text 用於填充到<solt>內/<solt>/<item>

小程序使用之自定義組件


一個簡單的頁面渲染

小程序使用之自定義組件


組件也可以接受外部傳入的樣式,在組件的js文件 Component 構造器裡

小程序使用之自定義組件


注意這裡使用*-class 的形式定義,在組件的wxml裡

<text>{{title}}/<text>

外部使用的話,可以看到外部的樣式傳遞給組件使用。

小程序使用之自定義組件



小程序使用之自定義組件


一個簡單的組件的例子完成,實際項目中,通過自定義組件便於在不同的頁面中重複使用。

總結

要做好小程序開發,僅僅只是會這些是不夠的,下面給大家列一下做好小程序需要掌握那些技能:

小程序使用之自定義組件


小編這裡還總結了很多Android進階開發的資料和視頻像高級UI、性能優化、架構師課程、NDK、Kotlin進階、小程序開發、混合式開發(ReactNative+Weex)全方面的Android進階實踐技術分享。

關注+轉發後私信回覆我【學習】獲取上述Android進階開發資料!!!

一起學習,一起進步,歡迎上車,有問題隨時聯繫,一起解決!!!


分享到:


相關文章: