uniapp ネイティブ Android 開発プラグイン (モジュール)、および Android 環境でのローカル デバッグ (1)

uniapp ネイティブ Android 開発プラグイン (モジュール)、および Android 環境でのローカル デバッグ

1. 開発の見通し

uniapp フレームワークの制限により、Android のネイティブ開発のようにスムーズに使用できない機能が多く、プラグインを使用して支援する必要があり、uniapp は機能を完璧にするためにプラグインを導入します。さっそくチュートリアルに進みましょう! 便利だと思ったら「いいね！」してください！

2. 準備

• uniapp プロジェクト (別名独自のプロジェクト)
• JDK (Java JDK) jdk1.8 をダウンロードしてインストールします。
• Android Studio ( csdn download )をダウンロードしてインストールします。公式 Web サイトからAndroid Studioをダウンロードします (公式 Web サイトのダウンロードは壁をバイパスする必要があり、インストールも壁をバイパスする必要があります。会社のネットワークは外部ネットワークにアクセスできる必要があります。そうでない場合は、 SDKはダウンロードされません（ブロガーも長い間ダウンロードしていました））
• uniapp offline SDK ( App offline SDK )をダウンロードして解凍すれ
  
  ば準備は完了です

3. Android はアプリのオフライン SDK をインポートします (ポイント 4 でダウンロードした圧縮パッケージ)

• アプリのオフライン SDK を解凍します
  
  

• UniPlugin-Hello-AS プロジェクトを Android Studio にインポートする
  

• インポートとコンパイルが完了するまで待ち、プロジェクト モードに切り替えます。コンパイル後のプロジェクト構造は以下のようになります
  

4. 新しいモジュール（機能を実装するモジュール）を作成します

• 新しいモジュール
  

• Android ライブラリを選択し、パッケージ名を入力します (uniapp がパッケージ化されたときのパッケージ名と同じにならないように注意してください (これは落とし穴です。uniapp には互換性がありません))、[完了] をクリックします。
  

• 拡張モジュールの主要な依存関係ライブラリである uniapp-release.aar プラグインをインポートしてインポートします。
  App Offline SDK で —> SDK フォルダー ----> libs -----> uniapp-release.aar を見つけます。
  
  インポートしたプロジェクトで、プロジェクト ディレクトリに切り替えます。

• 新しく作成したモジュールに依存関係を追加します (uniplugin_sunmi は私自身の新しいモジュールです)

repositories {
    
    
    flatDir {
    
    
        dirs 'libs'
    }
}

dependencies {
    
    
    compileOnly fileTree(dir: 'libs', include: ['*.jar'])

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

    implementation 'androidx.recyclerview:recyclerview:1.0.0'
    implementation 'androidx.legacy:legacy-support-v4:1.0.0'
    implementation 'androidx.appcompat:appcompat:1.0.0'
    implementation 'com.alibaba:fastjson:1.1.46.android'
    implementation 'com.facebook.fresco:fresco:1.13.0'
    testImplementation 'junit:junit:4.12'

}

同期が失敗した場合は、次のエラーが表示されるかどうかを確認してください。 arg には署名 ofm.android0 が適用できません。
もう一度試してください。 「ビルド」ビューを開きます。
エクスプローラーでログインを表示

してください。 名前空間を削除してから、androidManifest.xml を見つけてパッケージ名を追加してください。ファイルをクリック —> 同期する Gradle ファイルとプロジェクトを同期

• 新しい Java クラス (関数の実装に使用されるクラス) を作成し
  
  
  、AndroidManifest.xml ファイルで構成します (必須)

 <application>
        <activity android:name="com.example.uniplugin_sunmi.ScanCode"
            android:theme="@android:style/Theme.DeviceDefault.Light.NoActionBar"></activity>
    </application>

モジュール クラス (つまり、新しいクラス名) を記述し、テスト コードを記述します。
注: UniModule を継承し、 @UniJSMethod アノテーションを追加します (このアノテーションを uniapp にスローする必要がある関数メソッドに追加します)。

package com.example.uniplugin_sunmi;

import com.alibaba.fastjson.JSONObject;
import io.dcloud.feature.uniapp.annotation.UniJSMethod;
import io.dcloud.feature.uniapp.bridge.UniJSCallback;
import io.dcloud.feature.uniapp.common.UniModule;

// 一定要继承UniModule
public class ScanCode extends UniModule {
    
    
    // 使用UniJSMethod注解，才能使用js调用
    @UniJSMethod(uiThread = true)
    public void  add (JSONObject json, UniJSCallback callback) {
    
    
        final int a = json.getInteger("a");
        final int b = json.getInteger("b");
        callback.invoke(new JSONObject() {
    
    {
    
    
            put("code", 0);
            put("result", a + b);
        }});
    }
}

書き込みの終わり

• build.gradle(app) に uniapp-plugin を追加し、「今すぐ同期」をクリックします
  
• dcloud_uniplugin.json に新しいプラグインを追加します。注: プラグイン名は uniapp で参照されます。
  
• モジュールをプラグイン aar ファイルにパッケージ化します。assmbleRelese
  
  ボタンが見つからない場合は、
  
  
  それを設定できます。パッケージ化後、ビルドで aar ファイルを表示できます。
  

5. ユニアプリでの利用

• プラグイン ディレクトリを作成し、作成したばかりのプラグイン
  
  
  
  package.json 構成を構成します。

{
    
    
	"name": "sunmi-scan",
	"id": "sunmi-scan",
	"version": "1.0.0",
	"description": "订单的",
	"_dp_type": "nativeplugin",
	"_dp_nativeplugin": {
    
    
		"android": {
    
    
			"integrateType": "aar",
			"plugins": [{
    
    
				"type": "module",
				"name": "sunmi-scan",
				"class": "com.example.uniplugin_sunmi.ScanCode"
			}],
			 "minSdkVersion": "19"
		}
	}
}

• プラグインを使用する
  
  

ローカルプラグインを追加

• プラグインを使用して
  ページに含める

<template>
  <view class="content">
    <image class="logo" src="/static/logo.png"></image>
    <view class="text-area">
      <button @click="test">测试</button>
    </view>
  </view>
</template>

<script setup lang="ts">
  const test= ()=>{
    
    
    // 引入自定义插件
    const testModule = uni.requireNativePlugin('sunmi-scan')
    // 使用module的add方法
    testModule.add({
    
    
      a:1,b:3
    },e=>{
    
    
      uni.showToast({
    
    
        title:JSON.stringify(e),
        icon:'none'
      })
    })
  }
</script>

最後に:テストのベースとしてのパッケージ化(最も重要)