微信小程序自定義組件的使用


在小程序的設計中,可能存在很多個頁面要使用同一個組件的情況,比如說,設計了4個頁面,每個頁面的頂部都需要顯示一個搜索框,如果在每個頁面都復制同一份搜索框的代碼,也不能說不是個辦法,但沒必要這么麻煩,此時可以引入自己定義的組件,大概意思就是,將搜索框的實現設置為自定義組件,單獨寫出來,此后哪個頁面需要用到時就直接在對應頁面的json文件中引入即可。

一下是視頻教資料中的一個例子

目錄結構如下:其中新建一個components目錄來存放searchbar頁面(自定義的組件)

 

searchbar.wxml

<view class='searchbar'>
  <navigator url='/pages/search/search' class='search-navigator'></navigator>
</view>

 

想要在index頁面中使用這個自定義組件,所以要在index.json中先注冊這個自定義組件

index.json

{
  "usingComponents": {
    "searchbar":"/components/searchbar/searchbar"
  }
}

 

此后在index.wxml中寫上

<searchbar></searchbar>

就可以在index頁面中顯示自定義的組件searchbarl了

 

需要注意的是,自定義組件的規格,以及需要在某個頁面使用自定義組件時應該在該頁面中先對自定組件進行注冊,詳情可以參考小程序設計的官方文檔:

https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM