So führen Sie js in uniapp ein

Mit der Entwicklung mobiler Anwendungen wurde die Front-End-Technologie kontinuierlich verbessert, um die Arbeitsbelastung der Entwickler erheblich zu reduzieren, und es sind immer mehr plattformübergreifende Technologien entstanden. Als hervorragendes plattformübergreifendes Entwicklungsframework ermöglicht uns UniApp die Verwendung einer Reihe von Codes und deren Kompilierung auf mehreren Plattformen, um leistungsstarke, einfach skalierbare und wartbare Anwendungen zu erhalten. Während des UniApp-Entwicklungsprozesses müssen wir nicht nur die Verwendung verschiedener UI-Komponenten beherrschen, sondern auch verstehen, wie JS-Dateien in das Projekt eingefügt werden. In diesem Artikel werde ich vorstellen, wie man JS in UniApp einführt.

1. JS-Dateien direkt in die Vue-Datei einführen

In der UniApp-Entwicklung verwenden wir das Vue-Framework, sodass wir JS-Dateien direkt in die .vue-Datei einführen können. Wir können die JS-Datei im Stammverzeichnis des Projekts speichern oder einen neuen js-Ordner oder ein anderes Verzeichnis im src-Verzeichnis erstellen, um die JS-Datei zu speichern. Beispielsweise können wir einen libs-Ordner im src-Verzeichnis erstellen und im Ordner eine neue util.js-Datei zum Speichern von JS-Code erstellen und diese dann über die Importanweisung in der .vue-Datei einführen:

<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

<script>
import util from "@/libs/util.js"

export default {
  data() {
    return {
      message: util.getMessage()
    }
  }
}
</script>

# 🎜🎜#Im obigen Code führen wir den Code in der Datei /src/libs/util.js über die Importanweisung ein und rufen die entsprechende Funktion in der Methode data() auf. Unter diesen repräsentiert @ das src-Verzeichnis.

2. JS-Dateien global in main.js einführen

Die main.js-Datei in UniApp ist die Eingabedatei, und der in dieser Datei eingeführte JS-Code wird durchgehend verwendet die im Antrag wirksame Datei. Wir können die global importierten JS-Dateien im Ordner asset/js im Verzeichnis src speichern, zum Beispiel:

// src/assets/js/util.js
const util = {
  getMessage() {
    return "Hello World!"
  }
}

export default util

und sie dann über die Importanweisung in der Datei main.js einführen:

// main.js
import Vue from 'vue'
import App from './App'

import util from './assets/js/util.js'

Vue.config.productionTip = false

Vue.prototype.$util = util

App.mpType = 'app'

const app = new Vue({
  ...App
})
app.$mount()

Im obigen Code verwenden wir Vue.prototype.$util = util, um die Datei util.js global in der Vue-Komponente zu registrieren. Danach kann der Code in der Datei util.js direkt über this.$util.getMessage() in der Datei .vue aufgerufen werden.

3. Verwenden Sie die uni.require-Methode, um JS-Dateien einzuführen.

Wenn Sie in UniApp eine JS-Datei einführen müssen, die keine Vue-Komponente ist, können Sie die verwenden uni.require-Methode, um es einzuführen. Diese Methode gibt den eingeführten JS-Code zurück und kann die Funktionen, Objekte oder Klassen im Code über module.exports exportieren. Erstellen Sie beispielsweise eine neue common.js-Datei im src-Verzeichnis, um einige öffentliche Funktionen oder Variablen zu speichern:

// src/common.js
const common = {
  PI: 3.14,
  
  sayHello(name) {
    return `Hello ${name}!`
  }
}

module.exports = common

Führen Sie die Datei dann in andere Dateien ein:

// src/pages/index/index.vue
<script>
export default {
  onLoad() {
    const common = uni.require('@/common.js')
    console.log(common.PI) // 输出3.14
    console.log(common.sayHello('UniApp')) // 输出Hello UniApp!
  }
}
</script>

Im Im obigen Code verwenden wir die Methode uni.require, um den Code in die Datei common.js einzuführen und die Methoden oder Variablen in der Funktion onLoad aufzurufen. Beachten Sie, dass der Pfad in der uni.require-Methode einen relativen Pfad relativ zum @/-Verzeichnis darstellt. Wenn es sich um einen absoluten Pfad handelt, muss er mit / beginnen.

Zusammenfassung

In UniApp können wir die oben genannten drei Methoden verwenden, um JS-Dateien einzuführen. Bei bestimmten Vorgängen kann die Auswahl auf der Grundlage tatsächlicher Bedürfnisse und Projektmerkmale erfolgen. Egal für welche Methode wir uns entscheiden, wir müssen einige Grundkenntnisse von JS verstehen und bei der Code-Modularisierung gute Arbeit leisten, um die Wartbarkeit und Wiederverwendbarkeit des Codes zu verbessern. Ich hoffe, dieser Artikel kann Ihnen helfen, UniApp-Anwendungen besser zu entwickeln.

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