uniappにjsを導入する方法-uni-app-php.cn

uniappにjsを導入する方法

王林

リリース： 2023-05-22 11:27:37

オリジナル

11649 人が閲覧しました

モバイルアプリケーションの開発では、開発者の作業負荷を大幅に軽減するために、フロントエンドテクノロジが継続的に改善され、クロスプラットフォームテクノロジがますます登場しています。優れたクロスプラットフォーム開発フレームワークである UniApp を使用すると、一連のコードを使用し、それらを複数のプラットフォームでコンパイルして、高性能で拡張性と保守性が高いアプリケーションを取得できます。 UniApp の開発プロセスでは、さまざまな UI コンポーネントの使用を習得するだけでなく、JS ファイルをプロジェクトに導入する方法を理解する必要もあります。この記事ではUniAppにJSを導入する方法を紹介します。

1. JS ファイルを vue ファイルに直接導入する

UniApp 開発では Vue フレームワークを使用するため、JS ファイルを .vue ファイルに直接導入できます。 JS ファイルをプロジェクトのルートディレクトリに保存することも、src ディレクトリに新しい js フォルダーまたは他のディレクトリを作成して JS ファイルを保存することもできます。たとえば、src ディレクトリに libs フォルダーを作成し、そのフォルダーに JS コードを保存する新しい util.js ファイルを作成して、それを .vue ファイルの import ステートメントを通じて導入できます。

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

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

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

ログイン後にコピー

上記のコードでは、import ステートメントを通じて /src/libs/util.js ファイルにあるコードを導入し、data() メソッドで対応する関数を呼び出します。このうち、@はsrcディレクトリを表します。

2. main.js に JS ファイルをグローバルに導入する

UniApp の main.js ファイルはエントリファイルであり、このファイルに導入された JS コードはアプリケーション全体で有効になります。。グローバルにインポートされた JS ファイルを、src ディレクトリのassets/js フォルダーに保存できます。例:

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

export default util

ログイン後にコピー

その後、main.js ファイルの import ステートメントを使用してそれらをインポートします:

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

ログイン後にコピー

上記のコードでは、Vue.prototype.$util = util を使用して、util.js ファイルを Vue コンポーネントにグローバルに登録します。その後、util.js ファイル内のコードは、.vue ファイル内の this.$util.getMessage() を通じて直接呼び出すことができます。

3. uni.require メソッドを使用して JS ファイルを導入する

UniApp では、Vue コンポーネントではない JS ファイルを導入する必要がある場合、uni.require メソッドを使用できます。それを紹介するために。このメソッドは導入された JS コードを返し、module.exports を通じてコード内の関数、オブジェクト、またはクラスをエクスポートできます。たとえば、src ディレクトリに新しい common.js ファイルを作成して、いくつかのパブリック関数または変数を保存します:

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

module.exports = common

ログイン後にコピー

次に、そのファイルを他のファイルに導入します:

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

ログイン後にコピー

上記のコードでは、 uni.require メソッドを使用して common.js ファイルにコードを導入し、onLoad 関数でメソッドまたは変数を呼び出します。 uni.require メソッドのパスは @/ ディレクトリからの相対パスを表し、絶対パスの場合は / で始まる必要があることに注意してください。

まとめ

UniAppでは上記3つの方法でJSファイルを導入できます。特定の運用では、実際のニーズとプロジェクトの特性に基づいて選択できます。どの方法を選択する場合でも、JS の基本的な知識を理解し、コードのモジュール化を適切に実行してコードの保守性と再利用性を向上させる必要があります。この記事が UniApp アプリケーション開発の改善に役立つことを願っています。

以上がuniappにjsを導入する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。