Cordova webapp實戰開發：（5）如何寫一個Andorid下自動更新的插件？

時間  2019-11-17
標籤 cordova webapp 實戰 開發 如何 一個 andorid 自動 更新 插件 欄目 Cordova 简体版
原文   原文鏈接

在 《Cordova webapp實戰開發：（4）Android環境搭建》中咱們搭建好了開發環境，也給你們佈置了調用插件的預習做業，作得如何了呢？今天咱們來學一下如何本身從頭創建一個Andorid下的cordova插件。html

本次練習你能學到的

  1. 學習如何實現Android下自動更新功能
  2. 學習Android下插件類的編寫
  3. 學習Android下插件的配置
  4. 學習Android下插件的調用

主要內容

  • 打開APP後檢查版本更新，若是有更新則彈出更新對話框

  • APP中【檢查更新】顯示當前版本號，並能夠點擊進行版本檢查更新

 

如何實現自動更新功能

你能夠本身寫代碼，也能夠網上找代碼抄一下，我以前的 敏捷我的APP 就是從網上下的一個代碼片斷放進個人項目中的。不過今天和你們說的不是如何編寫自動更新代碼，由於咱們今天要作的是如何更快的用別人寫好的東西來加速本身產品開發的進度和質量。前端

自動更新這個東西也不涉及到什麼技術難度，通常第三方要是提供了也不會出什麼質量問題，可以拿來就用豈不是很好呢？網上找了一下，發現 友盟提供自動更新java

 

 

很好，那就直接用這個吧，Andorid和iOS均可以用。android

如何集成到咱們的產品中，看他們本身寫的文檔：自動更新android文檔 ，我就很少說了，若是遇到問題，能夠在我們羣裏問問你們。web

插件類的編寫

原生Andorid中若是調用，就看上面說的他們本身寫的文檔。若是咱們如今要在APP中【設置】中增長自動檢查和顯示當前版本，則須要咱們開始學習如何編寫cordova插件了。apache

這裏咱們會編寫一個插件，兩個方法，一個方法用來檢測更新，另外一個方法用來得到當前APP的版本號。app

閒話不說了，直接來代碼。webapp

public class GCAppPlugin extends CordovaPlugin {

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

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

Javascript如何獲得插件調用後的返回結果？主要經過相似 callbackContext.sendPluginResult(new PluginResult(PluginResult.Status.OK, version)); 代碼返回PluginResult，失敗和成功均可以觸發Javascript執行對應的自定義函數ide

插件的配置

插件寫完了，不少人遇到的下一個問題就是怎麼配置才能在Javascript中調用呢？咱們今天也不解析源碼，爲何呢？由於我沒看：）不過，我必定要給你們說清楚如何配置，不然就永遠調用不了插件。函數

打開res/xml/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">
    <name>掌中廣材</name>
    <description> 隨時隨地查找全國最完整最及時的信息價   </description>
    <author email="22626496@qq.com" href="http://www.中國信息價.cn">  周金根    </author>
    <content src="html/scj/scj.html" />
    <access origin="*" />
    <access origin="tel:*" launch-external="yes"/>
    <access origin="geo:*" launch-external="yes"/>
    <access origin="mailto:*" launch-external="yes"/>
    <access origin="sms:*" launch-external="yes"/>
    <access origin="market:*" launch-external="yes"/>
    
    <preference name="SplashScreen" value="screen" />
    <preference name="SplashScreenDelay" value="30000" />
    <preference name="SplashMaintainAspectRatio" value="false" />    
    <preference name="LoadingDialog" value="正在加載中..." />
    
    <feature name="Device">
        <param name="android-package" value="org.apache.cordova.device.Device" />
    </feature>
     <feature name="NetworkStatus">
        <param name="android-package" value="org.apache.cordova.networkinformation.NetworkManager" />
    </feature> 
    <feature name="SplashScreen"> 
        <param name="android-package" value="org.apache.cordova.splashscreen.SplashScreen" />
    </feature>    
    <feature name="Camera">
        <param name="android-package" value="org.apache.cordova.camera.CameraLauncher" />
    </feature>    
    <feature name="BarcodeScanner">
        <param name="android-package" value="com.phonegap.plugins.barcodescanner.BarcodeScanner" />
    </feature>
 <feature name="Gcapp"> <param name="android-package" value="com.gldjc.guangcaiclient.GCAppPlugin" /> </feature>  
</widget>

代碼貼完了，我仍是要再多說一下，

  • com.gldjc.guangcaiclient.GCAppPlugin  是插件類的全面
  • 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', []);
        };   
       
   　　 Gcapp.prototype.checkUpdate = function () {
            exec(null, null, 'Gcapp', 'checkUpdate', []);
        };   
                
        var gcapp = new Gcapp();
        module.exports = gcapp;
});

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) {
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的，至於checkUpdate就是同樣了，在按鈕的click事件中調用 gcapp.checkUpdate(); 便可

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

 

PhoneGap App開發 477842664 Cordova App實戰開發2 

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程