Cordova を Web アプリにパッケージ化する方法の詳細な説明

この記事では、Cordova を Web アプリにパッケージ化する詳細な方法を主に紹介します。興味のある方はぜひ参考にしてください。

プロジェクト開発では、h5 ページをアプリにパッケージ化する必要があります。現時点では、cordova を使用してパッケージ化できます。公式ドキュメントから、アプリの作成は非常に簡単であることがわかります。必要なのは、コンピュータ上にある nodejs だけです。公式ドキュメントに従って、Android プラットフォームと iOS プラットフォームを追加します。プロジェクト構造全体が構築されたら、パッケージ化する必要があるすべての Web アプリ ページをプロジェクト構造に詰め込むことができます。次のステップは、プラットフォーム開発をどのように実行するか、つまりプロジェクトをインストール可能なファイルにパッケージ化する方法という面倒な部分です。

1: 環境変数を設定します:

1. JAVA_HOME 環境変数を設定し、JDK インストール パスとして指定します

2. ANDROID_HOME 環境変数を設定し、それを Android SDK インストール パスとして指定します

3.また、Android SDK ツールと platform-tools ディレクトリを PATH に追加します

ここで注意する必要があるのは、ANDROID_HOME 環境変数を設定することです。インストール プロセス中に、Android Studio が自動的に Android をインストールします。図に示すように、コンピュータではこの時点でこのアドレスを覚えておいてください (次の行のパスは Android SDK です):

2: このエラーを報告するとき: エラー: サポートされている最小 Gradleバージョンは xxxx です。現在のバージョンは xxxx です。

パッケージ化時にこのエラーを報告しました。原因は Android Studio が Gradle のバージョンを更新したためです。

1 : Android Studio を開き、設定を見つけます。gradle を検索し、図に示すように設定します (特定のパスは異なります):

3: Windows Cordova ビルド エラー: Android SDK 内で Gradle ラッパーが見つからない場合があります。アップデート

解決策:

1. Android SDK ツール パッケージ (https://dl.google.com/android/repository/tools_r25.2.3-windows.zip) をダウンロードします

2. C:Users\AppDataLocalAndroidsdk ディレクトリに入ります

3. toolsディレクトリをバックアップします

4. は圧縮されています パッケージ内のtoolsディレクトリをこのディレクトリに解凍します

5. プロジェクトディレクトリに入り、再度「cordova build android」を実行します。

4:cordova-plugin-splashscreen のインストール時のエラー:

現時点で考えられる原因は、apk ファイルが既にパッケージ化されているため、apk ファイルを削除してから再度インストールする必要があります。

5: vue プロジェクトをパッケージ化するときに発生する問題

1: npm run build を使用してどこをパッケージ化するか?

図に示すように、Qianne はこのフォルダーで dos ウィンドウを開き、myApp1 という名前のアプリ フレームワークを作成しました。次に、構成内のindex.jsを変更しました:

index: path.resolve(__dirname, '../myApp1/www/index.html'),
 assetsRoot: path.resolve(__dirname, '../myApp1/www'),
 assetsSubDirectory: 'static',
 assetsPublicPath: './',

ここでのパスは、myApp1の下のwwwフォルダーを直接指しています。次に、vue プロジェクトで npm run build を実行します。この時点では、パッケージ化されたファイルを myApp1 の下の www フォルダーに直接配置しました。この時点で、

cordova.js ファイルとcordova_plugins.js ファイルを、index.html と同じレベルの www フォルダーに配置する必要もあります。 (この時点で、index.html が上書きされることに注意してください。index.html 内のcordova.js を参照するコードを、パッケージ化されたindex.html にコピーする必要があります)。

2: パッケージ化されたindex.htmlを直接開きますが、ルーティングが機能しませんか?

私の解決策:

vueプロジェクトでmain.jsを見つけて、ルーティングコードのモードを「ハッシュ」に変更します。以前は「history」を使用していたので、ルーティングは役に立ちませんでした

const router = new VueRouter({

 mode: 'hash',

 routes

})

その後、パッケージ化されたindex.htmlを開いた後、ルーティングが正常であれば、それを再度パッケージ化します。おめでとうございます。このとき、myApp1 の下の dos ウィンドウに入り、cordova build android と入力して、apk ファイルにパッケージ化します。

6: アプリのロゴの起動ページをどこに配置する必要がありますか?

プロジェクト構造では、スプラッシュスクリーン プラグインをインストールする必要があります:

cordova plugin add cordova-plugin-splashscreen

config.xml に次のコードを挿入します:

 <platform>

  <allow-intent></allow-intent>

   <icon></icon>

  <icon></icon>

  <icon></icon>

  <icon></icon>

  

  <!-- 以下是欢迎页面，可根据需要进行添加 -->

  <splash></splash> 

  <splash></splash> 

  <splash></splash> 

  <splash></splash> 

  <splash></splash> 

  <splash></splash> 

  <splash></splash> 

  <splash></splash> 

 </platform>

<platform> 

 <!-- iOS 8.0+ --> 

 <!-- iPhone 6 Plus --> 

 <icon></icon> 

 <!-- iOS 7.0+ --> 

 <!-- iPhone / iPod Touch --> 

 <icon></icon> 

 <icon></icon> 

 <!-- iPad --> 

 <icon></icon> 

 <icon></icon> 

 <!-- iOS 6.1 --> 

 <!-- Spotlight Icon --> 

 <icon></icon> 

 <icon></icon> 

 <!-- iPhone / iPod Touch --> 

 <icon></icon> 

 <icon></icon> 

 <!-- iPad --> 

 <icon></icon> 

 <icon></icon> 

 <!-- iPhone Spotlight and Settings Icon --> 

 <icon></icon> 

 <icon></icon> 

 <!-- iPad Spotlight and Settings Icon --> 

 <icon></icon> 

 <icon></icon> 

 <!-- 以下是欢迎页面，可根据需要进行添加 -->

 <splash></splash> 

 <splash></splash> 

 <splash></splash> 

 <splash></splash> 

 <splash></splash> 

 <splash></splash> 

 <splash></splash> 

 <splash></splash> 

 <splash></splash> 

 <splash></splash> 

</platform>

同様に、対応するフォルダーにインストールする必要があります。 res フォルダーの下に、対応するロゴまたは画像を配置します

関連する推奨事項:

WebStorm、React、Ant.Design に基づいて WebAppDemo を開発する方法

javascript - Web アプリ開発は、ユーザー メッセージが既読または未読

webapp 外部 CSS Reference_html/css_WEB-ITnose

以上がCordova を Web アプリにパッケージ化する方法の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。