Skip to content

Latest commit

 

History

History
203 lines (149 loc) · 5.62 KB

Cordova - PhoneGap.md

File metadata and controls

203 lines (149 loc) · 5.62 KB

Cordova/PhoneGap

https://cordova.apache.org/docs/en/latest/guide/cli/

Install Cordova

sudo npm install -g cordova sudo npm update -g cordova

Create app

cordova create weathertroll io.weld.weathertroll "Vädertrollet" cordova create hello com.example.hello HelloWorld

Platforms

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

cordova platform remove android --save cordova platform update android --save # When done changes to global config

Plugins

https://cordova.apache.org/plugins/

cordova plugin add cordova-plugin-splashscreen --save # https://github.com/apache/cordova-plugin-splashscreen cordova plugin add cordova-plugin-camera --save cordova plugin add cordova-plugin-inappbrowser --save cordova plugin remove cordova-plugin-inappbrowser

https://github.com/phonegap/phonegap-plugin-push

Browser for testing

cordova platform add browser cordova platform remove ios cordova run browser

Build app

cordova build # =cordova prepare + cordova compile cordova emulate android # On emulator (including prepare & compile) cordova run android # On device (including prepare & compile)

cordova prepare # Transforms config.xml metadata to platform-specific manifest files, copies icons & splashscreens, copies plugin files for specified platforms so that the project is ready to build with each native SDK. cordova compile # Only performs the compilation step without doing prepare

Running in emulators

cordova emulate ios --list

cordova emulate ios --target="iPhone-5s, 10.2" cordova emulate ios --target="iPhone-7, 10.2"

cordova emulate android --target="Nexus_S_API_24" cordova emulate android --target="Denver_tablet"

cordova run android # reinstall, not restart emulator

Running on device

cordova run android --device cordova run ios --device

Debugging

iOS: inspect via Safari desktop browser, Develop -> Simulator

Android: inspect via Chrome desktop browser, chrome://inspect

https://github.com/phonegap/phonegap/wiki/Debugging-in-PhoneGap

Build release package

Release build signed .apk (Android) or .ipa (IOS):

cordova build android --device --release --buildConfig=build-release.json cordova build ios --device --release --buildConfig=build-release.json

Icons & Splash screen

cordova plugin add cordova-plugin-splashscreen --save # https://github.com/apache/cordova-plugin-splashscreen

Boilerplate code

config.xml

Codewriter Simple JavaScript code writer and tester. Weld team

index.html

<title>My App</title>

My App

<script type="text/javascript" src="cordova.js"></script> <script type="text/javascript" src="js/index.js"></script>

index.css

  • { -webkit-tap-highlight-color: rgba(0,0,0,0); /* make transparent link selection, adjust last value opacity 0 to 1.0 */ }

body { -webkit-touch-callout: none; /* prevent callout to copy image, etc when tap to hold / -webkit-text-size-adjust: none; / prevent webkit from resizing text to fit / -webkit-user-select: none; / prevent copy paste, to allow, change 'none' to 'text' */ position: absolute; width: 100%; height: 100%; margin: 0; padding: 0; background-color: whitesmoke; color: darkslategray; font-family: 'HelveticaNeue-Light', 'HelveticaNeue', Helvetica, Arial, sans-serif; font-size: 16px; }

/* Portrait layout (default) / .app { width: 100%; height: 100%; / Flexbox: */ display: flex; flex-direction: column; justify-content: center; align-items: center; }

/* Landscape layout (with min-width) */ @media screen and (min-aspect-ratio: 1/1) and (min-width: 400px) { .app { } }

index.js

'use strict';

var app = {

// Application Constructor initialize: function() { document.addEventListener('deviceready', this.onDeviceReady.bind(this), false); },

// deviceready Event Handler // Bind any cordova events here, e.g: 'pause', 'resume', etc. onDeviceReady: function() { console.log('My App: deviceready'); },

};

app.initialize();