Discutez des méthodes de mise en œuvre introduites par les méthodes publiques Uniapp

Avec le développement de l'Internet mobile, le développement d'APP est devenu l'une des méthodes largement utilisées par les grandes entreprises. Dans le processus de développement d'APP, la plupart des applications impliqueront l'utilisation de certaines méthodes publiques. Afin de faciliter la maintenance et la gestion, nous pouvons introduire ces méthodes publiques dans le projet sous forme de plug-ins. L'un des frameworks MVVM les plus populaires à l'heure actuelle, uniapp, a fourni un moyen très pratique d'introduire des plug-ins. Cet article vous amènera à discuter de la méthode d'implémentation de l'introduction de la méthode publique uniapp.

1. Créer un projet de plug-in

Nous devons d'abord créer un projet de plug-in (les projets de plug-in sont fondamentalement les mêmes que les projets Uniapp ordinaires. Après avoir créé le projet, nous devons créer un dossier nommé "). uni_modules" dans le répertoire du projet (sinon), ce dossier est utilisé pour stocker les plug-ins.

2. Encapsulez la méthode publique sous forme de plug-in

Écrivez la méthode publique dans le projet (prenez toast comme exemple ci-dessous) :

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

Encapsulez la méthode publique sous forme de plug-in, les étapes sont les suivantes :

1. Dans uni_modules Créez un fichier <code>.npmignore sous le dossier code>, ajoutez .vscode, .git et autres dossiers ou fichiers sans emballage.
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. 使用公共方法

引入插件后即可在页面中使用公共方法，以下以刚刚创建的toastCréez un dossier nommé votre-plugin sous le dossier uni_modules, où votre-plugin est le nom du plug-in .

Créez un fichier package.json dans le dossier your-plugin.

this.$toast('Hello world!')

Parmi eux, le champ name est le nom du plug-in, au format @uni/plug-in name , et le champ main. En tant que fichier d'entrée, la balise keywords doit contenir les mots-clés uni et plugin.

Créez un fichier index.js dans le dossier votre-plugin.

rrreeeParmi eux, toast est une méthode publique, l'objet Plugin stocke toutes les méthodes publiques qui doivent être exposées, et install est utilisée pour installer les plugins. 🎜🎜3. Poussez vers npmjs🎜🎜Poussez le plug-in vers npmjs et il peut être référencé par d'autres projets. Les étapes sont les suivantes : 🎜🎜🎜Enregistrez un compte sur le [site officiel de npmjs](https://www. npmjs.com/) (si vous en avez déjà un) Si vous avez un compte, ignorez cette étape). 🎜Utilisez la commande npm adduser dans le terminal pour vous connecter. 🎜Utilisez la commande npm init dans le dossier your-plugin pour initialiser. rrreee

🎜Pour publier le plug-in, utilisez la commande npm submit.

rrreee

🎜Si vous devez mettre à jour le plug-in, modifiez simplement la version et publiez-la à nouveau.

🎜4. Introduire des plug-ins🎜🎜Dans les projets qui doivent utiliser des méthodes publiques, introduisez des plug-ins poussés vers npmjs. Les étapes sont les suivantes : 🎜🎜🎜Créez un fichier nommé . manifest dans le répertoire du projet. json, ajoutez le code suivant. rrreee🎜 Parmi eux, le champ version est le numéro de version du plug-in, et le champ provider est le fournisseur du plug-in , qui doit être spécifié lorsque le plug-in est publié sur npmjs. 🎜

🎜Dans la page où les méthodes publiques doivent être utilisées, exécutez le code suivant.

rrreee🎜5. Utiliser les méthodes publiques🎜🎜Après avoir introduit le plug-in, vous pouvez utiliser les méthodes publiques dans la page. Ce qui suit est un exemple de la méthode toast. créé : 🎜rrreee🎜Ça y est, nous avons implémenté avec succès l'introduction des méthodes publiques uniapp. 🎜🎜Pour résumer, encapsuler des méthodes publiques sous forme de plug-ins et les transmettre à npmjs peut considérablement améliorer l'efficacité du développement de projets et la commodité de la gestion. Dans les projets réels, nous pouvons encapsuler certaines méthodes fréquemment utilisées sous forme de plug-ins et les introduire de la manière ci-dessus. 🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!