What is Cordova?
Cordova is a platform for building hybrid mobile applications using HTML, CSS and JavaScript
Apache Cordova is an open source mobile development framework, which allows you to use standard Web technologies such as HTML5, CSS3 and JavaScript for cross platform development, avoiding the native development language of each mobile platform. The application executes in a package for each platform and relies on standard API bindings to access the sensors, data and network status of each device. "
Therefore, Cordova actually provides a platform for hybrid mobile applications, which can be used on different platforms, such as Android, IOS, Ubuntu, firefox OS, etc;
Click here to enter Cordova official website!!!
Environment configuration
All the following operations use Cordova in windows
- I don't need to be burdened with the Android SDK and Git. You must have.
- Download node js
Poke hard here to enter the node JS official website
What is node js?
Officially, node js ® Is a javascript runtime based on the Chrome V8 engine. You can also say node JS is javascript running on the server side. In general, node JS is a development environment for javascript.
What is npm?
NPM is a package management tool installed with NodeJS. It can solve many problems in NodeJS code deployment. The common use scenarios are as follows:
Allows users to download third-party packages written by others from the NPM server for local use. Allows users to download and install command line programs written by others from the NPM server for local use.
Allows users to upload their own packages or command-line programs to the NPM server for others to use.
Pay attention here!!! When downloading, you need to choose whether windows system or macOS, followed by whether windows system is 32 or 64 bit!!! Pay attention!!!
Then open the downloaded file and install next all the way, but!!!! here
Select the fourth ADD to PATH, and it will directly add the node JS environment variables are added to your computer as follows ---
Test for successful installation
Open cmd and execute the command: node - V (view the current version number) npm - Version (er... This means to view the version number of npm)
Complete the above steps to your node JS is installed.
4. Now install Cordova:
-
Install Cordova cmd command: npm install -g cordova
-
Check whether the installation is successful. cmd command: npm install -g cordova
At this point, you can use Cordova to build your own project.
use
Create the first Cordova project
-
Create a new blank folder and create app hello in this directory
cmd command: Cordova create Hello com example. hello HelloWorld
All subsequent commands should run the cmd command in the project directory or any subdirectory of the project directory: cd hello -
Add target platform to APP. Cordova can support iOS, android and web, which can be added according to your needs.
cmd command:
cordova platform add ios
cordova platform add android
cordova platform add browser
After installation, three folders will appear in the platforms Directory:
To ensure that the platform is added correctly, you can check the platform status: cmd command: cordova platform ls
To build and run the App, you need to install the SDK for each platform. Check whether you meet the requirements of building the platform:
cmd command: cordova requirements
At this point, your first Cordova can run
Just like that.
Summary: there are three steps to create Cordova:
The first step is to create a folder, and then create a Cordova project in the folder
The second step is to enter the directory of the Cordova project you created and add the platform you want to use (android, ios, web)
The third step is to run
Large set of IOS instructions:
Install plug-in: Cordova plugin add Cordova hot code push plugin
Install the plug-in through the network address: cordova plugin add https://github.com/nordnet/cordova-hot-code-push.git
Install the local plug-in: Cordova plugin add e: \ project \ plugins \ Cordova hot code push local dev Addon
Install the specified version plug-in: Cordova plugin add Cordova plugin- device@1.1.4
Update plug-in: cordova plugin update
Delete plug-in: Cordova plugin remove Cordova hot code push plugin
View installed platforms: cordova platforms list
Add platform: cordova platform add android
Compile project: cordova build android
Viewing cordova instructions: cordova help
Custom plug-ins:
We have just created a Cordova project. Now let's create a Cordova plug-in:
Note in particular that the package name of the android project must be com example. Hello, otherwise the compilation will not pass.
- Create plugin cmd command:
plugman create --name FirstPlugin --plugin_id cordova-plugin-first-plugin --plugin_version 1.0.0
FirstPlugin Represents the name of the plug-in
cordova-plugin-first-plugin plug-in unit id
1.0.0 edition
Created successfully
- Add Android plugin
$plugman platform add --platform_name android
Note: the platform has android,ios,windows
take FirstPlugin The document should read cordova-plugin-first-plugin
Modified file structure
cordova-plugin-first-plugin
|-- src // Platform source code
|-- android // Android platform source code
|-- www // Calling native js code
|-- package.json //
|-- plugin.xml // Plug in configuration file
- First plugin JS is
introduce exec this cordova Provided execution function
var exec = require('cordova/exec');
//Just expose an object for external calls.
var FirstPlugin = {
testFirstPlugin: (arg0, success, error) => {
exec(success, error, 'FirstPlugin', 'testFirstPlugin', [arg0]);
}
}
module.exports = FirstPlugin;
- Add plugin Modify XML to:
<?xml version='1.0' encoding='utf-8'?>
<plugin id="cordova-plugin-first-plugin" version="1.0.0" xmlns="http://apache.org/cordova/ns/plugins/1.0"
xmlns:android="http://schemas.android.com/apk/res/android">
<name>FirstPlugin</name>
<js-module name="FirstPlugin" src="www/FirstPlugin.js">
<clobbers target="FirstPlugin"/>
</js-module>
//Added Android platform
<platform name="android">
<config-file parent="/*" target="res/xml/config.xml">
//js call name
<feature name="FirstPlugin">
//value:FirstPlugin.java storage path
<param name="android-package" value="cordova.plugin.first.plugin.FirstPlugin"/>
</feature>
</config-file>
<config-file parent="/*" target="AndroidManifest.xml"></config-file>
// src: is the corresponding stored in the plug-in Java path, target dir: when installing the plug-in The location of the java file should correspond to the value path above
<source-file src="src/android/FirstPlugin.java" target-dir="src/cordova/plugin/first/plugin"/>
</platform>
</plugin>
- Add package JSON file
plugman createpackagejson [Plug in path]
6. Add plug-ins
To based cordova In your project, enter the following command cordova plugin add [Plug in path]
7. Insert firstplugin Change java to:
package cordova.plugin.first.plugin;
import android.app.AlertDialog;
import com.example.hello.R;
import org.apache.cordova.CordovaPlugin;
import org.apache.cordova.CallbackContext;
import org.json.JSONArray;
import org.json.JSONException;
import org.json.JSONObject;
/**
1. This class echoes a string called from JavaScript.
*/
public class FirstPlugin extends CordovaPlugin {
@Override
public boolean execute(String action, JSONArray args, CallbackContext callbackContext) throws JSONException {
if (action.equals("testFirstPlugin")) {
String message = args.getString(0);
this.testFirstPlugin(message, callbackContext);
return true;
}
return false;
}
private void testFirstPlugin(String message, CallbackContext callbackContext) {
if (message != null && message.length() > 0) {
AlertDialog alertDialog = new AlertDialog.Builder(cordova.getContext())
.setTitle("This is the title")//title
.setMessage("This is the content")//content
.setIcon(R.mipmap.ic_launcher)//Icon
.create();
alertDialog.show();
callbackContext.success(message);
} else {
callbackContext.error("Expected one non-empty string argument.");
}
}
}
- js call example
function onDeviceReady() {
// Cordova is now initialized. Have fun!
try {
// console.log(window.FirstPlugin);
window.FirstPlugin.testFirstPlugin((res)=>{
console.log(res);
},(error)=>{
},null);
} catch (e) {
console.log(e);
console.log("Please run on the real machine or simulator");
}
console.log('Running cordova-' + cordova.platformId + '@' + cordova.version);
document.getElementById('deviceready').classList.add('ready');
}