Cordova + Vue creates the Hybird App

Cordova is introduced

Cordova is a development framework supported by the Apache Foundation that uses HTML5 + CSS3 + JS to build multi-platform apps. It allows you to call native apis of your phone (Android, IOS, Windows Phone) and wrap your Web applications in a native APP shell, often called a Hybrid APP. How can a front-end developer build a simple APP with Vue from zero

Environment introduction

NodeJs V10.3.0
VueCli V4.5.9
Cordova V10.0.0
The JDK V1.8.0
Gradle V6.0.1
Android SDK API Level 29

Cordova installation

We use NPM to install the Cordova scaffold globally:

npm install -g cordova

// After downloading, enter cordova -v to check whether the installation is successful. If the version number is displayed, the installation is successful
cordova -v  
Copy the code

Create the Cordova project

// After the scaffolding is installed, we create the Cordova project using the command line
cordova create cordovaVueDemo
// After the creation is successful, go to the directory, and then we add the platform
cd cordovaVueDemo
cordova platform add android 
Copy the code

The platforms, plugins, and WWW folders are where platform files (such as Android, ios, and Browser), Cordova, and package resources are stored

In this case, integrate the Vue project into Cordova and run the command to create the Vue project

vue create app
Copy the code

We end up with a directory where the app folder is the vue project. If we want to package the vue project as apK, we need to build vue’s static resource file into the WWW folder of the Cordova project. Those of you who use Vue a lot know that you need to configure the output directory of the package files on vue.config.js

module.exports = {
  outputDir: ".. /www".assetsDir: "static",}// At this point, you can package the Vue project into the WWW folder in Cordova
npm run build 
Copy the code

This section describes Cordova configurations

The main configuration file of Cordova is config. XML, in which you need to operate the app name, logo, icon, startup image, and various permissions

To configure the startup diagram, install the Cordova-plugin-SplashScreen plug-in

cordova plugin add cordova-plugin-splashscreen

// Note that you must reinstall the platform after installing the plug-in to take effect
cordova platform remove android
cordova platform add android 
Copy the code

<? xml version='1.0' encoding='utf-8'? >// id Id of the application
// version Version of the application this version number corresponds to the actual version number of the project
<widget id="xxx.xx.xxx" version="1.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
    <name>The name of the App</name>
    <description>The App is introduced</description>
    <author email="[email protected]" href="http://xxxxxx.com">The authors introduce</author>// Application start page, default index.html<content src="index.html" />// Whitelist * indicates that any IP address can be accessed and specific addresses can be specified<access origin="*" />
    <allow-intent href="http://*/*" />
    <allow-intent href="https://*/*" />
    <allow-intent href="tel:*" />
    <allow-intent href="sms:*" />
    <allow-intent href="mailto:*" />
    <allow-intent href="geo:*" />// The default is false. When set to true, instead of stretching the image to fill the screen, the image is displayed at its original scale.<preference name="SplashMaintainAspectRatio" value="true" /> 
    <platform name="android">
        <allow-intent href="market:*" />
        // app icon
        <icon src="resources/icon/36.png" density="ldpi" />
        <icon src="resources/icon/48.png" density="mdpi" />
        <icon src="resources/icon/72.png" density="hdpi" />
        <icon src="resources/icon/96.png" density="xhdpi" />
        <icon src="resources/icon/144.png" density="xxhdpi" />
        <icon src="resources/icon/192.png" density="xxxhdpi" />// App startup diagram<splash density="port-hdpi" src="resources/splash/480_800.png" />
        <splash density="port-ldpi" src="resources/splash/200_320.png" />
        <splash density="port-mdpi" src="resources/splash/320_480.png" />
        <splash density="port-xhdpi" src="resources/splash/720_1280.png" />
        <splash density="port-xxhdpi" src="resources/splash/960_1600.png" />
        <splash density="port-xxxhdpi" src="resources/splash/1280_1920.png" />
        <splash density="land-hdpi" src="resources/splash/800_480.png" />
        <splash density="land-ldpi" src="resources/splash/320_200.png" />
        <splash density="land-mdpi" src="resources/splash/480_320.png" />
        <splash density="land-xhdpi" src="resources/splash/1280_720.png" />
        <splash density="land-xxhdpi" src="resources/splash/1600_960.png" />
        <splash density="land-xxxhdpi" src="resources/splash/1920_1280.png" />
    </platform>
    <platform name="ios">
        <allow-intent href="itms:*" />
        <allow-intent href="itms-apps:*" />
    </platform>
</widget> 
Copy the code

Cordova builds a self-signed Android APK

Let’s create a new folder in the root directory called keyStore to store our signature package

Run a command in the keyStore directory to generate the signature package

keytool -genkey -v -keyalg RSA -keystore xxx.keystore -alias xxx -validity 1000Enter the keystore password: Enter the new password again: what is your first and last name? [Unknown]: What is the name of your organizational unit? [Unknown]: What is the name of your organization? [Unknown]: What is the name of your city or region? What is the name of your province/city/autonomous region? [Unknown]: What is the two-letter country code for this unit? [Unknown]: CN=Unknown, OU=Unknown, O=Unknown, L=Unknown, ST=Unknown, C=Unknown Is it correct? [No]: Y is generating for the following objects2.048Bit RSA key pair and self-signed certificate (SHA256withRSA) (Validity period:1.000Days): CN=Unknown, OU=Unknown, O=Unknown, L=Unknown, ST=Unknown, C=Unknown Enter the key password of < XXX > (if it is the same as the key store password, press Enter): [Storing xxx.keystore]// PS: this command can be null except that the keystore password must be written. I will execute this command twice to generate a release and a debug signature package
keytool -genkey -v -keyalg RSA -keystore debug.keystore -alias debug -validity 1000

// Next, you need to create a new build.json file in the following directory. This file is used to configure the signature package. In cordova said to https://cordova.apache.org/docs/en/10.x/guide/platforms/android/index.html#using-buildjson website
{
  "android": {
    "debug": {
      "keystore": "keystore/debug.keystore".// Sign the package name
      "storePassword": "* * * * * *".// Keystore password
      "alias": "debug"./ / alias
      "password": "* * * * * *".// Sign the package password
      "keystoreType": ""
    },
    "release": {
      "keystore": "keystore/xxx.keystore"."storePassword": "* * * * * *"."alias": "xxx"."password": "* * * * * *"."keystoreType": ""}}}Copy the code

With that done, we’re ready to start building Android Apk

Cordova builds the Android Apk

Before building Apk, we must first confirm whether we have installed the Android platform. The most direct way is to check whether there is an Android folder in the Platforms folder. If there is, it means that it has been installed

cordova platform add android // By default, the latest version is installed
cordova platform add android@xxx // If you want to install the specified version, add the version number after it

// Run the build command
cordova build android / / the debug version
cordova build android -release // Official/release

// When the console displays successful and the apK path is displayed, the build is successful
Copy the code

Some common problems and solutions to build APK

// Gradle file download failed, the following error is reported, the reason is because of network problems, my solution is to use scientific Internet
FAILURE: Build failed with an exception.

* What went wrong:
A problem occurred configuring root project 'android'.
> Could not resolve all artifacts for configuration ':classpath'.
   > Could not download proguard-gradle-6.03..jar (net.sf.proguard:proguard-gradle:6.03.)
      > Could not get resource 'https://jcenter.bintray.com/net/sf/proguard/proguard-gradle/6.0.3/proguard-gradle-6.0.3.jar'.
         > Could not GET 'https://jcenter.bintray.com/net/sf/proguard/proguard-gradle/6.0.3/proguard-gradle-6.0.3.jar'.
            > java.net.SocketException: Connection reset 
            
    
I tried to unzip the package and put it back. It worked, but it didn't work a couple of times, so I just went into the directory and deleted the package and then repackaged it
Unzipping C:\Users\HD\.gradle\wrapper\dists\gradle-2.13-all\7hsc6vr6mi3i6i5m7q9hj4ci1q\gradle-2.13-all.zip to C:\Users\HD\.gradle\wrapper\dists\gradle-2.13-all\7hsc6vr6mi3i6i5m7q9hj4ci1q

// If you want to download a file, you will not be able to download it
downloading https://xxxxxxxxxxx.comXXXXXXXXX File path// He has a link to the file and a path to save the file after it is downloaded. I usually go directly to download the file and put it in this path. When I execute the package command again, he will check for the existence of the file, if it exists, he will not download it again
 
Copy the code

Cordova + Vue creates the Hybird App

Cordova is introduced

Environment introduction

Cordova installation

Create the Cordova project

This section describes Cordova configurations

Cordova builds a self-signed Android APK

Cordova builds the Android Apk

Some common problems and solutions to build APK

Related Posts

Read files using JavaScript through the File API

A method that uses a rich text editor in egg.js

Ts + esBuild Builds custom CLI scaffolding