本次練習你能學到的

主要內容 

• 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是cordova.js中內部的函數，當插件返回 PluginResult.Status.OK 時會執行exec的成功回調函數，如果插件返回的是錯誤，則會執行exec的錯誤回調函數。這里我們解釋一下 

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
});

file表示我們去哪里找腳本插件定義js，id是之前我們在gcapp.js中開頭cordova.define中寫的標識，cordova通過這個標志去找到我們的Javascript插件定義，而clobbers則是我們在前端通過什么對象名來調用這個插件。這里我寫的是gcapp，則后面調用則只需要寫成gcapp.checkUpdate 即可

插件的調用

萬事俱備，只欠東風，你們可以開始看到結果了，如果從頭到這里一步成功，那應該還是蠻興奮的事情吧。

具體前端頁面如何設計我就不說了，我的頁面效果就如本文最前面的圖片，在js中我是這些調用version的

$(document).on("PG_pageinit", function(event) {
    gcapp.version(function(version){
            $("#version").html(version);
    });
});

 

 

PhoneGap App開發 477842664