• 💌 所屬專欄：【微信小程序開發(fā)教程】

• 😀 作??者：我是夜闌的狗🐶

• 🚀 個(gè)人簡介：一個(gè)正在努力學(xué)技術(shù)的CV工程師，專注基礎(chǔ)和實(shí)戰(zhàn)分享 ，歡迎咨詢！

• 💖 歡迎大家：這里是CSDN，我總結(jié)知識(shí)的地方，喜歡的話請三連，有問題請私信 😘 😘 😘

---

前言

??大家好，又見面了，我是夜闌的狗🐶，本文是專欄【微信小程序開發(fā)教程】專欄的第32篇文章;
??今天開始學(xué)習(xí)微信小程序的第17天💖💖💖，開啟新的征程，記錄最美好的時(shí)刻🎉，每天進(jìn)步一點(diǎn)點(diǎn)。
??專欄地址：【微信小程序開發(fā)教程】， 此專欄是我是夜闌的狗微信小程序開發(fā)過程的總結(jié)，希望能夠加深自己的印象，以及幫助到其他的小伙伴😉😉。
??如果文章有什么需要改進(jìn)的地方還請大佬不吝賜教👏👏。

---

一、組件的創(chuàng)建與引用

??前面對(duì)學(xué)習(xí)到的頁面導(dǎo)航、頁面事件和wxs腳本等相關(guān)內(nèi)容進(jìn)行了一個(gè)總結(jié)。接下來就來學(xué)習(xí)小程序中的自定義組件 – 創(chuàng)建與引用。話不多說，讓我們原文再續(xù)，書接上回吧。

1、創(chuàng)建組件

??在微信小程序中創(chuàng)建組件可分為以下三步：

• Step 1、項(xiàng)目的根目錄中，鼠標(biāo)右鍵，創(chuàng)建 components 文件夾。
• Step 2、然后在新建的 components 文件夾上創(chuàng)建組件名文件夾，這里以 test1 為例。
• Step 3、最后在 test1 文件上鼠標(biāo)右鍵，點(diǎn)擊“新建 Component，輸入組件的名稱之后回車，會(huì)自動(dòng)生成組件對(duì)應(yīng)的 4 個(gè)文件，后綴名分別為 .js，.json， .wxml 和 .wxss。

??注意：為了保證目錄結(jié)構(gòu)的清晰，建議把不同的組件，存放到單獨(dú)目錄中。

2、引用組件

??創(chuàng)建完組件之后，接下來就要去進(jìn)行使用，首先對(duì)組件進(jìn)行引用，組件的引用方式分為“局部引用”和“全局引用”，顧名思義：

• 局部引用：組件只能在當(dāng)前被引用的頁面內(nèi)使用。
• 全局引用：組件可以在每個(gè)小程序頁面中使用。

3、局部引用組件

??在頁面的 .json 配置文件中引用組件的方式，叫做“局部引用”。采用鍵值對(duì)方式進(jìn)行引用，具體代碼如下所示：

contact.json

??引入組件

{"usingComponents": {"my-test1": "/components/test1/test1"}
}

contact.wxml

??使用組件

<view></view>
<my-test1></my-test1>

??可以來看一下運(yùn)行效果：

??注意：由于組件是局部引用的，所以在別的頁面進(jìn)行調(diào)用該組件的時(shí)候是不會(huì)生效的。

4、全局引用組件

??如果一個(gè)一個(gè)頁面都要這樣調(diào)用該組件，那就太麻煩了。這里就可以把該組件進(jìn)行全局引用供全部頁面使用。在 app.json 全局配置文件中引用組件的方式，叫做“全局引用”。具體代碼如下：

app.json

??創(chuàng)建 usingComponents 節(jié)點(diǎn)并引用組件。

{"pages":[...],"window":{...},"usingComponents":{"my-test1": "/components/test1/test1"},

??這樣在全部頁面都可以調(diào)用該組件，這里以 message 頁面為例，就能發(fā)現(xiàn) message 頁面可以調(diào)用該組件了，實(shí)際運(yùn)行如下所示：

5、全局引用與局部引用的使用

??根據(jù)組件的使用頻率和范圍，來選擇合適的引用方式，如下表所示：

引用方式	使用范圍
全局引用	如果某組件在多個(gè)頁面中經(jīng)常被用到
局部引用	如果某組件只在特定的頁面中被用到

6、組件和頁面的區(qū)別

??從表面來看，組件和頁面都是由 .js、.json、.wxml 和 .wxss 這四個(gè)文件組成的。但是，組件和頁面的 .js 與
.json 文件有明顯的不同：

區(qū)別	組件	頁面
.json	需要聲明 “component”: true 屬性	不需聲明
.js	調(diào)用的是 Component() 函數(shù)	調(diào)用的是 Page() 函數(shù)
事件處理函數(shù)	需要定義到 methods 節(jié)點(diǎn)中	只要與 data 平級(jí)位置即可

二、自定義組件 - 樣式

1、組件樣式隔離

??默認(rèn)情況下，自定義組件的樣式只對(duì)當(dāng)前組件生效，不會(huì)影響到組件之外的UI 結(jié)構(gòu)，如圖所示：

• 組件 1 的樣式不會(huì)影響組件 2 的樣式。
• 組件 2 的樣式不會(huì)影響小程序頁面的樣式。
• 小程序頁面的樣式不會(huì)影響組件 1 和 2 的樣式。

??這樣做好處就是： 防止外界的樣式影響組件內(nèi)部的樣式以及組件的樣式破壞外界的樣式。

2、組件樣式隔離的注意點(diǎn)

• app.wxss 中的全局樣式對(duì)組件無效。

??首先定義一個(gè)全局樣式，頁面和組件進(jìn)行調(diào)用，具體代碼如下所示：

app.wxss

.g-csh-red-test{color: red;
}

message.wxml

??在頁面調(diào)用全局樣式。

<text class="g-csh-red-test">pages/message/message.wxml</text>
<view></view>
<my-test1></my-test1>

test1.wxml

??在組件調(diào)用全局樣式。

<text class="g-csh-red-test">components/test/test1.wxml</text>

??可以發(fā)現(xiàn)只有頁面上全局樣式是生效的，來看一下運(yùn)行效果：

• 只有 class 選擇器會(huì)有樣式隔離效果，id 選擇器、屬性選擇器、標(biāo)簽選擇器不受樣式隔離的影響。

??這里對(duì)全局樣式的字體進(jìn)行設(shè)置，具體代碼如下所示：

app.wxss

.g-csh-red-test{color: red;
}

??可以看得到組件跟頁面字體都變小了，可以來看一下運(yùn)行效果：

??這樣直接修改頁面和組件的樣式，在開發(fā)過程中風(fēng)險(xiǎn)很大，所以建議：在組件和引用組件的頁面中建議使用 class 選擇器，不要使用 id、屬性、標(biāo)簽選擇器！

3、修改組件的樣式隔離選項(xiàng)

??默認(rèn)情況下，自定義組件的樣式隔離特性能夠防止組件內(nèi)外樣式互相干擾的問題。但有時(shí)，我們希望在外界能
夠控制組件內(nèi)部的樣式，此時(shí)，可以通過 styleIsolation 修改組件的樣式隔離選項(xiàng)，用法有以下兩種：

方法一：
??在組件的 js 文件中新增如下配置：

Component({options:{styleIsolation: "isolated"},
})

方法二：
??在組件的 json 文件中新增如下配置：

{"styleIsolation": "isolated"
}

??一般情況方法一使用的比較多一點(diǎn)。

4、styleIsolation 的可選值

??這里以方法一為例，來對(duì) styleIsolation 屬性進(jìn)行設(shè)置，具體屬性如下所示：

可選值	默認(rèn)值	描述
isolated	是	表示啟用樣式隔離，在自定義組件內(nèi)外， 使用 class 指定的樣式將不會(huì)相互影響
apply-shared	否	表示頁面 wxss 樣式將影響到自定義組件， 但自定義組件 wxss 中指定的樣式不會(huì)影響頁面
shared	否	表示頁面 wxss 樣式將影響到自定義組件， 自定義組件 wxss 中指定的樣式也會(huì)影響頁面和其他設(shè)置了 apply-shared 或 shared 的自定義組件

test1.js

??將組件和頁面的樣式設(shè)置為相互影響。

Component({options:{styleIsolation: "shared"},
})

test1.wxss

??對(duì)文本進(jìn)行加粗。

.g-csh-red-test {font-weight: bold;
}

??此時(shí)可以發(fā)現(xiàn)，頁面的文本也加粗了且組件上文本也變成紅色了，說明組件和頁面的樣式現(xiàn)在是相互影響的，可以來看一下實(shí)際運(yùn)行效果：

---

總結(jié)

??感謝觀看，這里就是自定義組件 – 創(chuàng)建與引用&樣式的介紹，如果覺得有幫助，請給文章點(diǎn)個(gè)贊吧，讓更多的人看到。🌹 🌹 🌹

??也歡迎你，關(guān)注我。👍 👍 👍

??原創(chuàng)不易，還希望各位大佬支持一下，你們的點(diǎn)贊、收藏和留言對(duì)我真的很重要！！！💕 💕 💕 最后，本文仍有許多不足之處，歡迎各位認(rèn)真讀完文章的小伙伴們隨時(shí)私信交流、批評(píng)指正！下期再見。🎉

更多專欄訂閱:

• 😀 【LeetCode題解（持續(xù)更新中）】
• 🚝 【Java Web項(xiàng)目構(gòu)建過程】
• 💛 【微信小程序開發(fā)教程】
• ? 【JavaScript隨手筆記】
• 🤩 【大數(shù)據(jù)學(xué)習(xí)筆記（華為云）】
• 🦄 【程序錯(cuò)誤解決方法（建議收藏）】
• 🚀 【軟件安裝教程】

訂閱更多，你們將會(huì)看到更多的優(yōu)質(zhì)內(nèi)容！！