Cordova webapp实战开发：（5）如何写一个Andorid下自动更新的插件？

周金根
2015-07-08
原文

在《Cordova webapp实战开发：（4）Android环境搭建》中我们搭建好了开发环境，也给大家布置了调用插件的预习作业，做得如何了呢？今天我们来学一下如何自己从头建立一个Andorid下的cordova插件。

本次练习你能学到的

学习如何实现Android下自动更新功能
学习Android下插件类的编写
学习Android下插件的配置
学习Android下插件的调用

主要内容

打开APP后检查版本更新，如果有更新则弹出更新对话框

APP中【检查更新】显示当前版本号，并可以点击进行版本检查更新

如何实现自动更新功能

你可以自己写代码，也可以网上找代码抄一下，我之前的 敏捷个人APP 就是从网上下的一个代码片段放进我的项目中的。不过今天和大家说的不是如何编写自动更新代码，因为我们今天要做的是如何更快的用别人写好的东西来加速自己产品开发的进度和质量。

自动更新这个东西也不涉及到什么技术难度，一般第三方要是提供了也不会出什么质量问题，能够拿来就用岂不是很好呢？网上找了一下，发现 友盟提供自动更新

很好，那就直接用这个吧，Andorid和iOS都可以用。

如何集成到我们的产品中，看他们自己写的文档：自动更新android文档 ，我就不多说了，如果遇到问题，可以在咱们群里问问大家。

插件类的编写

原生Andorid中如果调用，就看上面说的他们自己写的文档。如果我们现在要在APP中【设置】中增加自动检查和显示当前版本，则需要我们开始学习如何编写cordova插件了。

这里我们会编写一个插件，两个方法，一个方法用来检测更新，另一个方法用来获得当前APP的版本号。

闲话不说了，直接来代码。

public class GCAppPlugin extends CordovaPlugin {

    @Override<br/>
    public boolean execute(String action, JSONArray args, CallbackContext callbackContext) throws JSONException {<br/>
        if ("version".equals(action)) {<br/>
            version(callbackContext);<br/>
            return true;<br/>
        }<br/>
        else if ("checkUpdate".equals(action)) {<br/>
            final Context mContext = this.cordova.getActivity();<br/>
            UmengUpdateAgent.setUpdateAutoPopup(false);<br/>
            UmengUpdateAgent.setUpdateListener(new UmengUpdateListener() {<br/>
                @Override<br/>
                public void onUpdateReturned(int updateStatus, UpdateResponse updateInfo) {<br/>
                      switch (updateStatus) {<br/>
                        case UpdateStatus.Yes: // has update<br/>
                            UmengUpdateAgent.showUpdateDialog(mContext, updateInfo);<br/>
                            break;<br/>
                        case UpdateStatus.No: // has no update<br/>
                            Toast.makeText(mContext, "现在使用的已是最新版本了", Toast.LENGTH_SHORT).show();<br/>
                            break;<br/>
                        case UpdateStatus.NoneWifi: // none wifi<br/>
                            Toast.makeText(mContext, "没有wifi连接， 只在wifi下更新", Toast.LENGTH_SHORT).show();<br/>
                            break;<br/>
                        case UpdateStatus.Timeout: // time out<br/>
                            Toast.makeText(mContext, "超时", Toast.LENGTH_SHORT).show();<br/>
                            break;<br/>
                        }<br/>
                }<br/>
            });<br/>
            UmengUpdateAgent.forceUpdate(mContext);<br/>
            return true;<br/>
        }<br/>
}

private synchronized void version(CallbackContext callbackContext) {<br/>
　　PackageInfo packInfo;<br/>
　　try {<br/>
　　　　packInfo = this.cordova.getActivity().getPackageManager().getPackageInfo(this.cordova.getActivity().getPackageName(),0);<br/>
　　　　String version = packInfo.versionName +"("+packInfo.versionCode+")";<br/>
　　　　callbackContext.sendPluginResult(new PluginResult(PluginResult.Status.OK, version));<br/>
　　} catch (NameNotFoundException e) {<br/>
　　　　// TODO Auto-generated catch block<br/>
　　　　e.printStackTrace();<br/>
　　}<br/>
}

Javascript如何得到插件调用后的返回结果？主要通过类似 callbackContext.sendPluginResult(new PluginResult(PluginResult.Status.OK, version)); 代码返回PluginResult，失败和成功都可以触发Javascript执行对应的自定义函数

插件的配置

插件写完了，很多人遇到的下一个问题就是怎么配置才能在Javascript中调用呢？我们今天也不解析源码，为什么呢？因为我没看：）不过，我一定要给大家说清楚如何配置，否则就永远调用不了插件。

打开res/xml/config.xml文件，添加feature，必须匹配类名，因为源码中是通过这些去配对的。上面我们写了更新插件，现在就是要配置一下这个插件类到功能名称，我在配置文件中加入了下文粗体部分内容

<?xml version='1.0' encoding='utf-8'?><br/>
<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"><br/>
    <name>掌中广材</name><br/>
    <description> 随时随地查找全国最完整最及时的信息价   </description><br/>
    <author email="22626496@qq.com" href="http://www.中国信息价.cn">  周金根    </author><br/>
    <content src="html/scj/scj.html" /><br/>
    <access origin="*" /><br/>
    <access origin="tel:*" launch-external="yes"/><br/>
    <access origin="geo:*" launch-external="yes"/><br/>
    <access origin="mailto:*" launch-external="yes"/><br/>
    <access origin="sms:*" launch-external="yes"/><br/>
    <access origin="market:*" launch-external="yes"/>

    <preference name="SplashScreen" value="screen" /><br/>
    <preference name="SplashScreenDelay" value="30000" /><br/>
    <preference name="SplashMaintainAspectRatio" value="false" /><br/>
    <preference name="LoadingDialog" value="正在加载中..." />

    <feature name="Device"><br/>
        <param name="android-package" value="org.apache.cordova.device.Device" /><br/>
    </feature><br/>
     <feature name="NetworkStatus"><br/>
        <param name="android-package" value="org.apache.cordova.networkinformation.NetworkManager" /><br/>
    </feature><br/>
    <feature name="SplashScreen"><br/>
        <param name="android-package" value="org.apache.cordova.splashscreen.SplashScreen" /><br/>
    </feature><br/>
    <feature name="Camera"><br/>
        <param name="android-package" value="org.apache.cordova.camera.CameraLauncher" /><br/>
    </feature><br/>
    <feature name="BarcodeScanner"><br/>
        <param name="android-package" value="com.phonegap.plugins.barcodescanner.BarcodeScanner" /><br/>
    </feature><br/>
<strong>    <feature name="Gcapp"><br/>
        <param name="android-package" value="com.gldjc.guangcaiclient.GCAppPlugin" /><br/>
    </feature><br/>
</strong></widget>

代码贴完了，我还是要再多说一下，

<strong>com.gldjc.guangcaiclient.GCAppPlugin  是插件类的全面</strong>

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) {<br/>
        <strong>var exec = require("cordova/exec");

        </strong>function Gcapp() {};

        Gcapp.prototype.version = function (getversion) {<br/>
            exec(getversion, null, 'Gcapp', 'version', []);<br/>
        };   

   　　 Gcapp.prototype.checkUpdate = function () {<br/>
            exec(null, null, 'Gcapp', 'checkUpdate', []);<br/>
        };   

        var gcapp = new Gcapp();<br/>
        module.exports = gcapp;<br/>
});

exec是cordova.js中内部的函数，当插件返回 PluginResult.Status.OK 时会执行exec的成功回调函数，如果插件返回的是错误，则会执行exec的错误回调函数。这里我们解释一下

 exec(null, null, 'Gcapp', 'checkUpdate', []);

其中Gcapp就是我们在上一步骤加的feature名称，大小写匹配着写，通过这个名称，cordova才能找到调用那个java插件类，然后通过checkUpdate知道调用这个插件类的哪个方法，后面[]中则是参数。因为我这个插件不需要参数，所以为空。

Javascript插件类也配对成功了，那如何调用呢？你可以直接在html中包括这个js，不过我们一般会再配置一个js，那就是assets/www/cordova_plugins.js，这样就不用对每个插件类都去写一遍了，cordova会遍历你的配置去加载它们。

cordova.define('cordova/plugin_list', function(require, exports, module) {<br/>
module.exports = [<br/>
    {<br/>
        "file": "plugins/org.apache.cordova.device/www/device.js",<br/>
        "id": "org.apache.cordova.device.device",<br/>
        "clobbers": [<br/>
            "device"<br/>
        ]<br/>
    },<br/>
    {<br/>
        "file": "plugins/org.apache.cordova.networkinformation/www/network.js",<br/>
        "id": "org.apache.cordova.networkinformation.network",<br/>
        "clobbers": [<br/>
            "navigator.connection",<br/>
            "navigator.network.connection"<br/>
        ]<br/>
    },<br/>
     {<br/>
        "file": "plugins/org.apache.cordova.networkinformation/www/Connection.js",<br/>
        "id": "org.apache.cordova.networkinformation.Connection",<br/>
        "clobbers": [<br/>
            "Connection"<br/>
        ]<br/>
    },<br/>
     {<br/>
        "file": "plugins/org.apache.cordova.splashscreen/www/splashscreen.js",<br/>
        "id": "org.apache.cordova.splashscreen",<br/>
        "clobbers": [<br/>
            "navigator.splashscreen"<br/>
        ]<br/>
    },<br/>
        {<br/>
        "file" : "plugins/org.apache.cordova.camera/www/CameraConstants.js",<br/>
        "id" : "org.apache.cordova.camera.Camera",<br/>
        "clobbers" : [ "Camera" ]<br/>
    },<br/>
    {<br/>
        "file" : "plugins/org.apache.cordova.camera/www/CameraPopoverOptions.js",<br/>
        "id" : "org.apache.cordova.camera.CameraPopoverOptions",<br/>
        "clobbers" : [ "CameraPopoverOptions" ]<br/>
    },<br/>
    {<br/>
        "file" : "plugins/org.apache.cordova.camera/www/Camera.js",<br/>
        "id" : "org.apache.cordova.camera.camera",<br/>
        "clobbers" : [ "navigator.camera" ]<br/>
    },<br/>
    {<br/>
        "file" : "plugins/org.apache.cordova.camera/www/CameraPopoverHandle.js",<br/>
        "id" : "org.apache.cordova.camera.CameraPopoverHandle",<br/>
        "clobbers" : [ "CameraPopoverHandle" ]<br/>
    },<br/>
    {<br/>
        "file" : "plugins/com.phonegap.plugins.barcodescanner/www/barcodescanner.js",<br/>
        "id" : "com.phonegap.plugins.barcodescanner.barcodescanner",<br/>
        "clobbers" : [ "barcodescanner" ]<br/>
    },<br/>
 <strong>   {<br/>
        </strong><strong>"file": "plugins/com.gldjc.guangcaiclient/www/gcapp.js",<br/>
        "id": "com.gldjc.guangcaiclient.gcapp",<br/>
        "clobbers": [<br/>
            "gcapp"</strong><strong><br/>
        ]<br/>
    }</strong><br/>
];<br/>
module.exports.metadata =<br/>
// TOP OF METADATA<br/>
{<br/>
    "org.apache.cordova.device": "0.2.13"<br/>
}<br/>
// BOTTOM OF METADATA<br/>
});

file表示我们去哪里找脚本插件定义js，id是之前我们在gcapp.js中开头cordova.define中写的标识，cordova通过这个标志去找到我们的Javascript插件定义，而clobbers则是我们在前端通过什么对象名来调用这个插件。这里我写的是gcapp，则后面调用则只需要写成gcapp.checkUpdate 即可

插件的调用

万事俱备，只欠东风，你们可以开始看到结果了，如果从头到这里一步成功，那应该还是蛮兴奋的事情吧。

具体前端页面如何设计我就不说了，我的页面效果就如本文最前面的图片，在js中我是这些调用version的，至于checkUpdate就是一样了，在按钮的click事件中调用 gcapp.checkUpdate(); 即可

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