HTML5plus モバイルアプリケーション開発例の共有-H5 チュートリアル-php.cn

HTML5plus とはDCloud 社は、従来の Web テクノロジーを使用してモバイルアプリケーションを開発するためのソリューションを提供します。この記事では、HTML5plus モバイルアプリケーションの開発例を中心に紹介し、皆様のお役に立てれば幸いです。

モバイルブラウザエンジンの強化版により、HTML5がネイティブレベルに！

製品のスローガンは常に誇張されているため、これらの詳細には注意を払わないでください。

ヒント

HTML5plus は名前が長いため、HTML5+、または略して 5+ とも呼ばれます。
このエンジンを使用して開発されたモバイルアプリケーションは、5+Appとも呼ばれます。
関連のSDKは5+SDKと呼ばれます。

Runtime

の使い方つまり、DCloud社の別の製品であるHBuilderを使用して、直接開発とデバッグを行います。

SDK

5+SDK を独自のネイティブアプリケーションに統合すると、その拡張された JS API をアプリケーションで使用できます。

違い

ランタイムメソッドはDCloudが提供するクラウドパッケージを直接利用することができ、ローカルにパッケージ環境を構築する必要がありません。
ランタイムメソッドはネイティブ開発を習得する能力を必要とせず、拡張された API を合理的に使用するだけです。
SDK メソッドはより多くのニーズを満たすことができますが、ネイティブ開発の能力を習得する必要があります。

ランタイムメソッドを簡単に理解すると、開発者はネイティブアプリケーションの基本部分を開発する必要がなく、クラウドパッケージ化用のアプリケーションリソースを送信するだけで済みます。
この場合、SDK の方法は異なります。5+SDK は、元のネイティブアプリケーションベースに基づいて拡張されます。したがって、開発者は独自のネイティブ開発環境を構築し、ネイティブ開発作業を実行する必要があります。

基本アーキテクチャ

公式ドキュメントによると、Android プラットフォームのサードパーティ製プラグイン開発ガイダンスは大きく 3 層構造に分かれています。理解を容易にするために、説明を 4 つのパートに分けて説明します。

Webview

は単純なブラウザとして理解でき、HTML、CSS、JavaScript がすべてここにあります。

plus

この部分は Webview にあり、元のブラウザ環境に基づいて、拡張機能はネイティブ関数の API を呼び出すことができます。これらの API はすべて window.plus オブジェクト内にあります。

window.plus 这个对象里面。

JS Bridge

负责连接 JavaScript 层与 Native 层。

接收 JavaScript 层传发过来的请求，通知 Native 层做出相应的响应。
接收 Native 层响应的结果，通知 JavaScript 层接收结果。

Native

即 Android 和 iOS，也是 HTML5plus 的核心关键部分。

一次调用执行的过程

以获取应用版本号为例

plus.runtime.version;

ログイン後にコピー

JS 层调用 plus.runtime.versionJS Bridge
はAndroidとiOSであり、HTML5plusの中核部分でもあります。

アプリケーションのバージョン番号の取得を例に挙げます

rrreee

JSレイヤーはplus.runtime.versionを呼び出し、WebviewはJS Bridgeへのリクエストを開始します。

JS Bridge はリクエストを受信し、アプリケーションのバージョン番号情報を読み取るようにネイティブ層に通知します。

ネイティブ層が実行して結果を取得し、対応する結果を JS Bridge 層に通知します。
JS BridgeはNative層から該当する結果を取得し、該当するWebview結果情報を通知します。
JS層はアプリケーションのバージョン情報を取得します。
コメント

したがって、テクノロジーを選択するときは、自分のニーズと調査対象の製品情報を理解する必要があります。 DCloud コミュニティでは、「なぜ XXX API がないのですか」、「なぜ XXX SDK を統合しないのですか」、「ネイティブ開発の方法がわかりません。公式が XXX API を拡張できることを願っています」などの投稿が頻繁に行われます。現れる。このような問題が発生する具体的な理由については、人それぞれの理解があるため、ここでは説明しません。

技術的な選択をするときは、自分で試してみるのが最善です。製品サプライヤーが最善の答えをくれるとは期待しないでください。彼らは愚かにもユーザーを押しのけるようなことはしないからです。

------Huali の境界線------

利点
基本的な Web 開発機能をマスターしていれば、学習コストが低く、すぐに始めることができます。
クラウドパッケージ化では、パッケージ化処理のためにAndroidやiOSの開発環境をローカルに構築する必要はありません。
🎜🎜🎜コードのセットは、いくつかの互換性処理を行うだけで、Android と iOS 用の 2 つのパッケージにコンパイルできます。 🎜🎜🎜🎜予想外だったので、ディスカッションに追加させていただきます。 🎜🎜🎜🎜不十分🎜🎜🎜🎜plus.ModuleName.* 提供されるAPIは限られていますが、Native.jsという製品がありますが、これには特定のネイティブ開発機能が必要です。 🎜🎜🎜🎜携帯電話自体の Webview に依存しているため、一部の携帯電話ではパフォーマンスが理想的ではありません。これは、特定のビジネス製品に一定の影響を与えます。 🎜🎜🎜🎜ポイント 1 から引き続き、特定の機能を実装するには、開発者が拡張用の SDK を統合する必要があります。たとえば、Bluetooth、アプリケーションのバックグラウンド永続化などです。これには、開発者がネイティブの開発機能を備えていることも必要です。 🎜
互換性の問題により、一部の機能は完全には実装されていません。たとえば、デスクトップアイコンの隅のアイコンなどです。もちろん、Android はかなり断片化されており、いくつかの欠点があることは理解できます。
文書の内容が十分に明確に説明されていない箇所があります。あと、書類のレイアウトがちょっと変です。
これまでのところ、他の落とし穴に遭遇したことはありませんが、まだ慣れていないのかもしれません。

より適切な範囲

包括的な公式ケースの表示と個人的な開発経験。要約すると、5+ アプリ開発は次の状況や製品に適しています:

アプリケーションを迅速に起動する必要がある新興企業。
ニュース情報 (36Kr)、eコマース (HiMall)、コンテンツ共有 (Fengqiaoju Flowers)、テイクアウト、その他ほとんどの O2O ビジネス製品など。
コアビジネス機能は、特定のネイティブ機能に依存しません
一部のエンタープライズアプリケーションは、特定のニーズに応じて決定することもできます。

推奨されない状況

一部の状況は一般化できないため、特定の状況に基づいて説明します。

アプリケーションでのカスタムマップ線描画の実装の必要性、データ通信用の Bluetooth モジュールの必要性など、特定のネイティブ機能に大きく依存しています。
中核的なビジネスにはインスタントメッセージング (IM) が含まれており、サードパーティの JS バージョン SDK は使用したくありません。
短いビデオの録画、写真の編集、ビデオの編集など、ファイルの読み取りと書き込みが必要です。
アプリケーションのバックグラウンド永続性、プッシュサービスの永続性など、その他の「不正な」機能。
スクリーンショットの禁止など、アプリケーションの権限を制御します。これはネイティブ層でのみ処理でき、Android との互換性はわかっています。

上記の状況の多くは、ネイティブ層の開発を通じて解決する必要があります。もちろん、5 つ以上の SDK を同時に統合でき、関連する拡張 API も引き続き使用できます。

類似商品

cordova
apicloud
appcan
ionic
weex
ネイティブ

これまで私が学んだことはこれだけです、そして私は一部の製品はほとんど試したことがなく、まったく経験したことがない製品もあるので、ここでは比較や過剰なコメントはしません。

追記:

HBuilder は IDE であり、実機デバッグ用のベースの名前でもあります。これら 2 つを組み合わせると、5 つ以上のアプリを開発するための環境とツールになります。
HTML5plus には多くの名前があります。DCloud 公式 Web サイトには 5+Runtime と記載されています。 JS API を拡張し、JS がネイティブ関数を呼び出せるようにする責任を負います。モバイル開発用の UI フレームワークである
MUI は、開発を容易にするために HTML5plus に関連するいくつかのメソッドをカプセル化していますが、これはよく誤解されます。しかし、これは実際には単なる UI フレームワークであり、ネイティブ機能の呼び出しとは何の関係もありません。