ユニアプリ向けの Android ネイティブプラグイン開発

プラグインの紹介

1.1 HBuilderX で提供される機能がアプリの機能要件を満たしておらず、Andorid/iOS を使用したネイティブ開発を通じて実装する必要がある場合、アプリのオフライン SDK を使用してネイティブプラグインを開発し、ネイティブ機能を拡張できます。

1.2 プラグインにはモジュールモードとコンポーネントモードの 2 種類があります

モジュールモード: 機能拡張。フォームに UI コントロールは埋め込まれません。歩数計 API の呼び出しなど、ほとんどのプラグインはこのカテゴリに分類されます。コードは、js を介して require し、プラグインオブジェクトのメソッドを呼び出すことによって記述されます。いくつかのポップアップボックスや全画面 UI が含まれる場合でも、モジュールモードに属します。フロントエンドのjs SDKに似ています。

コンポーネントモード: ネイティブ UI コンポーネントをフォーム内にインラインで表示します。たとえば、フォームに特定の地図メーカーの地図コンポーネントが部分的に埋め込まれており、他のフロントエンドコンテンツが上下に混在している場合は、ネイティブマップ SDK をコンポーネントモードでカプセル化する必要があります。コードの書き方はvueコンポーネントと同じで、コンポーネントラベルはテンプレート内に記述します。フロントエンドの vue コンポーネントに似ています。

1.3 プラグインの使用: ネイティブプラグインが開発された後、プラグインマーケットに上場することもできません。社内で使用する場合はプラグインマーケットに出品する必要はありません。プラグインマーケットに参加したい場合は、指定された形式で zip パッケージに圧縮する必要があります。

2 番目のプラグインの開発

2.1 プラグインは uni-sdk に基づいて開発する必要があります。オフラインの uni-sdk をすぐにダウンロードして、UniPlugin-Hello-AS サンプルプロジェクトをインポートできます。また、新しいネイティブ Android プロジェクトを自分で作成し、不要なパッケージやリソースをコピーすることもできます開発のために。

2.2 オフライン uni-sdk ダウンロードアドレス: https://nativesupport.dcloud.net.cn/AppDocs/download/android.html。これには、必要なリソースとサンプルプロジェクトが含まれています。

2.3 前回の記事で、新しい Android プロジェクトが作成され、uni リソースプロジェクトがオフラインでパッケージ化されることができましたので、これを基にプラグインを開発していきます。

2.4 androidStudio プロジェクトを右クリックして、新しいプラグインモジュールを作成します

2.5 ライブラリを選択し、モジュール名を入力して、「完了」をクリックします。

2.6 次に、アプリの build.gradle 内のモジュールに依存します

実装プロジェクト(':mylibrary')

2.6 モジュールの build.gradle で関連する依存ライブラリを設定する

uniapp-v8-release.aar は拡張モジュールの主な依存ライブラリであり、インポートする必要があります。

compileOnly fileTree(インクルード: ['uniapp-v8-release.aar']、ディレクトリ: '../app/libs')

com.alibaba:fastjson も必要でこれに依存しますが、後ほど json 通信で使用します。

実装「com.alibaba:fastjson:1.2.83」

同時に、メインアプリとの競合を避けるために、すべての依存関係の種類が、このモジュールのみが有効であることを意味する、compileOnly に変更されます。

依存関係 { コンパイルのみ 'androidx.appcompat:appcompat:1.5.0' コンパイルのみ 'com.google.android.material:material:1.6.1'

コンパイルのみ 'com.alibaba:fastjson:1.2.83'
コンパイルのみ fileTree(include: ['uniapp-v8-release.aar'], dir: '../app/libs')
}

2.7 TestModule クラスを作成するには、UniModule クラスを継承する必要があります

拡張メソッドには @UniJSMethod (uiThread = false または true) のアノテーションを付ける必要があります。UniApp は、アノテーションを使用して、現在のメソッドが UI スレッドで実行されるかどうか、および現在のメソッドが拡張メソッドであるかどうかを判断します。

UniApp はリフレクションに基づいてモジュール拡張メソッドを呼び出すため、モジュール内の拡張メソッドはパブリック型である必要があります。

例: 2 つのメソッドを作成する

public class TestModule extends UniModule {
    private static final String TAG = "TestModule";
    //run ui thread
    @UniJSMethod(uiThread = true)
    public void testAsyncFunc(JSONObject options, UniJSCallback callback) {
        Log.e(TAG, "testAsyncFunc--"+options);
        if(callback != null) {
            JSONObject data = new JSONObject();
            data.put("code", "success");
            callback.invoke(data);
        }
    }

    //run JS thread
    @UniJSMethod (uiThread = false)
    public JSONObject testSyncFunc(){
        JSONObject data = new JSONObject();
        data.put("code", "success");
        return data;
    }

}

2.8 プラグインの登録、androidStudioのアセットにdcloud_uniplugins.jsonを新規作成し、プラグイン情報を登録

{
  "nativePlugins": [
    {
      "plugins": [
        {
          "type": "module",
          "name": "TestModule",
          "class": "com.juai.plugin_module.TestModule"
        }
      ]
    }
  ]
}

2.9 コールバックイベント UniJSCallback: JS によって呼び出された場合、一部のシナリオでは、x 座標と y 座標を返す次の例のように、データを返す必要があります。

invokeJavaScript コールバックメソッドを呼び出します。このメソッドは呼び出し後に破棄されます。

invokeAndKeepAlive JavaScript コールバックメソッドを呼び出し、後で使用できるようにコールバックをアクティブなままにしておきます。

以上で簡単なプラグインモジュールが作成できたので、簡単なテストを行ってみましょう。

3.1 ユニアプリプロジェクトページにプラグインを呼び出すボタンを作成します。まずボタンを追加し、クリックイベントを設定します。

<button type="primary" @click="testAsyncFunc">testAsyncFunc</button>

3.2 新しく作成された TestModule プラグインを入手する

var testModule = uni.requireNativePlugin("TestModule")

3.3メソッドでは、クリックイベントを登録し、ネイティブプラグインメソッドを呼び出します。

testAsyncFunc() {
	// 获取 module
	var testModule = uni.requireNativePlugin("TestModule")
	// 调用异步方法
	testModule.testAsyncFunc({
			'name': 'unimp',
			'age': 1
		},
		e => {
			uni.showToast({
				title: JSON.stringify(e),
				icon:'none'
			});
		}
	)
}

3.4 完全な vue の例

<template>
	<view class="content">
		<image class="logo" src="/static/logo.png"></image>
		<view class="text-area">
			<text class="title">{
   
   {title}}</text>
		</view>
		
		<button type="primary" @click="testAsyncFunc">testAsyncFunc</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello'
			}
		},
		onLoad() {

		},
		methods: {
            testAsyncFunc() {
				// 获取 module
				var testModule = uni.requireNativePlugin("TestModule")
				// 调用异步方法
				testModule.testAsyncFunc({
						'name': 'unimp',
						'age': 1
					},
					e => {
						uni.showToast({
					     	title: JSON.stringify(e),
							icon:'none'
						});
					}
				)
			}
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
</style>

3.5 アプリリソースのパッケージ化

3.7 androidStudio プロジェクトのリソースパッケージを置き換える

3.8 プロジェクトを実行すると、作成したボタンがすでにそこにあることがわかります。「Android」をクリックすると、uni の json データが取得され、プラグインが正常に呼び出されたことがわかります。

3.9 同時に、androidStudio コンソールにログがあり、プラグインが正常に呼び出されていることも確認できます。

4つのプラグインパッケージ

4.1 上記は Android ネイティブのオフラインデバッグでのみ可能であるため、Uni でこのネイティブプラグインを使用する方法。まず、プラグインの aar パッケージを生成し、androidStudio のサイドバーで Gradle ツールを見つけます -> 次に、プロジェクトの Task ディレクトリを見つけます -> 他のディレクトリ -> AssemblyRelease をクリックし、コンパイルが終了するのを待ちます

4.2 プラグインモジュールのビルド時に aar が生成されることがわかります。

4.3 uniプロジェクトのルートディレクトリにnativepluginsフォルダを作成 -> プラグイン名ディレクトリTestModuleを作成 -> androidディレクトリを作成し、先ほどのaarをandroidディレクトリにコピーします

4.4 プラグインディレクトリ配下にpakage.jsonを作成し、プラグイン情報を設定する

{
    "name": "TestModule",
    "id": "TestModule", // 插件标识
    "version": "1.0.0",
    "description": "插件描述信息",
    "_dp_type":"nativeplugin",
    "_dp_nativeplugin":{
        "android": {
			"integrateType":"aar",
            "plugins": [
                {
                    "type": "module",
                    "name": "TestModule", //id为前缀
                    "class": "com.juai.plugin_module.TestModule"
                }
                
            ]
        }
    }
}

4.5 この例は比較的単純です。so ライブラリと jar パッケージがある場合は、この情報も設定する必要があります。完全なディレクトリ構造は次のとおりです。

4.6 マニフェスト.json 内のローカルプラグインを特定する

4.7 このプラグインがあることがわかります

4.8 標準ベースでの直接操作ができず、プラグインが見つかりません。クラウドパッケージ化後にテストが必要

4.9 [配布] -> [クラウドパッケージ化] を選択します。

キー情報を設定する

4.10 パッケージ化エラー。「package.json にコメントを含めることはできません。コメントを削除して再試行してください」

4.11 クラウドを再パッケージ化するときに新しいエラーが発生しました。おそらく、androidSDk の最小バージョンが高すぎて、最小バージョンが 19 になっていることを意味します。

4.12 次に、minSDK を 19 に調整し、aar を再生成し、元の aar を置き換えます。

または、プラグインモジュールのマニフェストファイル AndroidManifest.xml にライブラリの競合する構成を追加します。

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools">

   <uses-sdk tools:overrideLibrary="com.bun.miitmdid,com.juai.plugin_module" />

    ..............

</manifest>

4.13 パッケージ化が成功したことがわかります

4.14 携帯電話で APK を実行して、正常に実行できるかどうかを確認してみましょう。

4.15注: クラウドパッケージングには時間があります。10 回ほど実行すると、今日はクラウドパッケージングが利用できなくなります。したがって、時間を節約するために、基本操作をカスタマイズするか、安心してパックするかを選択できます。

5つのコンポーネントからなるコンポーネント開発

5.1 コンポーネントの概要:

コンポーネントはネイティブコントロールを拡張して特別な機能を実装します

コンポーネントは、コード内でのオブジェクトの新しいコンポーネントの作成をサポートしていません。機能していない

5.2 androidStudioの新しいコンポーネントモジュール

5.3 必要な依存関係を追加する

compileOnly 'com.alibaba:fastjson:1.2.83'
compileOnly fileTree(include: ['uniapp-v8-release.aar'], dir: '../app/libs')

5.2 TestComponent クラスの作成 Component 拡張クラスは UniComponent を継承する必要があり、親コンテナ Component (ViewGroup コンポーネントなど) は UniVContainer を継承する必要があります。

public class TestText extends UniComponent<TextView>

5.3 UniComponent の initComponentHostView コールバック関数。このコールバック関数は、コンポーネントのビューを構築するときにトリガーされます。

@Override
protected TextView initComponentHostView(@NonNull Context context) {
    TextView textView = new TextView(context);
    textView.setTextSize(20);
    textView.setTextColor(Color.BLACK);
    return textView;
}

5.4 コンポーネントのプロパティを設定する対応するメソッドには、 @UniComponentProp(name=value(value is attr or style of dsl)) という注釈を付ける必要があります。

@UniComponentProp(name = "tel")
public void setTel(String telNumber) {
    getHostView().setText("tel: " + telNumber);
}

5.5 このコンポーネントの依存関係をアプリの build.gradle に追加します

implementation project(':ModuleComponent')

5.6 アプリのアセットの dcloud_uniplugins.json ファイルにコンポーネントを登録する

{
  "plugins": [
	{
	  "type": "component",
	  "name": "myText",
	  "class": "com.juai.modulecomponent.TestText"
	}
  ]
}

5.7 TestText コンポーネントを uni プロジェクトに追加する

<template>
    <myText ref="telText" tel="12305" style="width:200;height:100" @onTel="onTel" @click="myTextClick"></myText>
</template>

5.8 uni プロジェクトのメソッドにクリックイベントを追加する

methods: {		
	myTextClick(e) {
		this.$refs.telText.clearTel();
	}
}

5.9 完全な uni の例

<template>
	<div>
		<myText ref="telText" tel="12305" style="width:200;height:100" @onTel="onTel" @click="myTextClick"></myText>
	</div>
</template>
<script>  
    export default {  
        methods: {  
			myTextClick(e) {
				this.$refs.telText.clearTel();
			}
        }  
    } 
</script>

5.10 uni パッケージ化されたアプリのリソース