Cordova packages vue as APK

1, Install Cordova1, create cordova project, import vUE

2. Import various plug-ins

3. Config. XML configuration

3, debugging and packaging into APK3.1 generation debugging APK

5. Summary of problems

5.1 Gradle Displays an Error when Cordova runs android

5.2 An Error Was reported when the Android Version was Too High. Net ::ERR_CLEARTEXT_NOT_PERMITTED

1. Install Cordova

Platform: Windows 10

Required environment: Node/JDK/Adroid SDK/Gradle Don’t forget to configure their environment variables

• Install Cordova globally

  npm install -g cordova

1. Create a Cordova project and import vUE

• create

   cordova create firstApp 
  Copy the code

• Add Android platform support

   cordova platform add android
  Copy the code

• Check whether JDK,Android SDK, Gradle, Android-target dependencies are installed

   cordova requirements   
  Copy the code

• Import the vue

  1. For convenience, you can directly change the package path of vue.config.js to the WWW directory of cordova project. It’s good

  2. Vue. Config. js changes the path of outputDir to your own Cordova project

     module.exports = { outputDir: '.. /cordova/www', publicPath: './',Copy the code

  3. After packaging. Cordova will take care of the rest

2. Import various plug-ins

Insert whatever you need

For example, cordova plugin add cordova-plugin-wechat –variable wechatappId = XXXX

And so on a series, can go to the official website

3. Config. XML configuration

config.xml

There are a lot of configuration, find their own, say a few with packaging APK, wechat login related

The ID attribute, which is the name of the Android package, will be used on the wechat development platform in the future

< widget id = "com. XXXXXXXX. H5app" ios - CFBundleIdentifier = "XXXXX" version = "1.0.0" XMLNS = "http://www.w3.org/ns/widgets" XMLNS: CDV = "http://cordova.apache.org/ns/1.0" > < name > < name > < description > < description > < / author >Copy the code

3. Debug and package into APK

3.1 Generate debugging APK

 cordova run android
Copy the code

Next, you can choose to pack

Package as an unsigned APK

 cordova build android --release
Copy the code

Build a certificate

Keytool -genkeypair -alias alias -keyalg RSA -validity 20000 -keystore aaaaa.keystoreCopy the code

To the apk signature

Jarsigner -verbose -keystore aaaaa.keystore -signedjar aaa.apk aaaa-unsigned. Apk alias jarsigner -verbose -keystore [Signature file path] -signedjar [signed APK file path] [unsigned APK file path] [Certificate alias] Parameter description: -verbose Displays detailed information for viewing the signature result. -keystore Specifies the path for storing the signature file. -signedjar Specifies the path for storing the apK file after the signatureCopy the code

Signed, endless, wechat login needs to go to wechat development platform binding package name, and signature

The Android platform application download address: did not fill in the application of signature: XXXXXXXXXXXXXXXXXXXXXXXXXXXXX package name: com. XXXXXXXXXXXXXX. H5appCopy the code

5. Summary of problems

5.1 Gradle Displays an Error when Cordova runs android

FAILURE: Build failed with an exception. Failed: The build failed with an exception.

• Where: Initialization script ‘F:\gradle-7.0\init.d\init.gradle’ line: 1

• What went wrong: Could not compile initialization script ‘F:\gradle-7.0\init.d\init.gradle’.

• Startup failed: Initialization script ‘F:\gradle-7.0\init.d\init.gradle’: 1: Unexpected input: ‘{‘ @ line 1, column 13. allprojects {

Maven {url ‘file:///C:/Java/maven_repository’} path :// c :/Java/maven_repository Syntax error compiles however. Heck, it would be nice to change it

 allprojects {     repositories {         maven { url 'file:///C:/Java/maven_repository'}         mavenLocal()         maven { name "Alibaba" ; url "https://maven.aliyun.com/repository/public" }         maven { name "Bstek" ; url "http://nexus.bsdn.org/content/groups/public/" }         mavenCentral()     } ​     buildscript {          repositories {              maven { name "Alibaba" ; url 'https://maven.aliyun.com/repository/public' }             maven { name "Bstek" ; url 'http://nexus.bsdn.org/content/groups/public/' }             maven { name "M2" ; url 'https://plugins.gradle.org/m2/' }         }     } }
Copy the code

5.2 An Error Was reported when the Android Version was Too High. Net ::ERR_CLEARTEXT_NOT_PERMITTED

• Starting with Android 9.0 (API level 28), plaintext support is disabled by default. Therefore, HTTP urls cannot be loaded in webView. I selected Android 9 and API29, so they cannot be accessed.

• Solution: Modify the Settings to enable plaintext support

  • File platforms \ android \ app \ SRC \ main \ AndroidManifest XML, add the android: hardwareAccelerated = “true”

     <application android:hardwareAccelerated="true">   ........................................ </application>
    Copy the code