前言

我這里的學習例子使用uni-badge這個插件，其他的插件也是類似的引入方式，大多數(shù)插件文檔中也包含使用方法。

一、使用HBuilderX導(dǎo)入插件

提示：這個方法需要登錄HBuilderX

1.找到所需插件

在插件市場找到自己所需插件，我舉例插件為uni-badge。點擊下載進入到具體插件頁面，如下所示

2.導(dǎo)入插件

點擊【使用HBuilderX導(dǎo)入插件】按鈕，然后選擇需要導(dǎo)入的項目

之后，自動生成uni_modules目錄，并下載

3.使用插件

直接就可以在頁面中使用了

效果如下：

二、通過uni_modules單獨安裝插件

1.創(chuàng)建uni_module目錄

我這邊是沒有創(chuàng)建uni-ui模塊的，則需要現(xiàn)在自己項目下創(chuàng)建目錄uni_module

2.下載并安裝插件

然后點擊【下載插件ZIP】下載相應(yīng)的組件，如圖所示

提示：這個【下載插件ZIP】按鈕需要在非登錄狀態(tài)下才能出現(xiàn)

解壓插件

將components中的uni-badge目錄直接復(fù)制到項目的uni_modules中

3.使用插件

可以直接在頁面上使用了，無需另外的引用和注冊組件

效果如圖

三、通過components單獨安裝組件

1.創(chuàng)建components目錄

在項目中創(chuàng)建components目錄

2.下載并安裝插件

下載插件

解壓插件

將components中的uni-badge目錄直接復(fù)制到項目的components中

3.導(dǎo)入插件

假設(shè) page-a.vue 頁面需要用到 badge，則在 page-a.vue 的 script 節(jié)點下導(dǎo)入 badge 組件，如下：

import uniBadge from "@/components/uni-badge/uni-badge.vue"

4.定義插件

在 components 選項中定義 badge 組件，如下：

export default {  
    data() {  
        return { /* ... */ }  
    },  
    components: {  
        uniBadge  
    }  
}

提示：若從插件市場下載使用多個組件，則每個組件均需在 components 選項中定義，并以逗號分隔。

5.使用插件

使用組件

在 template 節(jié)點按照組件使用說明，調(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)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論