Besprechen Sie die Implementierungsmethoden, die durch öffentliche Uniapp-Methoden eingeführt werden

Mit der Entwicklung des mobilen Internets ist die Entwicklung von APPs zu einer der von großen Unternehmen weit verbreiteten Methoden geworden. Im Prozess der APP-Entwicklung werden in den meisten Anwendungen einige öffentliche Methoden verwendet. Um die Wartung und Verwaltung zu erleichtern, können wir diese öffentlichen Methoden in Form von Plug-Ins in das Projekt einführen. Eines der derzeit beliebtesten MVVM-Frameworks, Uniapp, bietet eine sehr praktische Möglichkeit, Plug-Ins einzuführen. In diesem Artikel wird die Implementierungsmethode der Einführung öffentlicher Uniapp-Methoden erläutert.

1. Erstellen Sie ein Plug-in-Projekt

Zuerst müssen wir ein Plug-in-Projekt erstellen (Plug-in-Projekte sind im Grunde dasselbe wie normale Uniapp-Projekte). Nach dem Erstellen des Projekts müssen wir einen Ordner mit dem Namen „ erstellen. uni_modules“ im Projektverzeichnis (falls nicht), dieser Ordner wird zum Speichern von Plug-Ins verwendet.

2. Kapseln Sie die öffentliche Methode als Plug-In.

Schreiben Sie die öffentliche Methode in das Projekt (nehmen Sie Toast als Beispiel unten):

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

Kapseln Sie die öffentliche Methode als Plug-In. Die Schritte sind wie folgt:

1. Erstellen Sie in uni_modules eine Datei <code>.npmignore im Ordner code>, fügen Sie .vscode, .git und andere hinzu Ordner oder Dateien ohne Verpackung.
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即可供其他项目引用，步骤如下：

1. 在[npmjs官网](https://www.npmjs.com/)上注册账号（如果已有账号则略过该步骤）。
2. 在终端使用npm adduser命令登录。
3. 在your-plugin文件夹下使用命令npm init初始化。

npm init

4. 发布插件，使用命令npm publish。

npm publish

5. 如果需要更新插件，修改版本后再次发布即可。

4. 引入插件

在需要使用公共方法的项目中，引入推送到npmjs的插件，步骤如下：

1. 在项目目录下创建一个名为manifest.json的文件，添加如下代码。

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

其中，version字段为插件的版本号，provider字段为插件提供者，需要在插件发布到npmjs时指定。

2. 在需要使用公共方法的页面中，执行如下代码。

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

Vue.use(yourPlugin);

5. 使用公共方法

引入插件后即可在页面中使用公共方法，以下以刚刚创建的toastErstellen Sie einen Ordner mit dem Namen your-plugin unter dem Ordner uni_modules, wobei your-plugin der Name des Plug-ins ist .

Erstellen Sie eine package.json-Datei im Ordner your-plugin.

this.$toast('Hello world!')

Unter diesen ist das Feld name der Name des Plug-ins im Format @uni/plug-in name und das Feld main Als Eintragsdatei muss das Tag keywords die Schlüsselwörter uni und plugin enthalten.

Erstellen Sie eine index.js-Datei im Ordner your-plugin.

rrreeeUnter diesen ist toast eine öffentliche Methode, das Plugin-Objekt speichert alle öffentlichen Methoden, die verfügbar gemacht werden müssen, und install-Methode wird zum Installieren von Plugins verwendet. 🎜🎜3. Push an npmjs🎜🎜Push das Plug-in an npmjs und es kann von anderen Projekten referenziert werden: 🎜🎜🎜Registrieren Sie ein Konto auf [npmjs offizieller Website](https://www. npmjs.com/) (falls Sie bereits eines haben) Wenn Sie ein Konto haben, überspringen Sie diesen Schritt). 🎜Verwenden Sie den Befehl npm adduser im Terminal, um sich anzumelden. 🎜Verwenden Sie zum Initialisieren den Befehl npm init im Ordner your-plugin. rrreee

🎜Um das Plug-in zu veröffentlichen, verwenden Sie den Befehl npm publizieren.

rrreee

🎜Wenn Sie das Plug-in aktualisieren müssen, ändern Sie einfach die Version und veröffentlichen Sie es erneut.

🎜4. Plug-Ins einführen🎜🎜In Projekten, die öffentliche Methoden verwenden müssen, führen Sie Plug-Ins ein, die an npmjs übertragen werden. Die Schritte sind wie folgt: 🎜🎜🎜Erstellen Sie eine Datei mit dem Namen Fügen Sie im Projektverzeichnis in der Datei json den folgenden Code hinzu. rrreee🎜 Unter diesen ist das Feld version die Versionsnummer des Plug-ins und das Feld provider der Plug-in-Anbieter , die angegeben werden muss, wenn das Plug-in in npmjs veröffentlicht wird. 🎜

🎜Führen Sie auf der Seite, auf der öffentliche Methoden verwendet werden müssen, den folgenden Code aus.

rrreee🎜5. Verwenden Sie öffentliche Methoden🎜🎜Nach der Einführung des Plug-Ins können Sie öffentliche Methoden auf der Seite verwenden. Das Folgende ist ein Beispiel für die Methode toast erstellt: 🎜rrreee🎜Das war's, wir haben die Einführung öffentlicher Uniapp-Methoden erfolgreich umgesetzt. 🎜🎜Zusammenfassend lässt sich sagen, dass die Kapselung öffentlicher Methoden als Plug-Ins und deren Weiterleitung an npmjs die Effizienz der Projektentwicklung und den Komfort der Verwaltung erheblich verbessern kann. In tatsächlichen Projekten können wir einige häufig verwendete Methoden als Plug-Ins kapseln und auf die oben beschriebene Weise einführen. 🎜

Das obige ist der detaillierte Inhalt vonBesprechen Sie die Implementierungsmethoden, die durch öffentliche Uniapp-Methoden eingeführt werden. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!