uni-appに外部メソッドを導入する方法

ユニアプリ開発を使用するプロセスでは、外部メソッドを使用する必要がある状況によく遭遇します。このとき、外部メソッドを導入することで機能を拡張できます。この記事では、uni-app が外部メソッドを導入する方法を紹介します。

1. JS ファイルの紹介

uni-app プロジェクトのページ ディレクトリに新しい js ファイルを作成し、このファイルに定義する外部メソッドを記述し、必要に応じて実行できます。外部メソッドを参照するページに導入するだけです。たとえば、pages ディレクトリに test.js という名前の新しいファイルを作成し、その中にメソッドを定義しました。

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

次に、このメソッドを使用する必要があるページにこの js ファイルを導入します。

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

インポート後、ページ内でこのメソッドを呼び出すことができます:

testFunc();

2. プラグインの導入

自己定義の JS ファイルの導入に加えて、プラグインをインポートすることもできます。機能を拡張するために使用されます。 uni-app は、manifest.json ファイルでのプラグインの宣言と、プラグインを使用する必要があるページへのプラグインの導入をサポートしています。例として uni-popup プラグインの導入を取り上げます。

1. manifest.json ファイルでプラグインを宣言します。

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

2. 導入プラグインを使用する必要があるページにプラグインを追加します:

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

3. ページでプラグインを使用します:

<uni-popup v-model="isShow"></uni-popup>

非公式のサードパーティ プラグインを導入する場合は、manifest.json に追加する必要があることに注意してください。ファイルに「npm」フィールドを追加して、パッケージ名とバージョン番号を宣言します。例:

"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. uni-simple-router の導入

上記 2 つの方法に加えて、uni-simple-router を使用してルーティング制御とジャンプを実装することもできます。導入方法は以下の通りです。

1. main.jsにuni-simple-routerを導入します:

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

2. router.jsファイルにルーティングを設定します:

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. ルーティングを使用する必要があるページ内の引用:

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

上記の紹介を通じて、外部メソッドを導入するのが非常に簡単であることがわかります。 uni-app は、適切な導入方法を選択するだけで機能拡張が可能です。この記事がお役に立てば幸いです。

以上がuni-appに外部メソッドを導入する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。