上一篇我们学习了如何写一个Andorid下自动更新的插件,我想还有一部分看本系列blog的开发人员希望学习在iOS下如何做插件的吧,那么今天你就可以来看看这篇文字了。
本次练习你能学到的
- 学习如何获取iOS当前版本号
- 学习iOS下插件类的编写
- 学习iOS下插件的配置
- 学习iOS下插件的调用
主要内容
- APP中【检查更新】显示当前版本号
插件类的编写
在上一篇介绍Andorid插件时我们贴出了很多源码,这里也直接贴出代码,首先是iOS下插件的代码。
我们在Plugins下新建两个文件,一个头文件 CDVGcapp.h,一个实现文件 CDVGcapp.m。(文件名自己取,这是我在项目中的名称)
- 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> @implementation CDVGcapp - (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]; }
Javascript如何得到插件调用后的返回结果?主要通过类似 [self.commandDelegate sendPluginResult:result callbackId:command.callbackId]; 代码返回
CDVPluginResult,失败和成功都可以触发Javascript执行对应的自定义函数
插件的配置
插件写完了,很多人遇到的下一个问题就是怎么配置才能在Javascript中调用呢?我们今天也不解析源码,为什么呢?因为我没看:)不过,我一定要给大家说清楚如何配置,否则就永远调用不了插件。
打开staging/config.xml文件,添加feature,必须匹配类名,因为源码中是通过这些去配对的。上面我们写了更新插件,现在就是要配置一下这个插件类到功能名称,我在配置文件中加入了下文粗体部分内容
<?xml version='1.0' encoding='utf-8'?> <widget id="com.glodon.gcapp" version="2.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0"> <preference name="AllowInlineMediaPlayback" value="false" /> <preference name="AutoHideSplashScreen" value="true" /> <preference name="BackupWebStorage" value="cloud" /> <preference name="DisallowOverscroll" value="false" /> <preference name="EnableViewportScale" value="false" /> <preference name="FadeSplashScreen" value="true" /> <preference name="FadeSplashScreenDuration" value=".25" /> <preference name="KeyboardDisplayRequiresUserAction" value="true" /> <preference name="MediaPlaybackRequiresUserAction" value="false" /> <preference name="ShowSplashScreenSpinner" value="true" /> <preference name="SuppressesIncrementalRendering" value="false" /> <preference name="TopActivityIndicator" value="gray" /> <preference name="GapBetweenPages" value="0" /> <preference name="PageLength" value="0" /> <preference name="PaginationBreakingMode" value="page" /> <preference name="PaginationMode" value="unpaginated" /> <preference name="AutoHideSplashScreen" value="false" /> <name>zgxxj</name> <description> 随时随地查找全国最完整最及时的信息价 </description> <author email="22626496@qq.com" href="http://www.中国信息价.cn"> 周金根 </author> <content src="html/scj/scj.html" /> <access origin="*" /> <feature name="Device"> <param name="ios-package" value="CDVDevice" /> </feature> <feature name="NetworkStatus"> <param name="ios-package" value="CDVConnection" /> </feature> <feature name="SplashScreen"> <param name="ios-package" value="CDVSplashScreen" /> <param name="onload" value="true" /> </feature> <feature name="InAppBrowser"> <param name="ios-package" value="CDVInAppBrowser" /> </feature> <feature name="Gcapp"> <param name="ios-package" value="CDVGcapp" /> </feature> <feature name="BarcodeScanner"> <param name="ios-package" value="CDVBarcodeScanner" /> </feature> </widget>
-
CDVGcapp是插件类名
- Gcapp是 feature 名称,下面大家就知道在哪里会用到了
以上文件就是告诉cordova,我们新增了一个Gcapp功能,这个功能会调用我们的原生插件Java对象,接下来就是Javascript如何能调用到这个类了,最重要的就是这个Gcapp功能名称。
我们接着就要写Javascript代码来调用这个功能了,如何写呢?继续往下看,我在assets/www/plugins/下新增目录并建立了文件gcapp.js,完整路径是 assets/www/plugins/com.gldjc.guangcaiclient/www/gcapp.js,代码如下:
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(getversion, null, 'Gcapp', 'version', []);
其中Gcapp就是我们在上一步骤加的feature名称,大小写匹配着写,通过这个名称,cordova才能找到调用那个java插件类,然后通过version知道调用这个插件类的哪个方法,后面[]中则是参数。因为我这个插件不需要参数,所以为空。
Javascript插件类也配对成功了,那如何调用呢?你可以直接在html中包括这个js,不过我们一般会再配置一个js,那就是assets/www/cordova_plugins.js,这样就不用对每个插件类都去写一遍了,cordova会遍历你的配置去加载它们。
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", "navigator.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.cordova.splashscreen", "clobbers": [ "navigator.splashscreen" ] }, { "file" : "plugins/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.camera.CameraPopoverOptions", "clobbers" : [ "CameraPopoverOptions" ] }, { "file" : "plugins/org.apache.cordova.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.cordova.camera.CameraPopoverHandle", "clobbers" : [ "CameraPopoverHandle" ] }, { "file" : "plugins/com.phonegap.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", "clobbers": [ "gcapp" ] } ]; module.exports.metadata = // TOP OF METADATA { "org.apache.cordova.device": "0.2.13" } // BOTTOM OF METADATA });
插件的调用
万事俱备,只欠东风,你们可以开始看到结果了,如果从头到这里一步成功,那应该还是蛮兴奋的事情吧。
具体前端页面如何设计我就不说了,我的页面效果就如本文最前面的图片,在js中我是这些调用version的
$(document).on("PG_pageinit", function(event) { gcapp.version(function(version){ $("#version").html(version); }); });