Uniapp接入插件的3種方式總結(jié)
前言
我這里的學(xué)習(xí)例子使用uni-badge這個(gè)插件，其他的插件也是類(lèi)似的引入方式，大多數(shù)插件文檔中也包含使用方法。
一、使用HBuilderX導(dǎo)入插件
提示：這個(gè)方法需要登錄HBuilderX
1.找到所需插件
在插件市場(chǎng)找到自己所需插件，我舉例插件為uni-badge。點(diǎn)擊下載進(jìn)入到具體插件頁(yè)面，如下所示
2.導(dǎo)入插件
點(diǎn)擊【使用HBuilderX導(dǎo)入插件】按鈕，然后選擇需要導(dǎo)入的項(xiàng)目
之后，自動(dòng)生成uni_modules目錄，并下載
3.使用插件
直接就可以在頁(yè)面中使用了
效果如下：
二、通過(guò)uni_modules單獨(dú)安裝插件
1.創(chuàng)建uni_module目錄
我這邊是沒(méi)有創(chuàng)建uni-ui模塊的，則需要現(xiàn)在自己項(xiàng)目下創(chuàng)建目錄uni_module
2.下載并安裝插件
然后點(diǎn)擊【下載插件ZIP】下載相應(yīng)的組件，如圖所示
提示：這個(gè)【下載插件ZIP】按鈕需要在非登錄狀態(tài)下才能出現(xiàn)
解壓插件
將components中的uni-badge目錄直接復(fù)制到項(xiàng)目的uni_modules中
3.使用插件
可以直接在頁(yè)面上使用了，無(wú)需另外的引用和注冊(cè)組件
效果如圖
三、通過(guò)components單獨(dú)安裝組件
1.創(chuàng)建components目錄
在項(xiàng)目中創(chuàng)建components目錄
2.下載并安裝插件
下載插件
解壓插件
將components中的uni-badge目錄直接復(fù)制到項(xiàng)目的components中
3.導(dǎo)入插件
假設(shè) page-a.vue 頁(yè)面需要用到 badge，則在 page-a.vue 的 script 節(jié)點(diǎn)下導(dǎo)入 badge 組件，如下：
import uniBadge from "@/components/uni-badge/uni-badge.vue"
4.定義插件
在 components 選項(xiàng)中定義 badge 組件，如下：
export default {
data() {
return { /* ... */ }
},
components: {
uniBadge
}
}提示：若從插件市場(chǎng)下載使用多個(gè)組件，則每個(gè)組件均需在 components 選項(xiàng)中定義，并以逗號(hào)分隔。
5.使用插件
使用組件
在 template 節(jié)點(diǎn)按照組件使用說(shuō)明，調(diào)用組件并傳值，如下：
<uni-badge text="1"></uni-badge> <uni-badge text="2" type="success" @click="bindClick"></uni-badge>
效果如下
總結(jié)
到此這篇關(guān)于Uniapp接入插件的3種方式的文章就介紹到這了,更多相關(guān)Uniapp接入插件內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)電腦虛擬鍵盤(pán)的操作，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-06-06
本文給大家匯總了一下png在IE瀏覽器下出現(xiàn)的各種問(wèn)題的解決方法，十分的實(shí)用，有需要的小伙伴可以參考下。2015-07-07
獲取下拉列表框的值是數(shù)組，split，$.inArray示例
獲取下拉列表框的值是數(shù)組，下面用product_id 去匹配是否包含在一個(gè)數(shù)組中，感興趣的朋友不要錯(cuò)過(guò)2013-11-11
ichart.js繪制虛線、平均分虛線效果的實(shí)現(xiàn)代碼
下面小編就為大家?guī)?lái)一篇ichart.js繪制虛線、平均分虛線效果的實(shí)現(xiàn)代碼。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考2016-05-05
gulpjs是一個(gè)前端構(gòu)建工具,gulpjs使用的是nodejs中stream來(lái)讀取和操作數(shù)據(jù)，其速度更快,有興趣的可以了解一下。2017-01-01
這篇文章主要介紹了Bootstrap表單布局樣式代碼的相關(guān)資料,非常不錯(cuò)具有參考借鑒價(jià)值，需要的朋友可以參考下2016-05-05
TypeScript中的交叉類(lèi)型和聯(lián)合類(lèi)型示例講解
交叉類(lèi)型簡(jiǎn)單來(lái)說(shuō)就是通過(guò)&符號(hào)將多個(gè)類(lèi)型進(jìn)行合并成一個(gè)類(lèi)型，然后用type來(lái)聲明新生成的類(lèi)型，聯(lián)合類(lèi)型和交叉類(lèi)型比較相似，聯(lián)合類(lèi)型通過(guò)|符號(hào)連接多個(gè)類(lèi)型從而生成新的類(lèi)型，本文就這兩個(gè)類(lèi)型結(jié)合示例代碼詳細(xì)講解，感興趣的朋友跟隨小編一起學(xué)習(xí)吧2022-12-12
這篇文章主要介紹了JS eval代碼快速解密實(shí)例解析,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-04-04
原生JavaScript實(shí)現(xiàn)隨機(jī)點(diǎn)名表
這篇文章主要為大家詳細(xì)介紹了原生JavaScript實(shí)現(xiàn)隨機(jī)點(diǎn)名表，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-01-01
uniapp中canvas繪制圖片內(nèi)容空白報(bào)錯(cuò)的原因及解決
最近有個(gè)需求就是要用canvas畫(huà)個(gè)分享的海報(bào),所以這里總結(jié)下,這篇文章主要給大家介紹了關(guān)于uniapp中canvas繪制圖片內(nèi)容空白報(bào)錯(cuò)的原因及解決方法,需要的朋友可以參考下2023-09-09