1. 程式人生 > 程式設計 >微信小程式新手入門之自定義元件的使用

微信小程式新手入門之自定義元件的使用

前言

從小程式基礎庫版本 1.6.3 開始,小程式支援簡潔的元件化程式設計。所有自定義元件相關特性都需要基礎庫版本 1.6.3 或更高。

開發者可以將頁面內的功能模組抽象成自定義元件,以便在不同的頁面中重複使用;也可以將複雜的頁面拆分成多個低耦合的模組,有助於程式碼維護。

一、小程式的好處和特點

1、好處

開發者:小程式開發門檻相對較低,難度不及APP,能夠滿足簡單的基礎應用,適合生活服務類線下商鋪以及非剛需低頻應用的轉換;也能節約開發和推廣成本。

使用者:能夠節約使用時間成本和手機記憶體空間。對於開發者來說

2、特點

便捷性:小程式是不需要下載安裝的,即用即走,非常方便使用者的使用。並且不佔用手機的記憶體,很便捷。

唯一性:小程式的名稱是具有唯一性的,誰先註冊就是誰的,當別人已經註冊成功了,你是沒有辦法在註冊的。

二、為什麼要使用自定義元件

在寫小程式的時候,可能存在很多個頁面要使用同一個元件的情況,比如說,設計了4個頁面,每個頁面的頂部都需要顯示一個搜尋框,如果在每個頁面都複製同一份搜尋框的程式碼,會比較繁雜,程式碼可讀性比較差,也不易於後期程式碼維護,此時可以單獨封裝為一個元件,大概意思就是,也就是通常說的自定義元件,此後哪個頁面需要用到時就直接在對應頁面的json檔案中引入即可。

三、怎麼使用FtaWGDc自定義元件

1、開啟專案檔案目錄,新建一個compoments目錄

新建一個compoments目錄

2、在compoments目錄裡,新建一個元件名

新建自定義元件

3、右鍵單擊http://www.cppcns.com選擇新建compoment

微信小程式新手入門之自定義元件的使用

4、在自定義元件(prolisFtaWGDct)裡完成邏輯程式碼 5、在要引用元件的頁面中的json檔案中,註冊元件

微信小程式新手入門之自定義元件的使用

6、在頁面的wxml中就可以使用prolist元件

微信小程式新手入門之自定義元件的使用

7、在元件(prolist)中接收傳過來的值

微信小程式新手入門之自定義元件的使用

8、接收的值可以在元件的wxml檔案中直接使用

微信小程式新手入門之自定義元件的使用

總結

  • 新建一個目錄存放自定義元件
  • 再新建一個元件的資料夾
  • 建立compoment
  • 完成元件的邏輯程式碼
  • 在其他頁面註冊元件
  • 使用元件

到此這篇關於微信小程式新手入門之自定義元件使用的文章就介紹到這了,更多相關微信小程式自

程式設計客棧定義元件內容請搜尋我們以前的文章或繼續瀏覽下面的相關文http://www.cppcns.com章希望大家以後多多支援我們!