ホームページ > ウェブフロントエンド > uni-app > uniappにjsファイルを導入する方法

uniappにjsファイルを導入する方法

王林
リリース: 2023-05-21 21:16:35
オリジナル
5839 人が閲覧しました

Uniapp が成長と開発を続けるにつれて、クロスプラットフォーム アプリケーションの開発に Uniapp を使用する開発者が増えています。開発プロセス中に、自分で作成した js ファイルを導入する必要がある場合があります。この記事ではUniappを使ったjsファイルの導入方法を紹介します。

1. ページに js ファイルを導入します

  1. ページ ディレクトリで js ファイルを導入する必要があるページを見つけます (例:index.vue)
  2. このページでは script タグ内で、次のコードを使用して js ファイルを導入します。
import xxx from '@/xxx.js' 
ログイン後にコピー
ログイン後にコピー

このうち、「@」記号はプロジェクトのルート ディレクトリを表し、xxx は js ファイルの名前を表します。自分で書いたファイル。ファイルがルート ディレクトリにない場合は、インポート パスを変更する必要があります。

  1. コード内で js ファイルのメソッドまたは変数を使用します。例:
xxx.doSomething();
ログイン後にコピー

2. js ファイルをコンポーネントに導入します

  1. js ファイルを導入する必要があるコンポーネント ファイルを見つけます (例: my-component.vue)
  2. コンポーネントの script タグで、次のコードを使用して js ファイルを導入します。
import xxx from '@/xxx.js' 
ログイン後にコピー
ログイン後にコピー

同様に、「@」記号はプロジェクトのルートディレクトリを表し、xxxは自分で作成したjsファイルの名前を表します。ファイルがルート ディレクトリにない場合は、インポート パスを変更する必要があります。

  1. js ファイルのメソッドまたは変数をコンポーネント コードで使用します (例:
mounted() {
  xxx.doSomething();
}
ログイン後にコピー

3. js ファイルをグローバルに導入します

    #) ##プロジェクトのルート ディレクトリで、vue.config.js ファイルを見つけます。
  1. 次のコードをファイルに追加します。
  2. configureWebpack: {
      externals: {
        'xxx': 'xxx'
      },
      resolve: {
        alias: {
          '@': path.resolve(__dirname, './src')
        }
      }
    }
    ログイン後にコピー
その中に、「xxx」: 'xxx'インポートされた JS ファイルの名前の最初の 'xxx' はプロジェクト内のファイルの名前で、2 番目の 'xxx' はグローバルワールドの名前です。'@' 記号はプロジェクトのルートも表しますディレクトリ。

    js ファイルを使用する必要がある場合は、次のコードを使用してそれを導入します:
  1. window.xxx.doSomething();
    ログイン後にコピー
    IV. 概要

    上記の 3 つの方法を通じて、独自の js ファイルを Uniapp に導入し、ページ、コンポーネント、またはグローバルで使用できます。 js ファイルを記述するときは、導入の失敗やコードの混乱を避けるために、名前とパスの仕様に注意する必要があります。

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

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート