Cordova practice development record

Background: Hope to achieve a set of VUE code can be used on multiple platforms, improve development efficiency

Simple cognition Cordova

What is a Cordova

Liverpoolfc.tv: cordova.axuer.com/

A mobile application development framework
Essentially HTML, CSS, JavaScript wrapped in a native shell
PhoneGap is the core engine that drives PhoneGap, which Adobe acquired in 2011
Is Apache’s top open source project

Cordova provides a set of device-specific apis that allow mobile apps to access native device functions such as cameras and microphones in JavaScript.

Three categories of mobile development

There are three common categories of mobile development

1. Native App 2. Web App 3.

The pros and cons of Cordova

Advantages: cross-platform, easy to transplant, rapid development, low cost. Disadvantages: the execution speed relative native will be slow some, write once, want everywhere debugging.

Cordova architecture

Web App: A place to store your application code, represented by your specific business logic modules.
WebView: Provides a complete user access rendering of the application.
Cordova Plugins: Provides an interface to communicate with native components and is bound to a standard device API, which can be called in JavaScript.

Cordova environment configuration

The position of Cordova in the overall App space

Cordova is installed in an environment

Install Node.js. Install Cordova Cli. Download and install the global module of Cordova

npm install -g cordova / cnpm install -g cordova npm install -g cordova --registry=https://registry.npm.taobao.org cnpm Install -g [email protected] // Install the specified versionCopy the code

Install the Java JDK

Download address: www.oracle.com/java/techno…

View the version: Java -version

For JDK installation, see yiibai.com/java/java_e…

Install the Android SDK

Website address: www.android-studio.org/

Installation reference: www.yiibai.com/android/and…

Environment related

Overall environment 1
Overall Environment 2
Overall Environment 3
Overall Environment 4
Overall environment — Zhihu
Overall environment – Full version
Build the Gradle environment
Java environment setup

Compilation of the first application

Cordova --version // Check the 10.0.0 version of Cordova installedCopy the code

Create a project

Cordova Create Project name com. company name. // Create an empty Cordova project. Cordova create Cordovademo Cordova create MyApp. // Create an empty Cordova project To get the complete set of options, runCopy the code

The cordova project is being created.

Uninstall cordova NPM uninstall -g cordova Delete the cordova file NPM \node_modules\cordova NPM install -g cordova --registry=https://registry.npm.taobao.orgCopy the code

Add the platform

CD MyApp Cordova Platform Add Android // Add cordova Platform // To obtain the complete list of platforms, please runCopy the code

Run the project

cordova run android  
Copy the code

Add android Studio to your platforms and run cordova run Android.

Note the package name when creating the project: Use the package name when publishing the online package, note

For details about how to modify an application package name, see www.ionic.wang/article-ind…

1. Change the package name in config.xml

2. Run the cordova Platform Add Android command again

After modifying the project, run Cordova Prepare

Platforms \android\app\ SRC \main\assets\ WWW

Compile the project

cordova build android
Copy the code

Packaging error

Checking Java JDK and Android SDK versions
ANDROID_SDK_ROOT=undefined (recommended setting)
ANDROID_HOME=F:\software\Android\Sdk (DEPRECATED)
Could not find an installed version of Gradle either in Android Studio,
or on your system to install the gradle wrapper. Please include gradle
in your path, or install Android Studio
Copy the code

Method one:

Open the Android directory import package with Android Studio.

Android \app\build\outputs\apk\debug

Method 2:

ANDROID_SDK_ROOT = ANDROID_SDK_ROOT = ANDROID_SDK_ROOT = ANDROID_SDK_ROOT = ANDROID_SDK_ROOT = ANDROID_SDK_ROOT

If you don’t know where the Android SDK is, do the following:

Open the Android Studio

The environment variables are configured as follows

Gradle is installed when you first install Android Studio

Add gradle/bin path to system variable path

Overview of the first project

Config. XML configuration page, configure the start page project name and other basic content
Hooks hold some custom extensions
Platforms Stores the added platform runtime
Plugins hold imported plug-ins
WWW developed HTML5 directory

Actual packaging files: platforms/android/app/SRC/main/assets/WWW

Basic listener for Cordova events

Cordova plugin and event description

Cordova encapsulates device functions in terms of events or plug-ins

Plug-ins are plugins that encapsulate the functions provided by the device, such as camera, address book, GPS, etc. They are provided in the form of custom JS root objects or overwriting standard objects. Plug-ins need to be installed separately to use.

Event overview of Cordova

The name of the event	instructions
deviceready	This event is triggered when Cordova is loaded
pause	This event is triggered when the application is placed in the background
resume	This event is triggered when the application returns from the background
backbutton	This event is triggered when the back button is pressed
…	…

Use of the Cordova event

All events are called in a similar way, using JS event listener (addEventListener).

document.addEventListener("deviceready", onDeviceReady,false); function onDeviceReady() { document.addEventListener("pause", onPause, false); document.addEventListener("resume", onResume, false); document.addEventListener("menubutton", onMenuKeyDown, false); // Add a similar listener to other events}Copy the code

Procedure for starting the Cordova application

$(document).ready(); $(document).ready(); Events in Cordova are not necessarily available. Register the Deviceready event

Example code:

/* * Cordova's API is packaged in the form of plugins and events. *//* * When the application is suspended and is in the background, resume is called. When the application is back to the front, resume is called. Call execution * 4, backbutton When the return key is clicked, call *//* * Deviceready device API is ready, call * Argument 1: event name * Argument 2: callback function * Argument 3: *// wait for the underlying device code related to Cordova to loadCopy the code

document.addEventListener('deviceready'.function () {
  log('Device API is ready to call other methods or listen for events')
  // Add an application suspend listener
  document.addEventListener('pause'.function () {
    log('The application is suspended')})document.addEventListener('resume'.function () {
    log('The application is back')})document.addEventListener('backbutton'.function () {
    log('The back key was clicked')})})// Output the log content to the screen body
function log(msg) {
  var p = document.createElement('p')
  p.style.fontSize = '14px'
  p.innerHTML = msg
  // Output to the body
  document.body.appendChild(p)
}

Copy the code

Unload the plugin

cordova plugin rm cordova-plugin-network-information
Copy the code

Use of the Cordova plugin

equipment

1. Install plug-ins

cordova plugin add cordova-plugin-device
Copy the code

network

1. Install plug-ins

cordova plugin add cordova-plugin-network-information
Copy the code

The equipment location

1. Install plug-ins

cordova plugin add cordova-plugin-geolocation
Copy the code

file

1. Install plug-ins

Cordova plugin add cordova-plugin-file-transfer cordova plugin add cordova-plugin-fileCopy the code

Config.xml

Change the name

<widget ... > <name>HelloCordova</name></widget>Copy the code

Change the description

<widget ... > <description>A sample Apache Cordova application</description></widget>Copy the code

Change the icon

<widget ... > <icon src="res/icon.png" /></widget>Copy the code

cordova vue

Package the Vue project as an app:

1, NPM run build (note: image directory path)

2. Copy the packaged static resources of Vue to cordova

3. Run Cordova Prepare

Note:

Vue init webpack-simple Project name

Modified: publicPath in webpack.config.js

Change publicPath: ‘/dist’ to publicPath: ‘dist/’

Change the path to introduce dist in index and get rid of/(important)

Vue Init WebPack project name

Modify: config/index.js change assetsPublicPath: ‘/’ to assetsPublicPath: ‘./ ‘

The process of packaging a Vue project with Cordova

Pull the latest project code

git pull

Packaging dist Files

npm run sit

Modify the WWW folder

Copy the files from the packaged dist folder into the WWW folder of the Cordova project

Pack android APK

cordova build android –release

Android’s signature

Ask.dcloud.net.cn/article/357…

Cordova platform add [email protected]Copy the code

Resolve error:

Error: Could not find gradle wrapper within Android SDK. Might need to update your Android SDK - Android

cordova platform rm android
cordova platform add [email protected]
Copy the code

Refer to the link

Generating a Signature Certificate

Run the keytool -genkey command to generate a certificate:

Copy the code keytool -genkey -alias testalias -keyalg RSA -keysize 2048 -validity 36500 -keystore test.keystoreCopy the code

Testalias is the certificate alias. You can set it to a character. You are advised to use letters and digits
Test. keystore is the name of the certificate file. You can change it to a desired file name or specify a complete file path
36500 indicates the validity period of the certificate. It indicates that the validity period is 100 years, in days. You are advised to set the validity period to a longer period to avoid certificate expiration

To sign an APK package, use the jarsigner tool and the command format is:

Jarsigner -verbose -keystore [path for storing your private key] -signedjar [path for storing signed files] [path for storing unsigned files] [Name of your certificate] # Jarsigner parameter Description The -keystore argument specifies the absolute path to your private key, for example: The c:\mykeystore -signedjar argument specifies the absolute path to the signed APk file. For example, c:\signed.apk [unsigned file path] specifies the absolute path to the signed APk file that you downloaded from us. For example c:\unsigned.apk [your certificate name] refers to the certificate name you set when you created the keyCopy the code

Reference: Use the Jarsigner tool to sign, android-APK signature tool – Jarsigner and apkSigner

Packaging ios ipa

cordova build ios

Run Xcode again, open the Cordova ios folder, and run build in Xcode once

Optimize the apk:

zipalign -v 4 android-release.apk.apk appname.apk
Copy the code

Ali Cloud mirror

maven{url 'http://maven.aliyun.com/nexus/content/groups/public/'}

maven{ url "https://jitpack.io"}

google()

jcenter()
Copy the code

Problem solving record

Landscape screen is forbidden on Cordova

Blog.csdn.net/u010377383/…

In the config. XML

<preference name="orientation" value="portrait" />
Copy the code

Could not find tools.jar

Android Packaging

Could not find tools.jar
Please check that /Library/Internet Plug-Ins/JavaAppletPlugin.plugin/Contents/Home contains a valid JDK installation.
Copy the code

Solution:

The simplest is to copy tools.jar from the JDK folder directly to jre\lib

1. Look at the address first

// Check the Java version
java -version

// Check the Java installation path
java -verbose

// The command to view the JDK location
/usr/libexec/java_home -V (upgrade OSX11.0.1After executing this command, you may see two paths, one isJDKThe other is:/Library/Internet Plug-Ins/JavaAppletPlugin.plugin/Contents/HomeThere is information on the Internet that this isJREThe path).
Copy the code

2, manually copy tools.jar, and change the first path below to your own path obtained in step 1

Sudo cp/Library/Java/JavaVirtualMachines jdk1.8.0 _191. JDK/Contents/Home/lib/tools. The jar/Library/Internet \ Plug-Ins/JavaAppletPlugin.plugin/Contents/Home/libCopy the code

The version number here should be replaced with the version found in the first instruction, and then authorization can be done

Description The HTTP network request of Cordova on Android version failed to be configured

www.jianshu.com/p/12ab6718e…

Add the following code to cordovaApp\platforms\android\app\ SRC \main\ Androidmanifest.xml

<application android:usesCleartextTraffic="true">
Copy the code

Simple cognition Cordova

What is a Cordova

Three categories of mobile development

There are three common categories of mobile development

The pros and cons of Cordova

Cordova architecture

Cordova environment configuration

The position of Cordova in the overall App space

Cordova is installed in an environment

Environment related

Compilation of the first application

Create a project

Add the platform

Run the project

Compile the project

Packaging error

Overview of the first project

Basic listener for Cordova events

Cordova plugin and event description

Event overview of Cordova

Use of the Cordova event

Procedure for starting the Cordova application

Unload the plugin

Use of the Cordova plugin

equipment

network

The equipment location

file

Config.xml

cordova vue

The process of packaging a Vue project with Cordova

Pull the latest project code

Packaging dist Files

Modify the WWW folder

Pack android APK

Android’s signature

Resolve error:

Generating a Signature Certificate

Packaging ios ipa

Optimize the apk:

Problem solving record

Landscape screen is forbidden on Cordova

Could not find tools.jar

Solution:

Description The HTTP network request of Cordova on Android version failed to be configured

Related Posts

Refactor your applet using React Hooks

How do I distribute the NPM plug-in package?

“1W7 word in the advanced front-end interview will know will know” ultimate version