Uniapp がプラグインにアクセスする 3 つの方法
記事ディレクトリ
序文
ここでの学習例では uni-badge プラグインを使用していますが、他のプラグインも同様の方法で紹介されており、ほとんどのプラグインのドキュメントには使用方法も記載されています。
1. HBuilderX を使用してプラグインをインポートする
提示：这个方法需要登录HBuilderX
1. 必要なプラグインを見つけます
プラグイン マーケットで必要なプラグインを見つけます。たとえば、プラグインは uni-badge です。以下に示すように、「ダウンロード」をクリックして特定のプラグイン ページに入ります。
2.プラグインのインポート
[Use HBuilderX Import Plugin]ボタンをクリックし、インポートするプロジェクトを選択すると
、uni_modulesディレクトリが自動生成され、ダウンロードされます。
3. プラグインの使用
ページ上で直接使用でき、
次のような効果があります。
2. uni_modules を通じてプラグインを個別にインストールします
1. uni_module ディレクトリを作成します。
ここでは uni-ui モジュールを作成していないので、自分のプロジェクトの下にディレクトリ uni_module を作成する必要があります。
2. プラグインをダウンロードしてインストールします
次に、[Download Plugin ZIP] をクリックして、図に示すように、対応するコンポーネントをダウンロードします。
提示：这个【下载插件ZIP】按钮需要在非登录状态下才能出现
プラグインを解凍します
。 コンポーネント内の uni-badge ディレクトリを、プロジェクトの uni_modules に直接コピーします。
3. プラグインの使用
追加の参照や登録コンポーネントを必要とせずに、ページ上で直接使用できます。
効果は図に示されています。
3. コンポーネントを介してコンポーネントを個別にインストールする
1. コンポーネントディレクトリを作成します。
プロジェクト内にコンポーネントディレクトリを作成します
2. プラグインをダウンロードしてインストールします
プラグインをダウンロードする
プラグインを解凍する
コンポーネント内の uni-badge ディレクトリをプロジェクトのコンポーネントに直接コピーする
3. プラグインをインポートする
page-a.vue ページでバッジを使用する必要があると仮定して、次のように、page-a.vue のスクリプト ノードの下にバッジ コンポーネントをインポートします。
import uniBadge from "@/components/uni-badge/uni-badge.vue"
4. プラグインを定義する
次のように、コンポーネント オプションでバッジ コンポーネントを定義します。
export default {
data() {
return {
/* ... */ }
},
components: {
uniBadge
}
}
提示：若从插件市场下载使用多个组件，则每个组件均需在 components 选项中定义，并以逗号分隔。
5. プラグインの使用
コンポーネントの使用
テンプレート ノードで、次のようにコンポーネントの使用手順に従い、コンポーネントを呼び出して値を渡します。
<uni-badge text="1"></uni-badge>
<uni-badge text="2" type="success" @click="bindClick"></uni-badge>
効果は以下の通りです
