Ionic app升级插件开发

Posted 2020-08-17 郭欢欢

终于走到了写插件的这个地方了，插件的过程：

1.安装plugman插件，管理我们的程序

npm install -g plugman

2.创建插件项目appUpgrade,cd 到你的目标目录下，执行如下命令：

plugman create --name appUpgrade --plugin_id  com.caseStudy.plugin  --plugin_version 0.0.1

其中com.caseStudy.plugin是java类的包名，以后会引用到。

执行完成后，目录下会看到新建了appUpgrade目录，其下游plug.xml文件,src和www目录

3.添加android平台：先cd 到appUpgrade目录，再执行如下命令

plugman platform add --platform_name android

会在src目录下自动创建了一个appUpgrade.java文件

4.修改我们的appUpgrade.js文件

cordova.define("cordova/plugins/appUpgrade",function(require, exports, module)
{
    //1.加载需要的组件
    var exec = require("cordova/exec");
    //2.定义js类对象
    var appUpgrade = function() {};
    //3.添加js类对象的方法,url为api版本检查地址
    appUpgrade.prototype.downLoad = function(apiUrl,successCallback, errorCallback)
      {
        if (typeof errorCallback != "function")
        {
            console.log("error");
            return
        }

        if (typeof successCallback != "function")
        {
            console.log("error");
            return
        }
        //4.调用appUpgrade.java类的downLoad方法，参数为apiUrl
        exec(successCallback, errorCallback, ‘appUpgrade‘, ‘downLoad‘,[ { url:apiUrl } ] );
    };

    //5.设置插件到exports中
    var appUpgrade = new appUpgrade();
    module.exports = appUpgrade;

});


if(!window.plugins)
{
    window.plugins = {};
}
if (!window.plugins.appUpgrade)
{
    window.plugins.appUpgrade = cordova.require("cordova/plugins/appUpgrade");
}

5.appUpgrade.java类功能的改写，此处使用了开源的代码 com.shelwee.update.UpdateHelper包，前文已提过如何加入到我们项目的....此处不用再加，引入包名即可

package com.caseStudy.plugin;

import org.apache.cordova.CordovaPlugin;
import org.apache.cordova.CallbackContext;
import org.json.JSONArray;
import org.json.JSONException;
import org.json.JSONObject;
//add new import jar
import com.shelwee.update.UpdateHelper;
import android.app.Activity;
import android.content.Context;

public class appUpgrade extends CordovaPlugin
{
    @Override
    public boolean execute(String action, JSONArray args, CallbackContext callbackContext) throws JSONException
    {
        if (action.equals("downLoad"))
        {
            final JSONObject options = args.getJSONObject(0);
            final String url = options.getString("url");
            this.downLoad(url, callbackContext);
            return true;
        }
        else
        {
            callbackContext.success("there is no downLoad method in appUpgrade.java class");
            return false;
        }
    }

    private void downLoad(String url, CallbackContext callbackContext)
    {
        callbackContext.success("invoke downLoad method success,start to check...");
        UpdateHelper updateHelper = new UpdateHelper.Builder(cordova.getActivity())
                .checkUrl(url)
                .isAutoInstall(true)
                .build();
        updateHelper.check();
    }
}

到此插件开发完成。

 

6.插件部署到app，cd到我们自己的ionic app项目目录下，执行如下命令：

cordova plugin add 你的文件路径/appUpgrade

这样会加载到我们的项目中，在plugin目录下可以看到我们的插件名appUpgrade

7.app程序调用插件的方法，不需要指明任何依赖，下面的代码可以放在button事件中，

window.plugins.appUpgrade.downLoad(appCheckVersionUrl,function(data){ console.log(data);  },function(error){ console.log(error); alert(error); });

 

插件已部署完成，似乎在浏览器中无法查看到插件的效果，需要打包成apk安装到手机上

8.执行命令：ionic build android

如果程序没错，成功生成apk;有错的话，需要检查我们的java代码，移除插件重新加入等，这个自己遇见了多次，代码才整理成功。

 

9.移除插件的命令是:

cordova plugin add path/to/your/plugin/dir

 

经过对插件的摸索，对ionic了解又加深一步，就可以分析其他插件的代码了！！！