uniapp パブリック メソッドによって導入された実装メソッドについて説明します。

モバイル インターネットの発展に伴い、APP の開発は大手企業で広く使用される手法の 1 つになりました。 APP の開発プロセスでは、ほとんどのアプリケーションでいくつかのパブリック メソッドが使用されますが、保守と管理を容易にするために、これらのパブリック メソッドをプラグインの形式でプロジェクトに導入できます。現在注目されているMVVMフレームワークの一つであるuniappは、プラグインを導入するのに非常に便利な方法を提供していますが、今回はuniappのパブリックメソッド導入の実装方法について解説します。

1. プラグイン プロジェクトの作成

まず、プラグイン プロジェクトを作成する必要があります (プラグイン プロジェクトは基本的に通常の uniapp プロジェクトと同じです)。プラグインの保存に使用される「uni_modules」という名前のプロジェクトをプロジェクト ディレクトリ フォルダー (存在しない場合) に作成する必要があります。

2. パブリック メソッドをプラグインとしてカプセル化する

プロジェクトにパブリック メソッドを記述します (以下の例としてトーストを使用します):

export default {
  toast: (msg, duration = 1500, position = "bottom") => {
    uni.showToast({
      title: msg,
      icon: "none",
      duration: duration,
      position: position
    });
  }
};

パブリック メソッドをカプセル化します。プラグインとしての手順は次のとおりです。

1. uni_modules フォルダーに .npmignore ファイルを作成し、.vscode を追加します。 、.git およびその他のフォルダーまたはファイルはパッケージ化されません。
2. uni_modules フォルダーの下に your-plugin という名前のフォルダーを作成します。your-plugin はプラグインの名前です。
3. your-plugin フォルダーに package.json ファイルを作成します。

{
  "name": "@uni/your-plugin",
  "version": "1.0.0",
  "main": "index.js",
  "description": "your description",
  "author": "your name",
  "license": "MIT",
  "keywords": ["uni", "plugin"]
}

このうち、

name フィールドは、@uni/プラグイン名 の形式でプラグインの名前を示します。 main フィールドはエントリ ファイルです。keywords タグにはキーワード uni と plugin が含まれている必要があります。

4. your-plugin フォルダーに index.js ファイルを作成します。

import toast from "./toast.js";

const Plugin = {
  toast
};

export default {
  install(Vue) {
    Object.keys(Plugin).forEach(key => {
      Vue.prototype[`$${key}`] = Plugin[key];
    });
  }
};

このうち、

toast はパブリック メソッドであり、Plugin オブジェクトには公開する必要があるすべてのパブリック メソッドが格納され、 install メソッドはプラグインのインストールに使用します。

3. npmjs にプッシュする

プラグインを npmjs にプッシュすると、他のプロジェクトから参照できるようになります。手順は次のとおりです。 npmjs 公式 Web サイト](https://www.npmjs.com/) (すでにアカウントをお持ちの場合は、この手順をスキップしてください)。

ターミナルで

npm adduser
1. コマンドを使用してログインします。
2. your-plugin フォルダー内のコマンド npm init
を使用して初期化します。
3. <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">npm init</pre><div class="contentsignin">ログイン後にコピー</div></div>プラグインを公開するには、コマンド npm publish
を使用します。

npm publish

4. プラグインを更新する必要がある場合は、バージョンを変更して再度公開してください。

4. プラグインの導入

5. パブリック メソッドを使用する必要があるプロジェクトでは、npmjs にプッシュされたプラグインを導入します。手順は次のとおりです:

プロジェクト ディレクトリに

manifest.json

という名前のファイルを作成し、次のコードを追加します。

{
  "app-plus": {
    "plugins": {
      "@uni/your-plugin": {
        "version": "^1.0.0",
        "provider": "<your provider>"
      }
    }
  }
}

1. このうち、version フィールドはプラグインのバージョン番号、
provider

フィールドはプラグイン プロバイダーです。プラグインを npmjs に公開するときに指定する必要があります。

パブリック メソッドを使用する必要があるページでは、次のコードを実行します。

import yourPlugin from "@uni/your-plugin";

Vue.use(yourPlugin);

5. パブリック メソッドを使用する

2. プラグインを導入した後、ページでパブリック メソッドを使用できます。以下では
toast

メソッドを使用します。例として作成されました:

this.$toast('Hello world!')

この時点で、uniapp public メソッドが正常に導入されました。

要約すると、パブリック メソッドをプラグインとしてカプセル化して npmjs にプッシュすると、プロジェクト開発の効率と管理の利便性が大幅に向上します。実際のプロジェクトでは、よく使われるいくつかのメソッドをプラグインとしてカプセル化し、上記の方法で導入できます。

以上がuniapp パブリック メソッドによって導入された実装メソッドについて説明します。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。