▓五洲彩票平台官网官网▓赔率最高,提款速度最快。五洲彩票平台官网专注彩票经营10余年,信誉口碑业界驰名;在我们五洲彩票平台官网聊天室玩家每天可领取现金红包!我们[五洲彩票平台官网]将给您提供一个安全/稳定/秒速的彩票平台!...

400-893-5552

微信小程序推出自定義組件,減少重復開發!

 
2018-05-08 11:41:10所屬分類:行業動態

微信官方發文稱:小程序基礎庫提供了讓開發者自己創建界面組件的特性,稱之為“自定義組件”。通過這個特性,開發者就能夠將這樣的交互模塊抽象成界面組件,使界面代碼組織變得非常靈活。
 

微信小程序推出自定義組件,減少重復開發!
 

小程序自定義組件功能特點:

01、開發者可以將一些復用性強的代碼抽象成自定義組件,它們的使用方法與基礎庫內置的 view 、 button等基礎組件非常相似。這樣的組件化非常有利于代碼邏輯的解耦合。

02、自定義組件局部更新時的性能,相比頁面的局部更新要小很多,在必要時可以利用這個特點進行性能優化。

03、自定義組件是相對獨立的功能模塊,開發者可以將自己的自定義組件代碼開源出來,與其他開發者共享開發成果。

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

每個自定義組件由四個代碼文件組成:

json文件: 用于于放置一些最基本的組件配置

mlwx 文件: 組件模版

wxss 文件: 組件的樣式,只在組件內部節點上生效(這個文件是可選的)

js 文件: 組件的 JS 代碼,承載組件的主要邏輯

這四個文件與編寫一個頁面時用到的四個文件非常類似,但也有區別。
下面小豬CMS小編將介紹如何利用這四個文件編寫一個簡單的自定義組件。

1.組件配置

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

微信小程序推出自定義組件,減少重復開發!
 

這個文件中包含以下內容:
 

微信小程序推出自定義組件,減少重復開發!
 

2.組件模板

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

微信小程序推出自定義組件,減少重復開發!

這個模版將在組件中渲染出一個 checkbox 和一個 label 。

3.組件樣式

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

微信小程序推出自定義組件,減少重復開發!
 

4.組件定義

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


微信小程序推出自定義組件,減少重復開發!
 

簡單的 Component 構造器調用包含3個定義段:

methods 中的方法可以用來包含組件的事件回調函數;

data 是組件的內部數據,可以用 this.setData 方法來改變;

properties 中聲明這個組件的屬性,上例中聲明了 title 屬性,這樣,組件外部在使用組件時就可以指定這個屬性的值。

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

如何使用微信小程序自定義組件?

使用上面這個自定義組件的方法很簡單。

Step 1

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

微信小程序推出自定義組件,減少重復開發!
 

Step 2

在頁面對應的 wxml 文件中使用了:
 

微信小程序推出自定義組件,減少重復開發!
 

這樣,在頁面上最終呈現的效果如下:

微信小程序推出自定義組件,減少重復開發!
 

在自定義組件中也是可以引用其他自定義組件的,方法與在頁面中引用的方法類似。

自定義組件的高級特性與注意事項

除了上述的基本功能外,自定義組件還提供了一組基礎接口,用來實現各種各樣的功能。

01\

在頁面和自定義組件間通信時,最常用的方法是事件機制,自定義組件可以使用 triggerEvent 接口向頁面發送事件,頁面 WXML 中使用 bind 或者 catch 就可以監聽到。

02\

如果事件機制還不足以滿足組件間通信需要的話,可以使用 selectComponent 接口。

03\

如果同時建立了好幾個有相互關聯關系的組件,可以使用組件間關系接口 relations 。

04\

組件間可能需要共享部分代碼,這時可以使用behaviors 。

有關它們的詳細文檔,請參考 開發者文檔 - 框架 - 自定義組件 章節。

還需要注意的是,一些與 WXML 節點相關的接口,如wx.createSelectorQuery 、 wx.createCanvasContext ,在自定義組件中使用時有一定的變化,使用時請再次閱讀一下相關的文檔。

小豬CMS擁有完善的公眾號+小程序方案,面向零售電商、餐飲、酒店、美業、健身瑜伽、酒吧、KTV、康體SPA等行業,深度功能支撐,不做流于表面的小程序。傻瓜化拖拽制作自己想要的小程序,100+海量模板供您選擇,具有支付、預約、移動CRM、大數據營銷等功能,全球數十萬家平臺客戶的支持,遍布全國各地的案例。

Copyright ? 2013-2018 合肥彼岸互聯信息技術有限公司 All Rights Reserved地址:合肥市高新區亞夏汽車城12樓
工信部備案號: 皖B2-20150071-4    增值電信業務經營許可證:皖B2-20150071-4 安全聯盟認證 安全聯盟認證 安全聯盟實名認證

copyright@2015 合肥彼岸互聯信息技術有限公司

電話:400-893-5552 0551-65371998 QQ:800022936

地址:合肥市高新區亞夏汽車城12樓

五洲彩票平台官网 五洲彩票网址 五洲彩票最新官网 五洲彩票平台注册 五洲彩票登入网址 五洲彩票官方网站