Ausführliche Erklärung zum Packen von Cordova in eine Webanwendung

Dieser Artikel stellt hauptsächlich die Methode zum Packen von Cordova in eine Webanwendung vor. Ich hoffe, dass er jedem helfen kann.

In der Projektentwicklung muss die h5-Seite in eine App gepackt werden. Zu diesem Zeitpunkt können wir Cordova zum Packen verwenden. Aus der offiziellen Dokumentation können wir lernen, dass das Erstellen einer App sehr einfach ist. Sie benötigen nur NodeJS auf Ihrem Computer. Wir können der offiziellen Dokumentation Schritt für Schritt folgen, um die Android-Plattform und die iOS-Plattform hinzuzufügen. Nachdem die gesamte Projektstruktur erstellt wurde, können wir alle Webapp-Seiten, die wir zum Packen benötigen, in die Projektstruktur einfügen. Der nächste Schritt ist der mühsame Teil, wie man die Plattformentwicklung durchführt, also wie man unser Projekt in eine installierbare Datei packt.

1: Umgebungsvariablen festlegen:

1. Legen Sie die Umgebungsvariable JAVA_HOME fest und geben Sie sie als JDK-Installationspfad an.

2 Umgebungsvariable und geben Sie den Installationspfad für das Android SDK an

3 Fügen Sie außerdem die Tools und Plattform-Tools-Verzeichnisse des Android SDK zu Ihrem PATH hinzu

Was hier zu beachten ist, ist festzulegen Mit der Umgebungsvariablen ANDROID_HOME können Sie Android Studio auf unserem Computer installieren. Während des Installationsvorgangs installiert Android Studio automatisch das Android SDK auf unserem Computer, wie in der Abbildung gezeigt Zeile unten ist das Android SDK):

2: Beim Melden dieses Fehlers: Fehler: Die minimal unterstützte Gradle-Version ist xxxx. Aktuelle Version ist xxxx.

Ich war damals beim Packen. Dieser Fehler wurde irgendwann gemeldet und ich habe den Grund im Internet gefunden. Dies liegt daran, dass Android Studio die Version von Gradle aktualisiert hat. Die Schritte zur Lösung dieses Problems sind wie folgt:

1: Android Studio öffnen, Einstellung suchen, nach Gradle suchen, wie in der Abbildung gezeigt. Einstellungen (spezifische Pfade variieren):

Drei: Windows Cordova Build Fehler: Konnte nicht Finden Sie den Gradle-Wrapper im Android SDK. Möglicherweise muss er aktualisiert werden

Lösungsmethode:

1. Laden Sie das Android SDK-Tools-Paket herunter (https://dl.google.com/android /repository/tools_r25.2.3-windows.zip)

2. Geben Sie das Verzeichnis C:Users\AppDataLocalAndroidsdk ein

3. Sichern Sie das Tools-Verzeichnis

4. Extrahieren Sie das Tools-Verzeichnis im komprimierten Paket in dieses Verzeichnis

5. Geben Sie das Projektverzeichnis ein und führen Sie „cordova build android“ erneut aus.

Viertens: Fehler bei der Installation von cordova-plugin-splashscreen:

Der mögliche Grund ist derzeit, dass Sie die APK-Datei bereits gepackt haben. Sie müssen die löschen apk-Datei herunterladen und dann erneut installieren.

5: Probleme beim Packen von Vue-Projekten

1: Wo soll mit npm run build verpackt werden?

Wie im Bild gezeigt, ist Qianne der Name meines Vue-Projekts. Ich habe das DOS-Fenster in diesem Ordner geöffnet und dann ein App-Framework mit dem Namen myApp1 erstellt. Dann habe ich die index.js in der Konfiguration geändert:

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

Der Pfad hier zeigt direkt auf den www-Ordner unter myApp1. Dann führen wir npm run build im Vue-Projekt aus. Zu diesem Zeitpunkt haben wir die gepackten Dateien direkt im WWW-Ordner unter myApp1 abgelegt. Zu diesem Zeitpunkt müssen wir auch die Dateien

cordova.js und cordova_plugins.js im Ordner www ablegen, auf derselben Ebene wie index.html. (Denken Sie daran, dass index.html zu diesem Zeitpunkt überschrieben wird. Wir müssen den Code, der auf cordova.js in index.html verweist, in die gepackte index.html kopieren.)

2: Öffnen Sie die gepackte index.html direkt, aber das Routing funktioniert nicht?

Meine Lösung:

Suchen Sie main.js im Vue-Projekt und ändern Sie den Modus des Routing-Codes darin in „Hash“. Früher habe ich „History“ für das Routing verwendet war nutzlos.

const router = new VueRouter({

 mode: 'hash',

 routes

})

Danach werden wir es erneut verpacken, wenn die gepackte index.html nach dem Öffnen normal weitergeleitet wird. Zu diesem Zeitpunkt rufen wir das DOS-Fenster unter myApp1 auf, geben Cordova Build Android ein und packen es in eine APK-Datei.

6: Wo soll die Logo-Startseite der App platziert werden?

In der Projektstruktur müssen wir das Splashscreen-Plugin installieren:

cordova plugin add cordova-plugin-splashscreen

Wir fügen den folgenden Code ein in 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>

Ebenso müssen wir das entsprechende Logo oder Bild im entsprechenden Ordner unter dem res-Ordner ablegen.

Verwandte Empfehlungen:

So entwickeln Sie WebAppDemo basierend auf WebStorm, React und Ant.Design

Javascript – Wie ermittelt die Webapp-Entwicklung, ob eine Benutzernachricht gelesen oder ungelesen wurde

webapp external css reference_html/css_WEB-ITnose

Das obige ist der detaillierte Inhalt vonAusführliche Erklärung zum Packen von Cordova in eine Webanwendung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!