ホームページ > 記事 > ウェブフロントエンド > HTML5Plus モバイルアプリケーションを共有する

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

小云云オリジナル: 2018-02-10 14:18:003012ブラウズ

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 を起動してログインします。
メニュー -> ファイル -> 新規モバイルアプリ

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

manifest.json

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

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

デバッグ

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 モバイル アプリケーションを共有する