ホームページ >ウェブフロントエンド >jsチュートリアル >Cordova を Web アプリにパッケージ化する方法の詳細な説明
Cordova を Web アプリにパッケージ化する方法の詳細な説明
- 小云云オリジナル
- 2018-01-09 14:35:403195ブラウズ
この記事では、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 ラッパーが見つからない場合があります。アップデート
解決策:
Android SDK ツール パッケージ (https://dl.google.com/android/repository/tools_r25.2.3-windows.zip) をダウンロードします
-
C:Users\AppDataLocalAndroidsdk ディレクトリに入ります
toolsディレクトリをバックアップします
は圧縮されています パッケージ内のtoolsディレクトリをこのディレクトリに解凍します
プロジェクトディレクトリに入り、再度「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 サイトの他の関連記事を参照してください。