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」と入力して、「完了」をクリックします。
アプリケーションのエントリーページは、Web のエントリーページと概念が似ています。デフォルトはアプリケーションのルート ディレクトリにあるindex.htmlですが、これは調整できます。
manifest.json
5+アプリ構成ファイル。アプリケーション情報を構成するために使用されます。 HBuilder は、このファイルに対して特別な処理を実行し、視覚的な編集インターフェイスを提供します。
アプリケーション情報アプリケーション名: 携帯電話のデスクトップに表示されるアプリケーションの名前です。
アイコンの構成は、プロンプトに従って仕様を満たす画像を作成し、ワンクリックで置換を生成します。
スタートアップ画像スプラッシュ画像は、アプリケーション起動時のプレースホルダー画像です。QQ はペンギン、WeChat は月です。
SDKの設定一部のサードパーティ製SDK機能を使用する場合は、対応する情報を設定する必要があります。
モジュールの権限設定詳しくは分かりません、マニュアルを読んでください。
コードビュー構成のソースコード部分。すべての構成が視覚的な編集ビューを提供するわけではありません。
実際のデバイスで実行
携帯電話をコンピュータに接続すると、HBuilder はコンピュータに接続されているデバイスを自動的に検出します。メニュー -> 実行 -> 実際のデバイスで実行します。デバイスを選択するだけです。デバッグ ベースの HBuilder が初めてインストールされると、HBuilder IDE のバージョンが変更されると、実機の動作により古いバージョンの HBuilder ベースが上書きされます。
デバッグ
ページのスタイルをデバッグするには、コンピューターの Chrome ブラウザの携帯電話モードを使用することをお勧めします。 -
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 サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
