第13章 第三方UI組件庫(kù)

第13章第三方UI組件庫(kù)組件化介紹自定義組件安裝VantWeapp組件庫(kù)VantWeapp的使用VantWeapp核心組件VantWeapp業(yè)務(wù)組件010204050306組件化介紹組件化介紹在頁面的設(shè)計(jì)過程中，頁面上的每一個(gè)元素都是組件，頁面是一個(gè)大型的組件，這個(gè)大型組件又由多個(gè)中小型組件拼裝而成。中型組件還可以再拆分成更小的組件，小型組件再拆分成DOM元素。在傳統(tǒng)的Web前端組件化開發(fā)中，DOM元素也是屬于瀏覽器的組件，是組件的基本單元。而在微信小程序開發(fā)中，小程序提供的基礎(chǔ)組件就是小程序組件化的基本單元。組件化介紹通常一個(gè)應(yīng)用會(huì)以一棵嵌套的組件樹的形式來組織，例如，你可能會(huì)有頁頭、側(cè)邊欄、內(nèi)容區(qū)等組件，每個(gè)組件又包含了其它的像導(dǎo)航鏈接、博文之類的組件。自定義組件自定義組件在小程序項(xiàng)目下創(chuàng)建“components”目錄來管理所有的自定義組件，并且在“components”目錄下新建一個(gè)文件夾，并將該文件夾命名為“my-component”，然后在“my-component”文件夾下點(diǎn)擊鼠標(biāo)右鍵，在右鍵菜單中選擇“新建Component”選項(xiàng)。自定義組件自定義組件然后將自定義組件中的所有文件都命名為“index”，創(chuàng)建完成后的自定義組件文件結(jié)構(gòu)如下圖：自定義組件打開自定義組件中的index.json配置文件，將component字段設(shè)為true將當(dāng)前組文件設(shè)為自定義組件。{"component":true}自定義組件使用已注冊(cè)的自定義組件前，首先要在頁面的json文件中進(jìn)行引用聲明。此時(shí)需要提供每個(gè)自定義組件的標(biāo)簽名和對(duì)應(yīng)的自定義組件文件路徑。{"usingComponents":{"my-component":"/components/my-component/index"}}自定義組件在頁面的wxml中就可以像使用基礎(chǔ)組件一樣使用自定義組件。節(jié)點(diǎn)名即自定義組件的標(biāo)簽名，節(jié)點(diǎn)屬性即傳遞給組件的屬性值。<my-componentinner-text="這是自定義組件的內(nèi)容"></my-component>安裝VantWeapp組件庫(kù)安裝VantWeapp組件庫(kù)VantWeapp組件庫(kù)的安裝：#初始化依賴npminit-y#通過npm安裝npmi@vant/weapp-S--production#通過yarn安裝yarnadd@vant/weapp--production#安裝0.x版本npmivant-weapp-S--production安裝VantWeapp組件庫(kù)在使用VantWeapp組件庫(kù)之前，需要將app.json中的"style":"v2"配置項(xiàng)去除，并手動(dòng)在project.config.json內(nèi)添加如下配置{..."setting":{..."packNpmManually":true,"packNpmRelationList":[{"packageJsonPath":"./package.json","miniprogramNpmDistDir":"./"}]}}安裝VantWeapp組件庫(kù)在菜單欄選擇【工具】--【構(gòu)建npm】：安裝VantWeapp組件庫(kù)等待構(gòu)建完成，即完成了組件庫(kù)的安裝。VantWeapp的使用VantWeapp的使用引入組件：以Button組件為例，只需要在app.json或index.json中配置Button對(duì)應(yīng)的路徑即可。VantWeapp的使用通過npm安裝，在app.json文件中進(jìn)行全局引入，代碼如下："usingComponents":{"van-button":"@vant/weapp/button/index"}VantWeapp的使用引入組件后，可以在wxml中直接使用組件，代碼如下：<van-buttontype="primary">按鈕</van-button>VantWeapp核心組件VantWeapp核心組件VantWeapp組件庫(kù)的核心組件：基礎(chǔ)組件表單組件反饋組件展示組件導(dǎo)航組件VantWeapp業(yè)務(wù)組件VantWeapp業(yè)務(wù)組件VantWeapp組件庫(kù)提供的一部分業(yè)務(wù)組件，主要是依托Van