微信小程序的自定義組件（入門）

學習本節(jié)之前，你需要掌握：

1.在wxml文件中我們使用的標簽

2.在wxss文件中設計風格樣式

3.在js文件中使用的wx.navigateTo()。

4.路徑與相對路徑的寫法（什么是../)

上述內容在本節(jié)中將直接使用，不進行說明。

我們知道，在我們設計微信小程序時，我們經常會用到開發(fā)者工具中提供的許多標簽，例如：

當這些標簽都不能夠完成我們想要實現的功能時，我們通常會把這些標簽組合使用，形成一個所謂的標簽組合。一個組合中的多個標簽共同實現一個功能，就像一些小零件共同組成一個大零件，那么這個組合我們就可以稱作“組件”。

組件

“組件”是一個頁面的組成部分之一。一個頁面可以擁有多種組件，一種組件可以放置多個；同樣的，一個組件可以被多個頁面使用，也可以被不同的頁面使用各自不同的次數。“組件”在頁面中的應用，是相對自由的。

我們先來看一看開發(fā)者工具中為我們提供的一些組件，來體會一下“組件”的含義。

視圖容器組件	說明
cover-image	覆蓋在原生組件之上的圖片視圖
cover-view	覆蓋在原生組件之上的文本視圖
scroll-view	可滾動視圖區(qū)域
swiper	滑塊視圖容器

可以看出，它們都是通過view標簽改進后組成的“大塊程序”的“代號”。我們使用這些組件，比我們自己編寫程序要方便很多。它們的功能可能很常用，在好多頁面當中都要被使用，那么如果都用一堆代碼來實現，那么在調試時會帶來很多不便，既然都是一樣的代碼，那為什么不簡化呢？這就是組件為我們帶來的便利之處。

自定義組件

在我們設計小程序時，也會遇到這樣的情況：在開發(fā)者工具中提供的這些組件中，沒有一種可以實現我們所需要的功能。這個時候，我們難道只能像上文提及的那樣，每個頁面都要重復這些用提供的組件來拼湊出來的代碼，并給我們后期調試工作增添負擔嗎？

答案是否定的。開發(fā)者工具不能夠提供滿足我們所有需求的組件，所以當我們有這種需求時，開發(fā)者工具給了我們創(chuàng)造屬于我們自己的組件的機會，那就是——自定義組件。

自定義組件是由我們自己在全局定義的，可以被任意一個頁面調用的組件，我們可以對它像進行頁面一樣進行操作，靈活性很強，是我們編寫小程序不可或缺的。

本節(jié)內容我們將主要以舉一個簡單例子的形式，帶大家體會小程序中自定義組件的好處和便利，以及其基本的使用方法。

我們想做一個button，這個button可以將我們傳遞到另外一個網頁當中，而且這個button上的文字要是紅色的。

我們就把這個組件放在index頁面中，導航至新建的NewPage頁面。這個組件我們就叫它navitton（navigator和button結合）。

新建自定義組件

在和pages和utils文件夾同層級新建一個新的文件夾叫做components，這個component就是組件的意思，如圖：

選中這個我們新建好的components文件夾，在這里面再建一個文件夾，這個文件夾的名稱叫做navitton，也就是我們要做的自定義組件的名字，如圖：

接下來要在navitton文件夾中創(chuàng)建新的components，具體方法是右擊navitton文件夾，選擇“新建component”，新建的component的名字也叫做navitton。新建后的效果如下圖：

你會發(fā)現，組件和頁面一樣，都含有4個文件：js文件，json文件，wxml文件，wxss文件。這四個文件的作用和頁面的這四個文件的作用基本相同，只是對象不同。

編寫組件

我們這個例子非常簡單，只需要把我們的任務分為以下幾個小任務：

1.編寫wxss文件，設計紅色字體的風格。

2.編寫wxml文件，編寫組件的整體架構。

3.編寫js文件，編寫導航到頁面的事件。

在這三步中唯一沒有提到的文件是json文件。我們先來看一看這個文件：

這兩行代碼都很好理解：

第一行：“這是一個組件。”

第二行：“在這個組件中使用的其它組件：”

實現我們這個組件的要求很簡單，所以不需要別的組件，所以這里面是空的，如果需要組件，在后文中會提到usingComponents的寫法。

我們先來編寫wxss文件，設計一個紅色的風格。

關于顏色，選擇一個自己喜歡的顏色，推薦一個網站，換算顏色與十六進制：RGB顏色值與十六進制顏色碼轉換工具：

https://www.sioe.cn/yingyong/yanse-rgb-16/

代碼如下：

.redtype {
  color: #FF0000
}

這個樣式我們就可以在wxml文件使用了！

接下來我們來編寫wxml文件，代碼如下：

bindtap = "toNewPage">
  class = "redtype">Components

我們在按鈕上做了事件綁定，這個綁定的事件就是按下按鈕會導航至我們新建的NewPage。這個功能我們在js文件中完成。

我們的函數要在methods中定義。代碼如下：

methods: {
  toNewPage:function() {
    wx.navigateTo({
      url: '../../pages/NewPage/NewPage',
    })
  }
}

這樣一來我們組件的wxss文件、wxml文件、js文件全部寫好了。我們的組件navitton也就做好了。接下來就應該將其使用在我們的小程序當中。

應用自定義組件

根據我們的需求，我們要在index頁面中調用我們的組件。首先我們要做的是聲明：這個頁面需要使用組件navitton。聲明的位置其實上文已有提及類似的情況，這里對頁面使用組件的情況進行一次詳細的描述，也對usingComponents的寫法進行一個介紹。

首先我們進入index頁面的json文件。usingComponents就是我們聲明所需組件的位置。usingComponents中可以聲明多個組件，所以一個頁面中使用組件的種類數量是不受限制的。

先以我們的需求為例。usingComponents需要我們寫出組件名和組件路徑。這里的路徑是

相對路徑！（劃重點）

所以正確的寫法如下：

"usingComponents": {
    "navitton": "../../components/navitton/navitton"
  }

而不是

"usingComponents": {
    "navitton": "components/navitton/navitton"
  }

如果像上面這種寫法來寫，會彈出找不到頁面的錯誤。

聲明我們需要的組件之后，我們就可以在頁面中使用這個組件了。我們的實例中很簡單，只需要在頁面的wxml文件中寫出下面一行代碼，就可以了。

保存，編譯，運行，效果如下：

點下按鈕之后就會跳轉到NewPage頁面。說明我們的組件被成功地應用在了頁面上。

小結

本節(jié)我們只是通過一個很小、很簡單的示例來帶大家了解什么是組件，什么是自定義組件，我們該如何創(chuàng)建并使用我們的自定義組件。自定義組件可以讓我們的代碼更加靈活，讓我們的小程序變得更加豐富多彩。

本節(jié)內容主要面對那些微信小程序對自定義組件的使用不是很熟悉的人，只是一個入門教程，現實中對組件的運用遠比此復雜。希望大家閱讀本節(jié)內容后，可以對自定義組件有一個全新的了解和認識，也希望大家可以自行探索有關于自定義組件更加深奧的領域。

新書介紹

以下是本人3月份出版的新書，拜托多多關注！

本書利用Python 的標準GUI 工具包tkinter，通過可執(zhí)行的示例對23 個設計模式逐個進行說明。這樣一方面可以使讀者了解真實的軟件開發(fā)工作中每個設計模式的運用場景和想要解決的問題；另一方面通過對這些問題的解決過程進行說明，讓讀者明白在編寫代碼時如何判斷使用設計模式的利弊，并合理運用設計模式。

對設計模式感興趣而且希望隨學隨用的讀者通過本書可以快速跨越從理解到運用的門檻；希望學習Python GUI 編程的讀者可以將本書中的示例作為設計和開發(fā)的參考；使用Python 語言進行圖像分析、數據處理工作的讀者可以直接以本書中的示例為基礎，迅速構建自己的系統(tǒng)架構。

---

覺得本文有幫助？請分享給更多人。

關注微信公眾號【面向對象思考】輕松學習每一天！

面向對象開發(fā)，面向對象思考！