Cordova study notes (1) – Cordova.js in the first trick knife

Foreword

The first task of the new company is to study the implementation principle of the hybrid App middle layer and develop the middle layer plug-in. This task is very interesting and challenging. Although I have done 5+ App development in DCloud before, there is really not much involved in the middle layer. This series of articles belongs to the series of opening cordova study notes. This article is mainly to build a cordova project from scratch and understand the basic content of cordova development.

Create the first App

Apache Cordova is an open source mobile development framework. Allows you to use standard web technologies-HTML5, CSS3 and JavaScript for cross-platform development. The specific execution of the application on each platform is encapsulated and relies on standard API binding to access the functions of each device, such as sensors, data, and network status.

Cordova official website: http://cordova.apache.org/
Cordova Chinese website: http://cordova.axuer.com /
Cordova Chinese site: http://www.cordova.org.cn/

1. Install Cordova CLI

npm install -g cordova

After the installation is complete, you can check the version number through cordova -v. This article is built under V6.5.0.

2. New project

cordova create  [ID [NAME [CONFIG]]] [options]

< strong>Create a Cordova project:

• PATH —— project path

• ID —— app package name- used in

• NAME —— app name

• CONFIG —— configuration file address json string whose key/ values ​​will be included in [PATH]/.cordova/config.json

Options:

• < p>–template= … use a custom template located locally, in NPM, or GitHub.

• –copy-from |src= ……………… deprecated, use –template instead.

• –link- to= …………………… symlink to custom www assets without creating a copy.

Example:

cordova create hello-cordova io.zhaomenghuan HelloCordova

This will create the necessary directories for your cordova application. By default, the cordova create command generates the skeleton of a web-based application, and the home page of the project is the www/index.html file.

3. Add platform

All subsequent commands need to be in the project directory or project directory Run in any subdirectory of:

cd hello-cordova

Add the target platform to your App. We will add ios and android platforms, and make sure they are saved in config.xml:

cordova platform add ios --save
cordova platform add android --save

Run add or remove platform commands will affect the project platforms Content, in this directory there is a subdirectory for each specified platform.

Note: When you use CLI to create an application, do not modify any files in the /platforms/ directory. This directory is usually rewritten when preparing to build an application or reinstall a plug-in.

Check your current platform settings:

cordova platform is

Installed platforms:
 android 6.1.2
Available platforms:
 amazon-fireos ~3.6.3 (deprecated)
 blackberry10 ~3.8.0
 browser ~4.1.0
 firefoxos ~3.6.3
 webos ~3.7.0
 windows ~4.4.0
 wp8 ~3.8.2 (deprecated)

Install and build prerequisites:
To build and run the app, you need to install every You need the SDK of the platform. In addition, when you use the browser to develop, you can add the browser platform, which does not require any platform SDK.

Check if you meet the requirements of the build platform:

cordova requirements

Requirements check results for android:
Java JDK: installed 1.8.0 
Android SDK: installed true
Android target: installed android-7,android-8,android-9,android-10,android-11,android-12,android-13,android-14,android -15,android-16,android-17,android-18,android-19,android-20,android-21,android-22,android-23,android-24,android-25
Gradle: installed< /pre> 
The first time we use it, we may encounter the following error:
 
Error: Failed to find'ANDROID_HOME' environment variable. Try setting it manually.
Failed to find'android 'command in your'PATH'. Try update your'PATH' to include path to valid SDK directory.
This is because we have not configured environment variables:


Set the JAVA_HOME environment variable and specify it as the JDK installation path


Set the ANDROID_HOME environment variable and specify it as the Android SDK installation path


 Add the tools and platform-tools directories of the Android SDK to your PATH


For the environment configuration under the android platform, I won’t go into details here. For details, please refer to:


Requirements for the Android platform


Requirements for the iOS platform


Requirements for the Windows platform< /p>< /li> 
4. Build App
By default, cordova create produces a skeleton based on a web application, and the project start page is located at www/index. html
 Document. Any initialization task should be in the event handler of the deviceready event in the www/js/index.js file. 
Run the following command to build for all added platforms:
cordova build
You can choose to limit the platform range in each build-in this example it is< code>android:
cordova build android

Note: When using for the first time, the command line prompts Downloading https://services.gradle.org/distributions/gradle-2.14.1-all.zip is to download the corresponding gradle and automatically unzip and install it. Depending on the network conditions, it may take a long time and It is easy to report errors. 
Use Cordova to compile Android platform program tips: Could not reserve enough space for 2097152KB object heap. 
Error occurred during initialization of VM
Could not reserve enough space for 2097152KB object heap
It basically means that the system memory is not enough and the VM creation fails. I tried several methods on the Internet, but the last method is fine:
Start->Control Panel->System->Advanced Settings->Environment Variables->System Variables
New Variables:< br>Variable name: _JAVA_OPTIONS 
Variable value: -Xmx512M
5. Run the App
We have multiple ways to run our App, in Using different methods in different scenarios helps us quickly develop and test our applications. 
Run the following command on the command line, the App will be rebuilt and can be viewed on the emulator of a specific platform:
cordova emulate android
 Insert your phone into your computer and test the App directly on the phone:
cordova run android
Before the packaging operation, we can preview the app UI by creating a local service and use the specified The port or the default value is 8000 to run the local web server www/assets. Visit the project: http://HOST_IP:PORT/PLATFORM/www. 
cordova serve [port]
Reference documents:


Set up the Android emulator


Cordova run command reference document


Cordova emulate command reference document


6. Install plug-in< /strong>

The power of cordova is that we can expand the capabilities of our web projects by installing plug-ins, such as calling the system's low-level APIs to call the low-level functions on the device, such as cameras and photo albums. Plug-in management is achieved through the cordova plugin command. 
You can search for the plug-in you need here: Cordova Plugins. 
cordova {plugin | plugins} [
 add  [..] {--searchpath= | --noregistry | --link | --save |- -browserify | --force} |
 {remove | rm} { | } --save |
 {list | ls} |
 search [] |
 save |
]
Add plugin:
cordova plugin add  [...]
 Remove plugins:
cordova plugin remove [...]
7. Platform-centric workflow development App
Above We are working in a cross-platform (CLI) workflow. In principle, if we don’t need to write native layer custom components ourselves, we can complete our work only on CLI. Of course, if we need to further understand cordova native and js For communication, we need to switch to a platform-centric workflow, that is, import our cordova project to the native project. For example: we can use android studio to import our newly created cordova project. 

Custom plug-in development
Officially recommended plug-ins follow the same directory structure, the root directory is plugin.xmlconfiguration file, the src directory contains the native code of the platform, and the js interface code is placed under the www. The basic configuration method and code structure follow a certain rule. We can use plugman to generate a plug-in template, and change it to write a custom plug-in. 

1. Install plugman, use plugman to create a plug-in template
npm install -g plugman
For example, here we create a nativeUI Plug-in:
plugman create --name NativeUI --plugin_id cordova-plugin-nativeui --plugin_version 0.0.1
Parameter introduction:
pluginName: Plugin name: NativeUI
pluginID: plug-in id: cordova-plugin-nativeui
oversion: version: 0.0.1
directory: an absolute or relative path directory, which will create a plug-in project
variable NAME=VALUE: additional Description, such as author information and related description
Enter the plugin directory
cd NativeUI
Add Android platform to plugin.xml
plugman platform add --platform_name android
The generated plugin file structure is:
NativeUI:

├── src
 └── android
 └── NativeUI.java
├── www
 └── NativeUI.js
└── plugin.xml
2. Modify configuration File
plugin.xml File field meaning:



 element

 th> 
Description




plugin
 Define the namespace, ID and plugin version. It should be defined in the http://apache.org/cordova/ns/... namespace. The ID of the plugin is displayed in the plugin list when the cordova plugins command is entered.  


name
 defines the name of the plug-in. 


description
 defines the description information of the plug-in. 


author
 defines the name of the plugin author. 


keywords
Define keywords related to the plugin. The Cordova R&D team has established a public and searchable plug-in repository, and the added keywords can help to be discovered after you submit the plug-in to the repository. 


license
 defines the license of the plug-in. 


engines
Used to define the Cordova version supported by the plug-in. Then add the engine element to define each supported Cordova version. 


js-module
 refers to the js file name, and this file will automatically end with