So führen Sie externe Methoden in Uni-App ein

Beim Einsatz der Uni-App-Entwicklung stoßen wir häufig auf Situationen, in denen wir externe Methoden verwenden müssen. Zu diesem Zeitpunkt können wir die Funktionalität durch die Einführung externer Methoden erweitern. In diesem Artikel wird erläutert, wie Uni-App externe Methoden einführt.

1. JS-Dateien einführen

Wir können eine neue JS-Datei im Seitenverzeichnis des Uni-App-Projekts erstellen, die externen Methoden schreiben, die wir in dieser Datei definieren, und sie dann auf den Seiten einführen, die auf die externen Methoden verweisen müssen Methoden. Das ist es. Beispielsweise haben wir im Seitenverzeichnis eine neue Datei mit dem Namen test.js erstellt und darin eine Methode definiert:

function testFunc() {
  console.log("这是一个测试方法");
}

Dann führen wir auf der Seite, die diese Methode verwenden muss, diese js-Datei ein:

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

Nach der Einführung Wir können diese Methode auf der Seite aufrufen:

testFunc();

2. Plug-Ins einführen

Neben der Einführung selbstdefinierter JS-Dateien können wir auch Funktionen durch die Einführung von Plug-Ins erweitern. uni-app unterstützt die Deklaration von Plug-ins in der Datei manifest.json und deren Einführung auf der Seite, auf der das Plug-in verwendet werden muss. Nehmen Sie als Beispiel die Einführung des Uni-Popup-Plug-Ins:

1. Deklarieren Sie das Plug-In in der Datei manifest.json:

"plugins": {
  "uniPopup": {
    "version": "^1.0.0",
    "provider": "dascom",
    "path": "uni-popup/uni-popup.vue"
  }
}

2. Führen Sie das Plug-In auf der Seite ein, auf der das Plug-In erforderlich ist :

import uniPopup from "@/uni-popup/uni-popup.vue"
Vue.component("uni-popup", uniPopup);

3. Verwenden Sie das Plug-in auf der Seite:

<uni-popup></uni-popup>

Es ist zu beachten, dass wir bei der Einführung inoffizieller Drittanbieter-Plug-ins das Feld „npm“ in der Datei manifest.json hinzufügen müssen Datei zum Deklarieren des Paketnamens und der Versionsnummer, zum Beispiel:

"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. Einführung von uni-simple-router

Zusätzlich zu den beiden oben genannten Methoden können wir auch uni-simple-router verwenden, um das Routing zu steuern und zu springen. Die Einführungsmethode lautet wie folgt:

1. Führen Sie uni-simple-router in main.js ein:

import router from '@/common/router.js';
Vue.use(router);

2. Konfigurieren Sie das Routing in der router.js-Datei:

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. Referenz auf Seiten, die Routing verwenden müssen:

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

Durch die obige Einführung können wir feststellen, dass es sehr einfach ist, externe Methoden in der Uni-App einzuführen. Sie müssen nur den geeigneten Weg auswählen, um sie einzuführen, um die Funktionserweiterung zu realisieren. Ich hoffe, dieser Artikel ist hilfreich für Sie.

Das obige ist der detaillierte Inhalt vonSo führen Sie externe Methoden in Uni-App ein. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!