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

1.在wxml文件中我們使用的標(biāo)簽

2.在wxss文件中設(shè)計(jì)風(fēng)格樣式

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

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

上述內(nèi)容在本節(jié)中將直接使用，不進(jìn)行說(shuō)明。

我們知道，在我們?cè)O(shè)計(jì)微信小程序時(shí)，我們經(jīng)常會(huì)用到開(kāi)發(fā)者工具中提供的許多標(biāo)簽，例如：

當(dāng)這些標(biāo)簽都不能夠完成我們想要實(shí)現(xiàn)的功能時(shí)，我們通常會(huì)把這些標(biāo)簽組合使用，形成一個(gè)所謂的標(biāo)簽組合。一個(gè)組合中的多個(gè)標(biāo)簽共同實(shí)現(xiàn)一個(gè)功能，就像一些小零件共同組成一個(gè)大零件，那么這個(gè)組合我們就可以稱作“組件”。

組件

“組件”是一個(gè)頁(yè)面的組成部分之一。一個(gè)頁(yè)面可以擁有多種組件，一種組件可以放置多個(gè)；同樣的，一個(gè)組件可以被多個(gè)頁(yè)面使用，也可以被不同的頁(yè)面使用各自不同的次數(shù)?！敖M件”在頁(yè)面中的應(yīng)用，是相對(duì)自由的。

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

可以看出，它們都是通過(guò)view標(biāo)簽改進(jìn)后組成的“大塊程序”的“代號(hào)”。我們使用這些組件，比我們自己編寫程序要方便很多。它們的功能可能很常用，在好多頁(yè)面當(dāng)中都要被使用，那么如果都用一堆代碼來(lái)實(shí)現(xiàn)，那么在調(diào)試時(shí)會(huì)帶來(lái)很多不便，既然都是一樣的代碼，那為什么不簡(jiǎn)化呢？這就是組件為我們帶來(lái)的便利之處。

自定義組件

在我們?cè)O(shè)計(jì)小程序時(shí)，也會(huì)遇到這樣的情況：在開(kāi)發(fā)者工具中提供的這些組件中，沒(méi)有一種可以實(shí)現(xiàn)我們所需要的功能。這個(gè)時(shí)候，我們難道只能像上文提及的那樣，每個(gè)頁(yè)面都要重復(fù)這些用提供的組件來(lái)拼湊出來(lái)的代碼，并給我們后期調(diào)試工作增添負(fù)擔(dān)嗎？

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

自定義組件是由我們自己在全局定義的，可以被任意一個(gè)頁(yè)面調(diào)用的組件，我們可以對(duì)它像進(jìn)行頁(yè)面一樣進(jìn)行操作，靈活性很強(qiáng)，是我們編寫小程序不可或缺的。

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

我們想做一個(gè)button，這個(gè)button可以將我們傳遞到另外一個(gè)網(wǎng)頁(yè)當(dāng)中，而且這個(gè)button上的文字要是紅色的。

我們就把這個(gè)組件放在index頁(yè)面中，導(dǎo)航至新建的NewPage頁(yè)面。這個(gè)組件我們就叫它navitton（navigator和button結(jié)合）。

新建自定義組件

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

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

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

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

編寫組件

我們這個(gè)例子非常簡(jiǎn)單，只需要把我們的任務(wù)分為以下幾個(gè)小任務(wù)：

1.編寫wxss文件，設(shè)計(jì)紅色字體的風(fēng)格。

2.編寫wxml文件，編寫組件的整體架構(gòu)。

3.編寫js文件，編寫導(dǎo)航到頁(yè)面的事件。

在這三步中唯一沒(méi)有提到的文件是json文件。我們先來(lái)看一看這個(gè)文件：

這兩行代碼都很好理解：

第一行：“這是一個(gè)組件?！?/p>

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

實(shí)現(xiàn)我們這個(gè)組件的要求很簡(jiǎn)單，所以不需要?jiǎng)e的組件，所以這里面是空的，如果需要組件，在后文中會(huì)提到usingComponents的寫法。

我們先來(lái)編寫wxss文件，設(shè)計(jì)一個(gè)紅色的風(fēng)格。

關(guān)于顏色，選擇一個(gè)自己喜歡的顏色，推薦一個(gè)網(wǎng)站，換算顏色與十六進(jìn)制：RGB顏色值與十六進(jìn)制顏色碼轉(zhuǎn)換工具：

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

代碼如下：

.redtype {
  color: #FF0000
}

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

接下來(lái)我們來(lái)編寫wxml文件，代碼如下：

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

我們?cè)诎粹o上做了事件綁定，這個(gè)綁定的事件就是按下按鈕會(huì)導(dǎo)航至我們新建的NewPage。這個(gè)功能我們?cè)趈s文件中完成。

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

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

這樣一來(lái)我們組件的wxss文件、wxml文件、js文件全部寫好了。我們的組件navitton也就做好了。接下來(lái)就應(yīng)該將其使用在我們的小程序當(dāng)中。

應(yīng)用自定義組件

根據(jù)我們的需求，我們要在index頁(yè)面中調(diào)用我們的組件。首先我們要做的是聲明：這個(gè)頁(yè)面需要使用組件navitton。聲明的位置其實(shí)上文已有提及類似的情況，這里對(duì)頁(yè)面使用組件的情況進(jìn)行一次詳細(xì)的描述，也對(duì)usingComponents的寫法進(jìn)行一個(gè)介紹。

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

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

相對(duì)路徑！（劃重點(diǎn)）

所以正確的寫法如下：

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

而不是

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

如果像上面這種寫法來(lái)寫，會(huì)彈出找不到頁(yè)面的錯(cuò)誤。

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

保存，編譯，運(yùn)行，效果如下：

點(diǎn)下按鈕之后就會(huì)跳轉(zhuǎn)到NewPage頁(yè)面。說(shuō)明我們的組件被成功地應(yīng)用在了頁(yè)面上。

小結(jié)

本節(jié)我們只是通過(guò)一個(gè)很小、很簡(jiǎn)單的示例來(lái)帶大家了解什么是組件，什么是自定義組件，我們?cè)撊绾蝿?chuàng)建并使用我們的自定義組件。自定義組件可以讓我們的代碼更加靈活，讓我們的小程序變得更加豐富多彩。

本節(jié)內(nèi)容主要面對(duì)那些微信小程序?qū)ψ远x組件的使用不是很熟悉的人，只是一個(gè)入門教程，現(xiàn)實(shí)中對(duì)組件的運(yùn)用遠(yuǎn)比此復(fù)雜。希望大家閱讀本節(jié)內(nèi)容后，可以對(duì)自定義組件有一個(gè)全新的了解和認(rèn)識(shí)，也希望大家可以自行探索有關(guān)于自定義組件更加深?yuàn)W的領(lǐng)域。

新書(shū)介紹

以下是本人3月份出版的新書(shū)，拜托多多關(guān)注！

本書(shū)利用Python 的標(biāo)準(zhǔn)GUI 工具包tkinter，通過(guò)可執(zhí)行的示例對(duì)23 個(gè)設(shè)計(jì)模式逐個(gè)進(jìn)行說(shuō)明。這樣一方面可以使讀者了解真實(shí)的軟件開(kāi)發(fā)工作中每個(gè)設(shè)計(jì)模式的運(yùn)用場(chǎng)景和想要解決的問(wèn)題；另一方面通過(guò)對(duì)這些問(wèn)題的解決過(guò)程進(jìn)行說(shuō)明，讓讀者明白在編寫代碼時(shí)如何判斷使用設(shè)計(jì)模式的利弊，并合理運(yùn)用設(shè)計(jì)模式。

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

覺(jué)得本文有幫助？請(qǐng)分享給更多人。

關(guān)注微信公眾號(hào)【面向?qū)ο笏伎肌枯p松學(xué)習(xí)每一天！

面向?qū)ο箝_(kāi)發(fā)，面向?qū)ο笏伎迹?/span>