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 name="android">

  <allow-intent href="market:*" rel="external nofollow" />

   <icon density="ldpi" src="./res/icon/android/mipmap-ldpi/icon.png" />

  <icon density="mdpi" src="./res/icon/android/mipmap-mdpi/icon.png" />

  <icon density="hdpi" src="./res/icon/android/mipmap-hdpi/icon.png" />

  <icon density="xhdpi" src="./res/icon/android/mipmap-xhdpi/icon.png" />

  

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

  <splash density="land-hdpi" src="./res/screen/android/drawable-land-hdpi/screen.png" /> 

  <splash density="land-ldpi" src="./res/screen/android/drawable-land-ldpi/screen.png" /> 

  <splash density="land-mdpi" src="./res/screen/android/drawable-land-mdpi/screen.png" /> 

  <splash density="land-xhdpi" src="./res/screen/android/drawable-land-xhdpi/screen.png" /> 

  <splash density="port-hdpi" src="./res/screen/android/drawable-port-hdpi/screen.png" /> 

  <splash density="port-ldpi" src="./res/screen/android/drawable-port-ldpi/screen.png" /> 

  <splash density="port-mdpi" src="./res/screen/android/drawable-port-mdpi/screen.png" /> 

  <splash density="port-xhdpi" src="./res/screen/android/drawable-port-xhdpi/screen.png" /> 

 </platform>

<platform name="ios"> 

 <!-- iOS 8.0+ --> 

 <!-- iPhone 6 Plus --> 

 <icon src="./res/icon/ios/icon-60@3x.png" width="180" height="180" /> 

 <!-- iOS 7.0+ --> 

 <!-- iPhone / iPod Touch --> 

 <icon src="./res/icon/ios/icon-60.png" width="60" height="60" /> 

 <icon src="./res/icon/ios/icon-60@2x.png" width="120" height="120" /> 

 <!-- iPad --> 

 <icon src="./res/icon/ios/icon-76.png" width="76" height="76" /> 

 <icon src="./res/icon/ios/icon-76@2x.png" width="152" height="152" /> 

 <!-- iOS 6.1 --> 

 <!-- Spotlight Icon --> 

 <icon src="./res/icon/ios/icon-40.png" width="40" height="40" /> 

 <icon src="./res/icon/ios/icon-40@2x.png" width="80" height="80" /> 

 <!-- iPhone / iPod Touch --> 

 <icon src="./res/icon/ios/icon.png" width="57" height="57" /> 

 <icon src="./res/icon/ios/icon@2x.png" width="114" height="114" /> 

 <!-- iPad --> 

 <icon src="./res/icon/ios/icon-72.png" width="72" height="72" /> 

 <icon src="./res/icon/ios/icon-72@2x.png" width="144" height="144" /> 

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

 <icon src="./res/icon/ios/icon-small.png" width="29" height="29" /> 

 <icon src="./res/icon/ios/icon-small@2x.png" width="58" height="58" /> 

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

 <icon src="./res/icon/ios/icon-50.png" width="50" height="50" /> 

 <icon src="./res/icon/ios/icon-50@2x.png" width="100" height="100" /> 

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

 <splash src="./res/screen/ios/Default~iphone.png" width="320" height="480"/> 

 <splash src="./res/screen/ios/Default@2x~iphone.png" width="640" height="960"/> 

 <splash src="./res/screen/ios/Default-Portrait~ipad.png" width="768" height="1024"/> 

 <splash src="./res/screen/ios/Default-Portrait@2x~ipad.png" width="1536" height="2048"/> 

 <splash src="./res/screen/ios/Default-Landscape~ipad.png" width="1024" height="768"/> 

 <splash src="./res/screen/ios/Default-Landscape@2x~ipad.png" width="2048" height="1536"/> 

 <splash src="./res/screen/ios/Default-568h@2x~iphone.png" width="640" height="1136"/> 

 <splash src="./res/screen/ios/Default-667h.png" width="750" height="1334"/> 

 <splash src="./res/screen/ios/Default-736h.png" width="1242" height="2208"/> 

 <splash src="./res/screen/ios/Default-Landscape-736h.png" width="2208" height="1242"/> 

</platform>

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

関連する推奨事項:

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

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

webapp 外部 CSS Reference_html/css_WEB-ITnose

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