微享互動主營:媒體廣告(朋友圈廣告,騰訊廣點通,騰訊新聞APP,新浪新聞APP,鳳凰新聞APP,優酷視頻,陌陌到店通)、重慶網站建設、重慶小程序開發、重慶公眾號制作

全國服務熱線:15320293856

二維碼

電話

汪經理:13594363214

文經理:17783139095

羅經理:15320293856

信息搜索
您當前所在的位置 首頁 > 微享資訊 > 小程序 >

小程序自定義組件如何減少重復開發

來源: 微享互動重庆网站建设      時間:2018-07-26 15:39:39  

  較為復雜的小程序中常常會有一些通用的交互模塊,比如“下拉選擇列表”、“搜索框”、“日期選擇器”等。這些界面交互模塊可能會在多個頁面中用到,邏輯也相對獨立。然而,用傳統的小程序開發方法來實現這樣的模塊是非常繁瑣的。小程序的界面是由一系列組件構成的。小程序基礎庫提供了一組基礎組件來滿足開發者的基本需求。但隨著小程序開發變得越來越復雜,單純使用基礎組件來進行開發也變得越來越不方便。

重庆网站建设  面對這個情況,小程序基礎庫提供了讓開發者自己創建界面組件的特性的“自定義組件”。通過這個特性,開發者就能夠將這樣的交互模塊抽象成界面組件,使界面代碼組織變得非常靈活。自定義組件是相對獨立的功能模塊,開發者可以將自己的自定義組件代碼開源出來,與其他開發者共享開發成果。自定義組件局部更新時的性能相比頁面的局部更新要小很多,在必要時可以利用這個特點進行性能優化。開發者可以將一些復用性強的代碼抽象成自定義組件,它們的使用方法與基礎庫內置的view 、 button等基礎組件非常相似。這樣的組件化非常有利于代碼邏輯的解耦合。

  如何編寫一個自定義組件?

重庆网站建设  每個自定義組件由四個代碼文件組成:json文件用于于放置一些最基本的組件配置,wxml文件組件模版, wxss 文件組件的樣式,只在組件內部節點上生效(這個文件是可選的),js 文件組件的 JS 代碼,承載組件的主要邏輯。這四個文件與編寫一個頁面時用到的四個文件非常類似,但也有區別。下面將介紹如何利用這四個文件編寫一個簡單的自定義組件。

  1.組件配置

重庆网站建设  編寫一個自定義組件,首先應在小程序代碼目錄中合適的位置創建一個 json 文件。這里我們把文件放置在小程序的 components目錄下,名為 custom-checkbox.json 。

小程序自定義組件減少重復開發方法

重庆网站建设  這個文件中包含以下內容:

  {

重庆网站建设  component:ture

  }

  2.組件模板

重庆网站建设  在同一目錄下,創建一個模版文件 custom-checkbox.wxml 。這個文件的寫法與頁面模版很類似:

小程序自定義組件減少重復開發方法

重庆网站建设  這個模版將在組件中渲染出一個 checkbox 和一個 label 。

  3.組件樣式

重庆网站建设  同樣類似于頁面, wxss 文件中可以指定組件節點的樣式。其中的樣式僅在組件內部生效。需要注意的是,樣式只能通過類選擇器(如 .the-class-name )來指定:

小程序自定義組件減少重復開發方法

  4.組件定義

  組件的 JS 文件中必須包含組件定義。定義時使用 Component 構造器:

小程序自定義組件減少重復開發方法

  簡單的 Component 構造器調用包含3個定義段:methods 中的方法可以用來包含組件的事件回調函數;data 是組件的內部數據,可以用 this.setData 方法來改變;properties 中聲明這個組件的屬性,上例中聲明了 title 屬性,這樣,組件外部在使用組件時就可以指定這個屬性的值。

  這樣我們就編寫好了 custom-checkbox 這個組件。

  如何使用自定義組件?

  在需要使用這個組件的頁面所對應的 json 文件中,添加下面的自定義組件聲明:

小程序自定義組件減少重復開發方法

  在頁面對應的 wxml 文件中使用了:在自定義組件中也是可以引用其他自定義組件的,方法與在頁面中引用的方法類似。

  高級特性與注意事項

重庆网站建设  除了上述的基本功能外,自定義組件還提供了一組基礎接口,用來實現各種各樣的功能。如果事件機制還不足以滿足組件間通信需要的話,可以使用selectComponent接口。如果同時建立了好幾個有相互關聯關系的組件,可以使用組件間關系接口relations。組件間可能需要共享部分代碼,這時可以使用behaviors。在頁面和自定義組件間通信時,最常用的方法是事件機制,自定義組件可以使用 triggerEvent接口向頁面發送事件,頁面 WXML 中使用 bind 或者 catch 就可以監聽到。

 

來源:重慶網站建設,本文網址:http://ntsanlang.cn/app-news/761.html,歡迎分享,(電話:15320293856,微信:llhhldancing)

預約咨詢

重庆网站建设馬上提交您的需求,我們會在24小時內聯系您,提供產品策劃服務!

網址:http://ntsanlang.cn

重庆网站建设地址:重慶市兩江新區天王星C1棟3樓

重庆网站建设網站建設咨詢:15320293856 羅經理

重庆网站建设百度廣告咨詢:13594363214 汪經理

重庆网站建设朋友圈廣告咨詢:17783139095 文經理

微享官方微信

掃一掃 關注公眾號