辛宝Otto 的玄酒清谈

本文の背景#

最近、uni-app x が新しいバージョンをリリースしました。その中で、uni-app x 4.25 ネイティブ混合をサポートすることが追加され、kotlin/java/swift コードを直接使用できるようになりました。クライアントネイティブの皆さんは全力で開発できます！

新たにコンパイラ uts プラグインが Kotlin、Java、Swift コードの混合をサポート

多くの人が私と同じように、uni-app x を使ってアプリを開発する必要がありますが、クライアントネイティブ開発（以下「ネイティブ開発」と呼ぶ）にはあまり慣れておらず、関連分野の知識にも不慣れです。UTS 言語を利用してネイティブ機能の開発を行うことができます。

また、多くのネイティブ開発のベテランも uni-app x の開発に参加しており、ネイティブ開発のさまざまな基礎的な詳細に精通しており、既存のネイティブ開発の経験を活用したいと考えています。

異なる二つの人々のニーズは異なり、いくつかの異なる視点からの製品提案がフィードバックされるでしょう：

• フロントエンドからのフィードバック：ページレイアウトやビジネス開発が迅速に実現できるが、ネイティブ開発には不慣れで、問題を解決できない
• ネイティブ開発からのフィードバック：既存のネイティブ SDK やネイティブツールキットを再利用したい

皆の目標は同じで、アプリ開発を加速させ、早く完成させて残業しないことです！

この記事では、ネイティブ混合の基本概念、関連する使い方、進階的な向上などについて簡単に紹介します。

なぜネイティブ混合が必要なのか？#

この機能の対象群体は誰で、何に役立つのか、私にどのような影響があるのか？

uni-app x でアプリを開発する際、以前はビジネスロジックを実現し、ネイティブ機能を呼び出すために UTS 言語を使用して互換性のあるコードを書く必要がありました。コンパイラを通じて Kotlin と Swift に変換していました。

これはフロントエンドの仲間にとって比較的友好的です：UTS の構文は TS に非常に似ており、ネイティブの書き方を知っていれば、変換するだけで始められます。これにより、フロントエンドエンジニアがクライアントのネイティブ機能を呼び出す能力を持つことができました。

一方、ネイティブ開発のベテランにとっては、UTS や UTS プラグインなどの新しいことを学ぶ必要があり、今後のネイティブ開発の知識を再利用できることを望んでいます。

今回の更新では、UTS プラグイン内でネイティブ混合機能を使用できるようになりました。ここで一つの例を挙げて説明します。

関連する記事：

• [[Swift と UIKit コードを迅速に学び、テストする方法]]
• [[Android Kotlin コードを迅速に学び、テストする方法]]

ここでは iOS を主な紹介プラットフォームとし、Android は大体同じであるため、一貫した読書体験のために記事の末尾に Android 関連のコードを掲載します。

新しい概念はまず考え方を見てみましょう。

iOS で現在の電池残量を確認する#

uni-app x に慣れているユーザーは、現在のスマートフォンの電池残量を確認するケースを何度も聞いたことがあるかもしれません。これは非常にクラシックなものです。

今、アプリで現在のスマートフォンの電池残量を確認する必要があると仮定します。もし現在の電池残量が比較的高い、例えば 80% 以上の場合、アプリは高度なアニメーションを使用し、それ以下の場合は通常のアニメーションを開始します。

uni-app x を使用して現在のスマートフォンの電池残量を取得する場合、この要求はネイティブの要求であり、クライアントの API を呼び出して取得する必要があります。この要求は uni-app x がすでにこの API をラップしており、直接 uni.getBatteryInfo を使用すれば得られます。

ここでは、存在しないと仮定して、自分で実装する必要があります。

iOS ネイティブコードの例#

ネイティブの同僚に聞いたり、AI に尋ねたり、uni-app x のオープンソースコードを調べたりすることで、iOS で電池残量を確認するロジックは次のようになります。

import UIKit

func getBatteryLevel() -> Float {
    // 電池監視を有効にする
    UIDevice.current.isBatteryMonitoringEnabled = true
    
    // 現在の電池残量を取得
    let batteryLevel = UIDevice.current.batteryLevel
    // パーセントに変換
    return batteryLevel * 100
}

// 電池残量を取得して表示
let currentBatteryLevel = getBatteryLevel()
print("現在の電池残量: \(currentBatteryLevel)%")

混合開発の前#

uni-app x が混合機能をサポートする前は、上記のコードを UTS に翻訳し、UTS コンパイラを通じてネイティブに変換する必要がありました：ネイティブの書き方を知っている - UTS に翻訳 - Swift に翻訳。

UTS コードは大体次のようになります。関数のエクスポートやフォーマットなどのロジックは削除されています。

import { UIDevice } from "UIKit";
UIDevice.current.isBatteryMonitoringEnabled = true
const batteryLevel = Number(UIDevice.current.batteryLevel * 100)

ロジックを UTS プラグインに分割し、コンパイル時に UTS コンパイラを通じて Swift コードに変換します。

ここで Android プラットフォームのパッケージのインポートプロセスは完全には同じではなく、一般的にはプラットフォームごとに機能を分割して実装することが推奨されます。

混合開発の後#

ネイティブ混合があれば、多くのことが簡単になります。ここで、UTS 開発プラグインにまだ不慣れな場合は、[[新手向：UTS プラグインのパッケージ]] を参考にしてください。主に UTS プラグインの開発方法を紹介しています。この記事では混合の大まかな考え方を示し、詳細は一つ一つ展開しません。

クラシックな UTS プラグインのディレクトリ構造は次のようになります。

uni_modules
- webworker-batteryStatus
-- utssdk
--- app-ios
---- index.uts
-- package.json

UTS プラグインの app-ios/index.uts に新たに NativeCode.swift を作成します。名前の通り、このファイルはネイティブの swift ファイルです。

NativeCode.swift ファイルの内容は以下の通りで、これは公式に推奨される書き方の一つです。

import UIKit

public class NativeCode {
  static func getBatteryLevelSwift() -> Float {
      // 電池監視を有効にする
      UIDevice.current.isBatteryMonitoringEnabled = true
      
      // 現在の電池残量を取得
      let batteryLevel = UIDevice.current.batteryLevel
      // パーセントに変換
      return batteryLevel * 100
  }
}

UTS ではどのように呼び出すのでしょうか？

index.uts のコードは次の通りです。

export function getBatteryLevelSwift() : Float {
  return NativeCode.getBatteryLevelSwift()
}

使用は非常に簡単で、パッケージをインポートし、メソッドを呼び出すだけです。

<template>
  <view>
    <view>{{currentLevel}}</view>
    <button @click="getLevel"> 電池残量</button>
  </view>
</template>

<script setup>
  import { getBatteryLevelSwift  } from '../../uni_modules/webworker-batteryLevel'
  const currentLevel = ref(0)
  const getLevel = () => {
    console.log('ボタンをクリック')
    // console.log(getBatteryLevelSwift())
    const res = getBatteryLevelSwift()
    currentLevel.value = res
  }
</script>

• ネイティブ開発のロジック
• uts パッケージのロジック
• uvue での呼び出し

これにより、混合開発を簡単に実現できます。

Android での混合実装#

iOS と似ており、uni_moduels の app-android ディレクトリに index.uts と NativeCode.kt を追加します。

その中の NativeCode.kt の内容は大体次のようになります。

package uts.sdk.modules.ottoBatteryLevel;
import android.content.Context
import android.os.BatteryManager

object NativeCode {
  fun getBatteryLevel(context: Context): Int {
      val batteryManager = context.getSystemService(Context.BATTERY_SERVICE) as BatteryManager
      val batteryLevel = batteryManager.getIntProperty(BatteryManager.BATTERY_PROPERTY_CAPACITY)
      return batteryLevel
  }
}

その中の index.uts の内容は次の通りです。

import Context from "android.content.Context";

export function getBatteryLevel() : Int {
  const context = UTSAndroid.getAppContext()!;
  return NativeCode.getBatteryLevel(context)
}

他の部分は iOS と一致し、uvue で UTS プラグインを呼び出します。

次に何をする？#

この記事を通じて、UTS プラグイン開発、ネイティブ混合、uni-app x 開発についてさらに理解を深められることを願っています。

強力なツールを手に入れたので、さらに多くの内容を探求できます。次に何をすることができるでしょうか？

公式のデモ実装で詳細を学ぶ#

公式は hello uts リポジトリをオープンソースしており、このケースから詳細を学ぶことができます。

uni_modules/uts-tests/utssdk/NativeCode.uts · dev · DCloud / Hello UTS · GitCode

公式ドキュメントで技術的な詳細を理解する#

ネイティブ混合の来歴を詳しく説明しており、さらに詳細です。
https://doc.dcloud.net.cn/uni-app-x/plugin/uts-plugin-hybrid.htm

UTS プラグイン開発を学ぶ#

参考にしてください 《[[新手向：UTS プラグインのパッケージ]]》