Comment introduire des méthodes externes dans uni-app

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("这是一个测试方法");
}

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

import { testFunc } from "@/pages/test.js"

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

testFunc();

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"
  }
}

2. 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);

3. Utilisez le plug-in dans la page :

<uni-popup v-model="isShow"></uni-popup>

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"
    }
  }
}

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);

2. 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

3. Référence dans les pages qui doivent utiliser le routage :

import router from "@/common/router.js"

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!