Comment introduire js dans uniapp

Avec le développement des applications mobiles, afin de réduire considérablement la charge de travail des développeurs, la technologie front-end a été continuellement améliorée et de plus en plus de technologies multiplateformes ont émergé. En tant qu'excellent framework de développement multiplateforme, UniApp nous permet d'utiliser un ensemble de codes et de les compiler sur plusieurs plateformes pour obtenir des applications performantes, facilement évolutives et maintenables. Au cours du processus de développement d'UniApp, nous devons non seulement maîtriser l'utilisation de divers composants de l'interface utilisateur, mais également comprendre comment introduire les fichiers JS dans le projet. Dans cet article, je vais vous présenter comment introduire JS dans UniApp.

1. Introduisez directement les fichiers JS dans le fichier vue

Dans le développement UniApp, nous utilisons le framework Vue, nous pouvons donc introduire directement les fichiers JS dans le fichier .vue. Nous pouvons stocker le fichier JS dans le répertoire racine du projet, ou créer un nouveau dossier js ou un autre répertoire dans le répertoire src pour stocker le fichier JS. Par exemple, nous pouvons créer un dossier libs dans le répertoire src et créer un nouveau fichier util.js dans le dossier pour stocker le code JS, puis l'introduire via l'instruction import dans le fichier .vue :

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

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

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

In Dans le ci-dessus, nous introduisons le code situé dans le fichier /src/libs/util.js via l'instruction import et appelons la fonction correspondante dans la méthode data(). Parmi eux, @ représente le répertoire src.

2. Introduisez globalement les fichiers JS dans main.js

Le fichier main.js dans UniApp est le fichier d'entrée, et le code JS introduit dans ce fichier prendra effet dans l'ensemble de l'application. Nous pouvons stocker le fichier JS importé globalement dans le dossier assets/js sous le répertoire src, par exemple :

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

export default util

Ensuite, introduisez-le via l'instruction import dans le fichier main.js :

// 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()

Dans le code ci-dessus, nous passons Vue.prototype.$util = util pour enregistrer globalement le fichier util.js dans le composant Vue. Après cela, le code du fichier util.js peut être appelé directement via this.$util.getMessage() dans le fichier .vue.

3. Utilisez la méthode uni.require pour introduire les fichiers JS

Dans UniApp, si vous devez introduire un fichier JS qui n'est pas un composant Vue, vous pouvez utiliser la méthode uni.require pour l'introduire. Cette méthode renvoie le code JS importé et peut exporter les fonctions, objets ou classes du code via module.exports. Par exemple, créez un nouveau fichier common.js dans le répertoire src pour stocker certaines fonctions ou variables publiques :

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

module.exports = common

Introduisez ensuite le fichier dans d'autres fichiers :

// 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>

Dans le code ci-dessus, nous utilisons la méthode uni.require pour introduire common.js et appelez les méthodes ou variables dans la fonction onLoad. Notez que le chemin dans la méthode uni.require représente un chemin relatif par rapport au répertoire @/. S'il s'agit d'un chemin absolu, il doit commencer par /.

Résumé

Dans UniApp, nous pouvons utiliser les trois méthodes ci-dessus pour introduire les fichiers JS. Dans des opérations spécifiques, la sélection peut être effectuée sur la base des besoins réels et des caractéristiques du projet. Quelle que soit la méthode que nous choisissons, nous devons comprendre certaines connaissances de base de JS et faire du bon travail dans la modularisation du code pour améliorer la maintenabilité et la réutilisation du code. J'espère que cet article pourra vous aider à mieux développer des applications UniApp.

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!