Vor nicht allzu langer Zeit musste ich eine neue IT-Seite entdecken - die Entwicklung mobiler Anwendungen für Android mithilfe der Cordova-Plattform. Ich möchte die gesammelten Erfahrungen in einem Format präsentieren, das mir den Zugang zu dieser Plattform im Idealfall erleichtert, wenn es mich damals erwischt hätte. Die im Internet verfügbaren Materialien, einschließlich auf der Website von Cordova selbst, haben dieses Problem nicht ideal gelöst. Es ist schwer zu sagen, ob dies auf die Schwierigkeiten der persönlichen Wahrnehmung oder die Qualität der Materialien zurückzuführen ist. Daher behauptet das Material nicht, akademisch zu sein, aber es kann nützlich sein, wenn jemand ähnliche Probleme hat. In jedem Fall sind inhaltliche Kommentare willkommen.
Was ist Cordova und warum wird es benötigt?
Kurz gesagt, dies ist ein Open Source-Framework, mit dem Sie eine plattformübergreifende Anwendung in JavaScript schreiben können. Alle folgenden Ebenen dienen dazu, die Zusammenstellung dieses Codes zu einer Anwendung für die Zielplattform sicherzustellen, sei es Android, iOS, Windows, eine Browseranwendung oder sogar eine exotische Plattform wie Tizen. In diesem speziellen Fall werden nur Android- und Browserszenarien berücksichtigt.
Weitere Details zu "Was es ist und warum es benötigt wird" werden auf der Projektwebsite und speziell hier viel besser beschrieben .
Im Moment fügen wir nur ein Bild aus der genannten Quelle hinzu:
Cordova unter Windows installieren
Die Installation des Frameworks ist ziemlich einfach. Node.js muss auf dem PC installiert sein. Er lebt auf der Website https://nodejs.org/en/ und benötigt für die Installation keine Kenntnisse, außer der Fähigkeit, mit der Maus zu klicken.
Node.js Windows npm. Cordova :
npm install -g cordova
, Cordova .
, . Cordova . , , . , Android Android SDK Gradle. , .
- .
, , :
cordova create test_prj
test_prj, . :
cd test_prj
:
cordova platform add browser
cordova platform add android
platforms browser android, .
, :
cordova build
:
cordova run browser
. :
cordova run android
Android- , USB.
, :
, , , . , . , , . , - www , index.html js/index.js .
index.html , , , .
js/index.js , :
document.addEventListener('deviceready', onDeviceReady, false);
function onDeviceReady() {
console.log('Running cordova-' + cordova.platformId + '@' + cordova.version);
document.getElementById('deviceready').classList.add('ready');
}
:
, - , . .
, , "DeviceReady". , .
. - "Device is ready". HTML-, onClick. onDeviceReady(). , , :
document.getElementById('deviceready').addEventListener('click',deviceReadyClicked);
, :
function deviceReadyClicked() {
alert('deviceReady clicked');
}
:
, . . index.html :
<button id="testButton">TEST</button>
'click'. onDeviceReady() :
document.getElementById('testButton').addEventListener('click',testButtonClicked);
:
function testButtonClicked() {
console.log("test button clicked");
alert('button clicked');
}
console.log , , :
:
, : Google Chrome :
chrome://inspect/#devices
, /:
- . "inspect" - . , . , . , .
, . , , , JavaScript - , , .
Cordova ?
Cordova - - , "" JavaScript. , "" JavaScript - .
, , . , openFile(), writeFile(), readFile(). JavaScript-, , .
?
" "? , , , . , , . , .
plugman, :
npm install -g plugman
, , :
plugman create --plugin_id "test.mytest" --name cordova-test-mytest --plugin_version 0.1.0
cordova-test-mytest ( , name). :
www/cordova-test-mytest.js - , . coolMethod().
plugin.xml, :
<name>cordova-test-mytest</name>
JS:
<js-module name="cordova-test-mytest" src="www/cordova-test-mytest.js">
<clobbers target="cordova.plugins.cordova-test-mytest" />
</js-module>
clobbers , . coolMethod() :
cordova.plugins.cordova-test-mytest.coolMethod();
, , .
: -, , - - . Android - . :
plugman platform add --platform_name android
:
plugin.xml , XML , . , , .
, XML platform:
<platform name="android">
<config-file parent="/" target="res/xml/config.xml">
<feature name="cordova-test-mytest">
<param name="android-package" value="test.mytest.cordova-test-mytest" />
</feature>
</config-file>
<config-file parent="/" target="AndroidManifest.xml"></config-file>
<source-file src="src/android/cordova-test-mytest.java" target-dir="src/test/mytest/cordova-test-mytest" />
</platform>
, , , cordova-test-mytest.java source-file.
src android, cordova-test-mytest.java.
public class cordova-test-mytest extends CordovaPlugin {
@Override
public boolean execute(String action, JSONArray args, CallbackContext callbackContext) throws JSONException {
if (action.equals("coolMethod")) {
String message = args.getString(0);
this.coolMethod(message, callbackContext);
return true;
}
return false;
}
private void coolMethod(String message, CallbackContext callbackContext) {
if (message != null && message.length() > 0) {
callbackContext.success(message);
} else {
callbackContext.error("Expected one non-empty string argument.");
}
}
}
, , " ".
, . , , , package.json . , ? :
plugman createpackagejson .
package.json , , . , package.json , :
cordova plugin add ../cordova-test-mytest
, .
:
cordova.plugins.cordova-test-mytest.coolMethod('just string example', successMtd, errorMtd);
function successMtd(message) {
alert(message);
}
function errorMtd(message) {
alert('Error! '+message);
}
coolMethod() execute() cordova-test-mytest. action, cordova - . cordova-test-mytest.js, if() execute() - .
JSON - args, args.getString(0).
" " coolMethod(), . , . callbackContext , callback-, execute() coolMethod(). , , .
, " " . , , , . . JavaScript- successMtd() errorMtd().
alert "just string example", , coolMethod. coolMethod(), alert, errorMtd() - "Error! Expected one non-empty string argument".
, . , - .
- . - , . , :
cordova plugin remove plugin.name
:
cordova plugin add ../plugin_path
BAT- ( Windows ) - , BAT . , . .
, , , .
- cordova , . , , - . ARM.
( , ) JS. JS , " - ". , , .
, Android - , , .