1. 程式人生 > >微信小程序自定義組件的使用

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

其中 詳情 clas bubuko 能說 evel 引入 weixin 多個

在小程序的設計中,可能存在很多個頁面要使用同一個組件的情況,比如說,設計了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/

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