<cite id="uagzm"></cite>

    1. <cite id="uagzm"><span id="uagzm"><samp id="uagzm"></samp></span></cite>
      <rt id="uagzm"><optgroup id="uagzm"><button id="uagzm"></button></optgroup></rt> <rt id="uagzm"><menuitem id="uagzm"><button id="uagzm"></button></menuitem></rt><rp id="uagzm"></rp><source id="uagzm"><menuitem id="uagzm"></menuitem></source>

          <rp id="uagzm"><meter id="uagzm"><button id="uagzm"></button></meter></rp>

          <source id="uagzm"><menuitem id="uagzm"></menuitem></source>
          <cite id="uagzm"></cite>

        1. <rt id="uagzm"></rt>

        2. 優惠公告:微享互動金秋十月、國慶感恩回饋活動于9.25-10.15正式開啟:網站建設、朋友圈廣告、小程序、抖音、短視頻、企業宣傳片等全系產品8.8折。 詳詢:023-62924115

          全國服務熱線:18623514428

          QQ

          咨詢

          二維碼

          電話

          座機:023-62924115

          文經理:17783139095

          羅經理:18623514428

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

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

          點擊:

          來源: 微享互動      時間: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://www.huinichem.com.cn/app-news/761.html,歡迎分享,(電話:15320293856,微信:llhhldancing)

          預約開戶

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

          投放需求

          網址:http://www.huinichem.com.cn

          地址:重慶市兩江新區天王星C1棟3樓

          座機:023-62924115

          網站建設咨詢:18623514428 朱經理

          朋友圈廣告咨詢:17783139095 文經理

          微享官方微信

          掃一掃 關注公眾號

          手机免费天天看高清电影 - 视频 - 在线播放 - 影视资讯 - 随风网