Maison > interface Web > uni-app > Comment introduire des méthodes externes dans uni-app

Comment introduire des méthodes externes dans uni-app

PHPz
Libérer: 2023-04-23 09:24:51
original
1899 Les gens l'ont consulté

Dans le processus d'utilisation du développement uni-app, nous rencontrons souvent des situations où nous devons utiliser des méthodes externes. À l’heure actuelle, nous pouvons étendre les fonctionnalités en introduisant des méthodes externes. Cet article présentera comment uni-app introduit les méthodes externes.

1. Introduire les fichiers JS

Nous pouvons créer un nouveau fichier js dans le répertoire pages du projet uni-app, écrire les méthodes externes que nous définissons dans ce fichier, puis les introduire dans les pages qui doivent référencer les fichiers externes. méthodes. C'est tout. Par exemple, nous avons créé un nouveau fichier nommé test.js dans le répertoire pages et y avons défini une méthode :

function testFunc() {
  console.log("这是一个测试方法");
}
Copier après la connexion

Ensuite, dans la page qui doit utiliser cette méthode, introduisez ce fichier js :

import { testFunc } from "@/pages/test.js"
Copier après la connexion

Après l'introduction, Nous pouvons appeler cette méthode sur la page :

testFunc();
Copier après la connexion

2. Introduire des plug-ins

En plus d'introduire des fichiers JS auto-définis, nous pouvons également étendre les fonctions en introduisant des plug-ins. uni-app prend en charge la déclaration des plug-ins dans le fichier manifest.json et leur introduction dans la page où le plug-in doit être utilisé. Prenons l'exemple de l'introduction du plug-in uni-popup :

  1. Déclarez le plug-in dans le fichier manifest.json :
"plugins": {
  "uniPopup": {
    "version": "^1.0.0",
    "provider": "dascom",
    "path": "uni-popup/uni-popup.vue"
  }
}
Copier après la connexion
  1. Introduisez le plug-in dans la page où le plug-in est requis :
import uniPopup from "@/uni-popup/uni-popup.vue"
Vue.component("uni-popup", uniPopup);
Copier après la connexion
  1. Utilisez le plug-in dans la page :
<uni-popup v-model="isShow"></uni-popup>
Copier après la connexion

Il convient de noter que si nous introduisons des plug-ins tiers non officiels, nous devons ajouter le champ "npm" dans le manifest.json pour déclarer le nom du package et le numéro de version, par exemple :

"dependencies": {
  "uni-popup": "0.0.1"
},
"plugins": {
  "uniPopup": {
    "version": "^1.0.0",
    "provider": "npm",
    "path": "uni-popup/uni-popup.vue",
    "npm": {
      "name": "uni-popup",
      "version": "^0.0.1"
    }
  }
}
Copier après la connexion

3. Présentez uni-simple-router

En plus des deux méthodes ci-dessus, nous pouvons également utiliser uni-simple-router pour contrôler et sauter le routage. La méthode d'introduction est la suivante :

  1. Introduire uni-simple-router dans main.js :
import router from '@/common/router.js';
Vue.use(router);
Copier après la connexion
  1. Configurer le routage dans le fichier router.js :
import Vue from 'vue'
import Router from 'uni-simple-router'

Vue.use(Router)

const router = new Router({
    routes: [...]
})
router.beforeEach((to, from, next) => {
    ...
    next()
})
router.afterEach((to, from) => {
    ...
})

export default router
Copier après la connexion
  1. Référence dans les pages qui doivent utiliser le routage :
import router from "@/common/router.js"
Copier après la connexion

Grâce à l'introduction ci-dessus, nous pouvons constater qu'il est très simple d'introduire des méthodes externes dans uni-app. Il vous suffit de choisir la manière appropriée de les introduire pour réaliser l'expansion des fonctions. J'espère que cet article vous sera utile.

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!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal