Ionic app升级插件开发

时间：2023-01-02 16:08:07

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

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

npm install -g plugman

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

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

其中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了解又加深一步，就可以分析其他插件的代码了！！！

相关文章