uniapp がネイティブ開発を統合する方法

モバイル アプリケーション市場の継続的な発展に伴い、クロスプラットフォーム アプリケーションの開発もトレンドになっています。 Uniapp は、市場で最も広く使用されているクロスプラットフォーム フレームワークの 1 つであり、その優れた互換性、高い開発効率、簡単な使用により開発者に愛されています。ただし、一部のニーズがよりカスタマイズされている場合、または一部のネイティブ関数を呼び出す必要がある場合、純粋な Uniapp を使用してアプリケーションを開発するだけではニーズを満たすことができない場合があります。現時点では、Uniapp とネイティブを混合開発に使用する必要があります。これにより、一部のカスタマイズされたニーズを満たすだけでなく、Uniapp 開発の効率も最大限に活用できます。以下では、実際の開発経験に基づいて、Uniapp がネイティブ開発をどのように統合しているかを詳しく紹介します。

1. 事前準備

ネイティブ開発の統合を開始する前に、ローカルの Android および iOS 開発環境が構成され、それらの使用に習熟していることを確認する必要があります。同時に、Uniapp フレームワークの使用に慣れ、基本的な開発操作をマスターする必要もあります。

2. ネイティブプラグインの導入

Uniapp開発では、ネイティブプラグインを導入することでネイティブ機能を利用することができます。 Uniapp にネイティブ プラグインを導入するには、プラグインを自分で開発する方法と、市販のプラグインを使用する方法の 2 つがあります。

1. 独自のプラグインを開発する

ネイティブ プラグインの開発は難しくなく、さまざまなネイティブ開発ドキュメントに従ってコードを記述することができます。ここでは、より一般的な例として、デバイス情報の取得について説明します。

Android では、次のコードを通じてデバイス情報を取得できます:

import android.content.Context;
import android.content.pm.PackageInfo;
import android.content.pm.PackageManager;

public class DeviceInfoUtil {

    public static String getVersionName(Context context) {
        PackageManager packageManager = context.getPackageManager();
        try {
            PackageInfo packageInfo = packageManager.getPackageInfo(context.getPackageName(), 0);
            return packageInfo.versionName;
        } catch (PackageManager.NameNotFoundException e) {
            e.printStackTrace();
        }
        return "";
    }
}

iOS では、次のコードを通じてデバイス情報を取得できます:

#import <UIKit/UIKit.h>

@interface DeviceInfoUtil : NSObject

+ (NSString *)getUUID;

@end

@implementation DeviceInfoUtil

+ (NSString *)getUUID {
    NSString *uuid = [[[UIDevice currentDevice] identifierForVendor] UUIDString];
    return uuid;
}

@end

書き込み ネイティブ関数を作成したら、それをプラグインにパッケージ化し、Uniapp マーケットに公開する必要があります。次に、Uniappにネイティブプラグインを導入して使用します。具体的な操作は以下の通りです。

(1) まず、アプリケーションプロジェクトのmanifest.jsonファイルにネイティブプラグインへの参照を追加します。

"app-plus": {
    // 其他配置
    "plugins": {
      "device": {
        "version": "1.0.0",
        "provider": "xx"
      }
    }
  }

このうち、deviceはプラグイン名、バージョンはプラグインのバージョン、プロバイダーはプラグインプロバイダーの場合です。

(2) Vue.js 構文を使用して JS ファイルを定義し、ファイル内のプラグイン関数を呼び出してエクスポートします。

const device = uni.requireNativePlugin('device')

function getVersionName() {
    return device.getVersionName()
}

export default {
    getVersionName
}

このうち、uni.requireNativePlugin('device')はリファレンス プラグイン構文、getVersionName() はバージョン番号を取得するためにプラグインで定義した関数です。

2. 市販のプラグインを使用する

自社でプラグインを開発することに加えて、Uniapp マーケットで他の開発者が開発したネイティブ プラグインをダウンロードして、必要なプラグインを使用することもできます。ネイティブ関数。具体的な操作は次のとおりです。

(1) 必要なプラグインを含むカスタム コンポーネントをアプリケーション プロジェクトのmanifest.json ファイルに追加します。

"usingComponents": {
    "xxx": "@/components/xxx/xxx"
  }

ここで、xxx は必要なプラグインを表します。ネイティブ プラグイン名、@/components/xxx/xxx は、プロジェクト内でプラグイン ファイルが配置されている相対パスを示します。

(2) Vue.js 構文の JS ファイルにプラグインを使用するコードを記述します。

import xxx from '@/components/xxx/xxx'

export default {
    data() {
        return {
            versionName: ''
        }
    },
    methods: {
        getVersion() {
            this.versionName = xxx.getVersionName()
        }
    }
}

ここで、xxx はプラグインの名前であり、 Vue.js 構文のメソッドオブジェクト プラグインのバージョン番号を取得する関数 getVersion() を使用し、その中でプラグインのメソッド xxx.getVersionName() を呼び出してバージョン番号を取得します。

3. Uniapp とのネイティブ対話

前の手順で、ネイティブ プラグインを正常に統合しました。ただし、開発中に、ネイティブと Uniapp の間の対話を実装する必要がある場合もあります。たとえば、ユーザーがネイティブ コントロールに応答する場合は、Uniapp ページに切り替える必要があり、Uniapp ページがネイティブ関数を呼び出す必要がある場合は、ネイティブ コードを呼び出す必要があります。現時点では、それを実現するにはUniappが提供するAPIを使用する必要があります。

1. ネイティブ コードの呼び出し

Uniapp でネイティブ コードを呼び出すには、次のコードを使用できます。

if (uni.os.android) {
    // Android端
    let intent = new Intent(Intent.ACTION_VIEW)
    intent.setClassName("com.package.name", "com.package.name.MainActivity")
    intent.addFlags(Intent.FLAG_ACTIVITY_NEW_TASK)
    uni.context.startActivity(intent)
} else if (uni.os.ios) {
    // iOS端
    try {
        window.webkit.messageHandlers.nativeMethod.postMessage(params)
    } catch (e) {
        console.log(e)
    }
}

その中で、 Android 側では Android API Intent クラスを使用し、そのジャンプ ターゲットと送信する必要があるパラメータを設定する必要があります。iOS 側で呼び出す場合は、まず messageHandlers 属性が存在するかどうかを確認してから、メッセージをネイティブに送信する必要があります。 postMessage メソッドを使用してパラメータを JSON 形式に変換する必要があります。

2. ネイティブ メッセージの受信

ネイティブから Uniapp にデータを転送する必要がある場合、ネイティブが関数を実行してデータを渡します。ネイティブ データを受信し、アプリケーション内でそれを適切に処理するには、共通関数nativeCallbackをVue.js構文ファイルで定義する必要があります。

以下は関数を定義するコードです。

export default {
    data() {
        return {
            versionName: ''
        }
    },
    mounted() {
        // 定义原生回调函数
        window.nativeCallback = (data) => {
            console.log(data)
        }
    }
}

このうち、window.nativeCallbackは定義したコールバック関数の名前、dataはネイティブから渡されるデータです。マウントされた関数では、コールバック関数をグローバル関数として定義し、データを受信する必要がある場所でそれを使用できます。

上記の方法により、ネイティブ プラグインを使用し、Uniapp でネイティブ コードを呼び出して、さまざまなシナリオのニーズを満たすことができます。

4. 概要

この記事では、Uniapp でネイティブ開発を統合する手順と、ネイティブ プラグインやダイアログ ボックスなどのネイティブ機能の使用方法を詳しく紹介します。よりカスタマイズされた機能を使用する必要がある開発者、またはアプリケーションを迅速に開発する必要がある開発者は、実際のニーズに応じてさまざまなネイティブ プラグインまたは API を使用してニーズを満たすことができます。同時に、ネイティブ プラグインを開発する場合は、関連する知識をよりよく習得するために、さまざまなネイティブ開発ドキュメントを参照することをお勧めします。

以上がuniapp がネイティブ開発を統合する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。