HTML5Plus モバイル アプリケーションを共有する

HTML5Plusモバイルアプリとは HTML5Plusモバイルアプリは5+Appと呼ばれ、携帯電話上で動作するHTML、JS、CSSに基づいて記述されたアプリで、携帯電話のネイティブ機能を任意に呼び出すことができます。拡張JS APIにより、ネイティブアプリと同等の強力な機能とパフォーマンスを実現します。

簡単に言うと、Web 開発テクノロジーを使用してネイティブ モバイル アプリケーションを開発します。

5+アプリとモバイル Web

5+アプリとモバイル Web 開発で使用される関連テクノロジーは一般に同じですが、この 2 つの違いは依然として明らかです。

• 5+アプリはC/S、WebはB/Sです。

• 5+App は独立したクライアントであり、アプリケーション リソースは通常、静的ファイルのみにすることができます。 PHP や JSP などのサーバー テンプレートには、それらを処理するためのパーサーがありません。

• 5+App は、apk および ipa サフィックスが付いたパッケージにパッケージ化されており、ネイティブ モバイル アプリケーションです。

• window.plus 5+ランタイムエンジンに依存する拡張API。通常のブラウザにはこのエンジンが統合されておらず、Web 開発では通常これらの API は使用されません。

準備

開発ツール

HBuilder には 5 つ以上のアプリ用の開発環境が組み込まれているため、最初にこの IDE をダウンロードする必要があります。

アカウントを登録します

HBuilder をダウンロードして解凍した後、IDE を起動します。初めて使用する場合は、その後のアプリケーションとコミュニティでのアクティビティの管理を容易にするためにアカウントを登録する必要があります。

デバイス

iOS デバイスや Mac OS マシンは存在しないため、このシリーズの共有では、例として Windows システムでの Android アプリケーションの開発を使用します。

パソコンと携帯電話。携帯電話は Android 4.4 以降であることが望ましく、エミュレータは推奨されません。 USB ケーブルも必要で、もちろん HBuilder は WiFi デバッグもサポートしています。

最初の 5+App

新しいアプリケーション

• HBuilder を起動してログインします。

• メニュー -> ファイル -> 新規モバイルアプリ

テンプレートは、当面は調整する必要はありません。「HelloWorld」と入力して、「完了」をクリックします。
index.html

アプリケーションのエントリーページは、Web のエントリーページと概念が似ています。デフォルトはアプリケーションのルート ディレクトリにあるindex.htmlですが、これは調整できます。

manifest.json

5+アプリ構成ファイル。アプリケーション情報を構成するために使用されます。 HBuilder は、このファイルに対して特別な処理を実行し、視覚的な編集インターフェイスを提供します。

アプリケーション情報
アプリケーション名: 携帯電話のデスクトップに表示されるアプリケーションの名前です。
appid: これは 5+App の作成時に割り当てられます。変更しないでください。 iOS の AppID や他のサードパーティ プラットフォームの AppID と混同しないでください。
バージョン番号: アプリケーションのバージョン番号
ページエントリ: ホームページ上の変更可能なページです。
アプリケーションの説明: アプリケーション情報を簡単に説明します。

アイコンの構成
は、プロンプトに従って仕様を満たす画像を作成し、ワンクリックで置換を生成します。

スタートアップ画像
スプラッシュ画像は、アプリケーション起動時のプレースホルダー画像です。QQ はペンギン、WeChat は月です。
スタートアップ オプション: 通常はデフォルトのオプションを使用し、必要に応じて調整します。
画像設定: 必要に応じて、対応するサイズの PNG 画像を作成し、構成を選択します。

SDKの設定
一部のサードパーティ製SDK機能を使用する場合は、対応する情報を設定する必要があります。
SDK 入力する必要がある情報を有効にし、対応するサードパーティのオープン プラットフォームに移動して登録するだけです。

モジュールの権限設定
一部のモジュールの有効化には権限の設定が必要です

ページ参照関係
詳しくは分かりません、マニュアルを読んでください。

コードビュー
構成のソースコード部分。すべての構成が視覚的な編集ビューを提供するわけではありません。

実際のデバイスで実行

携帯電話をコンピュータに接続すると、HBuilder はコンピュータに接続されているデバイスを自動的に検出します。メニュー -> 実行 -> 実際のデバイスで実行します。デバイスを選択するだけです。デバッグ ベースの HBuilder が初めてインストールされると、HBuilder IDE のバージョンが変更されると、実機の動作により古いバージョンの HBuilder ベースが上書きされます。

デバッグ

ページのスタイルをデバッグするには、コンピューターの Chrome ブラウザの携帯電話モードを使用することをお勧めします。
実際の Android デバイスが実行されている場合、ファイルを変更して保存するたびに、携帯電話のベースがコードを同期します。
Android は引き続きデバッグに Chrome RemoteDebugging を使用できますが、Android 4.4 以降のデバイスが必要であり、初めてファイアウォールを回避する必要があります。

Call 5+API

拡張機能API読み込み完了のイベントコールバックを単純にカプセル化します

var plusReady = function(callback) {
  if(window.plus) {
    callback();
  } else {
    document.addEventListener('plusready', callback);
  }
};

次に、現在のデバイス接続のネットワークタイプを読み取り、ページに出力します。

plusReady(function() {
  var netType = plus.networkinfo.getCurrentType();
  document.write('当前网络类型为：' + netType);
});

実機で実行すると、WiFiネットワーク環境である「現在のネットワークの種類: 3」のページの内容が確認できます。

パッケージ化

• manifest.jsonの情報が正しいことを確認してください

• ロゴとスプラッシュ画像が設定されていない場合は、デフォルトのHBuilder関連画像が使用されます。

• メニュー -> リリース -> ネイティブ インストール パッケージの作成

• Android の証明書は、DCloud が提供する既製のものを使用する場合でも、生成する場合でも同じです。あなた自身。

• パッケージ名は Android パッケージ名の形式仕様に厳密に従う必要があり、ランダムに記述しないでください。ここを調整してcom.helo.html5plusに変更します。

• 構成情報にエラーがある場合は、プロンプトが表示され、続行する前に正しく変更する必要があります。

• すべてが正しければ、「パッケージ」をクリックして待ちます。

• パッケージ化が完了すると、対応するディレクトリに自動的にダウンロードされます。

インストール

クラウドパッケージからダウンロードしたapkを携帯電話にインストールし、アプリケーションを起動して現在のネットワークステータス情報を表示します。そして、最初の 5+App が無事に制作されました。

関連する推奨事項:

HTML5Plus モバイル開発の学習を始めましょう

HTML5Plus モバイル アプリケーション開発例の共有

HTML5 を模倣した WeChat チャット インターフェイスと友達の輪のコード

以上がHTML5Plus モバイル アプリケーションを共有するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。