Cordova WebApp Combat Development: (6) How to write a plugin that automatically updates under iOS?

On an article we learned how to write a Andorid under the automatic Update plug-in, I think there is a part of the blog developers want to learn how to do plug-ins in iOS, then today you can come to see this text.

What you can learn from this exercise

1. Learn how to get the iOS current version number
2. Learn how to write plug-in classes under iOS
3. Learn the configuration of plugins under iOS
4. Learn the call to plug-ins under iOS

Main content

• "Check for Updates" In the app displays the current version number

Writing of plug-in classes

In the previous introduction of the Andorid plug-in We posted a lot of source code, which is also directly posted here, the first is the code of the iOS plug-in.

We created two new files under Plugins, a header file CDVGcapp.h, an implementation file CDVGCAPP.M. (The filename is the name of my project)

• CDVGcapp.h

#import <Foundation/Foundation.h>#import <Cordova/CDVPlugin.h>@interface cdvgcapp:cdvplugin-(void) version: (cdvinvokedurlcommand*) command; @end

• cdvgcapp.m

#import "CDVGcapp.h"#import<Cordova/CDVViewController.h>#import<Cordova/CDVScreenOrientationDelegate.h>@implementationCdvgcapp- (void) Version: (cdvinvokedurlcommand*) command{NSString* Value0 = [NSString stringWithFormat:@"%@(%@)", [[[NSBundle Mainbundle] infodictionary] Valueforkey:@"cfbundleshortversionstring"], [[NSBundle Mainbundle] Objectforinfodictionarykey: (nsstring*) [Kcfbundleversionkey]]; Cdvpluginresult* result =[Cdvpluginresult Resultwithstatus:cdvcommandstatus_ok messageasstring:value0]; [Self.commanddelegate Sendpluginresult:result callbackId:command.callbackId];}

How does JavaScript get the results returned after the plug-in call? Mainly through similar [self.commanddelegate Sendpluginresult:result callbackId:command.callbackId]; code returns

Cdvpluginresult , both failures and successes can trigger JavaScript to execute corresponding custom functions.

Configuration of the Plugin

When the plugin is finished, the next question many people encounter is how to configure it to be called in JavaScript? We also do not parse the source code today, why? Because I did not read: But, I must tell you how to configure, or you can never call plug-ins.

Open the Staging/config.xml file, add feature, must match the class name, because the source code is to be paired through these. Above we wrote the update plug-in, now is to configure the plug-in class to the feature name, I added in the configuration file below the bold part of the content

<?XML version= ' 1.0 ' encoding= ' utf-8 '?><WidgetsID= "Com.glodon.gcapp"version= "2.0.0"xmlns= "Http://www.w3.org/ns/widgets"XMLNS:CDV= "http://cordova.apache.org/ns/1.0">    <Preferencename= "Allowinlinemediaplayback"value= "false" />    <Preferencename= "Autohidesplashscreen"value= "true" />    <Preferencename= "Backupwebstorage"value= "Cloud" />    <Preferencename= "Disallowoverscroll"value= "false" />    <Preferencename= "Enableviewportscale"value= "false" />    <Preferencename= "Fadesplashscreen"value= "true" />    <Preferencename= "Fadesplashscreenduration"value= "." />    <Preferencename= "Keyboarddisplayrequiresuseraction"value= "true" />    <Preferencename= "Mediaplaybackrequiresuseraction"value= "false" />    <Preferencename= "Showsplashscreenspinner"value= "true" />    <Preferencename= "Suppressesincrementalrendering"value= "false" />    <Preferencename= "Topactivityindicator"value= "Gray" />    <Preferencename= "Gapbetweenpages"value= "0" />    <Preferencename= "Pagelength"value= "0" />    <Preferencename= "Paginationbreakingmode"value= "page" />    <Preferencename= "Paginationmode"value= "unpaginated" />    <Preferencename= "Autohidesplashscreen"value= "false" />        <name>Zgxxj</name>    <Description>Find the most complete and timely information price anywhere in the country</Description>    <authorEmail= "[email protected]"href= "http://www. China information Price. CN">Zhou Jingen</author>    <contentsrc= "html/scj/scj.html" />    <AccessOrigin="*" />        <featurename= "Device">        <paramname= "Ios-package"value= "Cdvdevice" />    </feature>    <featurename= "NetworkStatus">        <paramname= "Ios-package"value= "Cdvconnection" />    </feature>    <featurename= "SplashScreen">        <paramname= "Ios-package"value= "Cdvsplashscreen" />        <paramname= "onload"value= "true" />    </feature>    <featurename= "Inappbrowser">        <paramname= "Ios-package"value= "Cdvinappbrowser" />    </feature>  <feature  name= "Gcapp"><param  Name= "Ios-package"  value= "Cdvgcapp" /></  Feature>     <featurename= "Barcodescanner">        <paramname= "Ios-package"value= "Cdvbarcodescanner" />    </feature></Widgets>

The code is over, I'm going to say it again,

• Cdvgcapp is the plug-in class name

• Gcapp is the name of feature, the following people will know where to use the

The above file is to tell Cordova, we have added a Gcapp function, this function will call our native Plugin Java object, Next is how JavaScript can call to this class, the most important thing is this Gcapp function name.

Then we're going to write JavaScript code to invoke this feature, how to write it? Keep looking down, I added a directory under assets/www/plugins/and created the file gcapp.js, the full path is assets/www/plugins/com.gldjc.guangcaiclient/www/ Gcapp.js, the code is as follows:

Cordova.define (' Com.gldjc.guangcaiclient.gcapp ', function (require, exports, module) {        var exec = require (" Cordova/exec ");         function Gcapp () {};               Gcapp.prototype.version = function (getversion) {            exec (getversion, null, ' Gcapp ', ' version ', []);        };                            var gcapp = new Gcapp ();        Module.exports = Gcapp;});

EXEC is a function inside cordova.js that executes exec's successful callback function when the plug-in returns PluginResult.Status.OK, and executes the EXEC error callback function if the plug-in returns an error. Here, let's try to explain

EXEC (getversion, null, ' Gcapp ', ' version ', []);

Where Gcapp is the feature name that we added in the previous step, the case matches the write, by this name, Cordova can find the call to the Java plug-in class, and then through version know which method to call the plug-in class, and then [] is the parameter. Because I do not need parameters for this plugin, so it is empty.

JavaScript plug-in class is also paired successfully, how to call it? You can include this JS directly in the HTML, but we will usually configure a JS, that is, assets/www/cordova_plugins.js, so you do not have to write to each plug-in class, Cordova will traverse your configuration to load them.

Cordova.define (' Cordova/plugin_list ', function (require, exports, module) {module.exports = [{"File": "plugins/            Org.apache.cordova.device/www/device.js "," id ":" Org.apache.cordova.device.device "," clobbers ": [ "Device"}, {"File": "Plugins/org.apache.cordova.networkinformation/www/network.js", "id": "Org.apache.cordova.networkinformation.network", "clobbers": ["Navigator.connection", "Navig Ator.network.connection "]}, {" File ":" Plugins/org.apache.cordova.networkinformation/www/connection        . js "," id ":" org.apache.cordova.networkinformation.Connection "," clobbers ": [" Connection " ]}, {"File": "Plugins/org.apache.cordova.splashscreen/www/splashscreen.js", "id": "Org.apache.cord Ova.splashscreen "," clobbers ": [" Navigator.splashscreen "]}, {" File ":" Plugi ns/org.apache.cordova.caMera/www/cameraconstants.js "," id ":" Org.apache.cordova.camera.Camera "," clobbers ": [" Camera "]}, {"File": "Plugins/org.apache.cordova.camera/www/camerapopoveroptions.js", "id": "Org.apache.cordova.camer A.camerapopoveroptions "," clobbers ": [" Camerapopoveroptions "]}, {" File ":" Plugins/org.apache.cor    Dova.camera/www/camera.js "," id ":" Org.apache.cordova.camera.camera "," clobbers ": [" Navigator.camera "] }, {"File": "Plugins/org.apache.cordova.camera/www/camerapopoverhandle.js", "id": "Org.apache.cordov A.camera.camerapopoverhandle "," clobbers ": [" Camerapopoverhandle "]}, {" File ":" Plugins/com.phone        Gap.plugins.barcodescanner/www/barcodescanner.js "," id ":" Com.phonegap.plugins.barcodescanner.barcodescanner ",  "Clobbers": ["Barcodescanner"]}, { "file": "Plugins/com.gldjc.guangcaiclient/www/gcapp.js", "id": "Com.gldjc.guangcaiclient.gcapp", "Clobbe RS ": [" Gcapp " ] }];module.exports.metadata =//TOP of metadata{"Org.apache.cordova.device": "0.2.13"}//BOTTOM of Metadata});

File indicates where we go to find the script plugin definition js, The ID is the identity we wrote earlier in the Gcapp.js Cordova.define, Cordova through this flag to find our JavaScript plugin definition, and clobbers is what object name we call this plugin at the front end. Here I write the Gcapp, then the subsequent calls only need to write gcapp.checkupdate can

Plug-in invocation

Everything is ready, only the east wind, you can start to see the results, if the first step to success, it should be quite exciting things.

Specific front-end page How to design I will not say, my page effect is like the first picture in this article, in JS I am these call version of the

$ (document). On ("Pg_pageinit", function (event) {    gcapp.version ("function (version) {            $ (" #version "). HTML ( version);    });

The usual , likes or replies more than 20 people after the next article, more than please in the group @ Me:)

PhoneGap app Development 348192525

Cordova WebApp Combat Development: (6) How to write a plugin that automatically updates under iOS?