cordova自定义插件的创建过程

最近学习了cordova插件,记录一下大概的过程,仅供参考。

前期的配置就不记录了网上好多。

在简书上从新写了一个更详细的cordova插件教程,有需要的可以点这里进去看看。
第一步 创建一个cordova项目

输入命令 :cordova create 项目名 包名

例子:cordova create demo com.zc.demo

项目的大概目录

 
第二步 添加项目支持的平台(我只会android)

先进入工程目录

输入命令: cordova platform add  平台名

例子: cordova platform add android

创建成功够就可以进入platforms目录下面有个android,这个就可以导入到android studio了

 
第三步 自定义插件的创建

1、安装plugman

输入命令: npm install -g plugman

2、创建插件

输入命令: plugman create --name 插件名 --plugin_id 插件ID --plugin_version 插件版本号

例子: plugman create --name toast --plugin_id com.zc.demo.toast --plugin_version 1.0.0

注:每个前面是两个-

生成后的目录结构,没有package.json,后面会有如何加

 

3、完善目录

创建完成后src下面全是空的需要自己创建目录

 

4、在android创建java文件

可以先在android studio中写好后复制进去

 

    import android.app.Activity;
    import android.content.Intent;
    import android.content.pm.PackageManager;
    import android.net.Uri;
    import android.widget.Toast;
     
    import org.apache.cordova.CallbackContext;
    import org.apache.cordova.CordovaPlugin;
    import org.json.JSONArray;
    import org.json.JSONException;
     
    /**
     * Created by Administrator on 2017-10-11.
     */
     
    public class UninstallPlugin extends CordovaPlugin {
     
        @Override
        protected void pluginInitialize() {
            super.pluginInitialize();
        }
     
        @Override
        public boolean execute(String action, JSONArray args, CallbackContext callbackContext) throws JSONException {
            final Activity activity = this.cordova.getActivity();
            if (action.equals("showInfo")){
     
            }else if (action.equals("uninstallApp")){
                //这里要输入app包名
                uninstallMyself("com.lby.test.android",activity);
                return true;
            }
            return false;
        }
     
        /**
         * 弹出手机系统本身的卸载对话框,让用户卸载
         * @param packageName
         * @param activity
         */
        public void uninstallMyself(String packageName,Activity activity){
            if (checkApplication(packageName,activity)){
                Uri packageURI = Uri.parse("package:"+packageName);
                //调用手机系统本身的卸载activity
                Intent intent = new Intent(Intent.ACTION_DELETE);
                intent.setData(packageURI);
                activity.startActivity(intent);
            }
        }
     
        /**
         * 匹配你的APP包名是否能找到,然后卸载
         * @param packageName
         * @param activity
         * @return
         */
        public boolean checkApplication(String packageName,Activity activity){
            if (packageName == null||"".equals(packageName)){
                return false;
            }
            try {
                activity.getPackageManager().getApplicationInfo(packageName,PackageManager.MATCH_UNINSTALLED_PACKAGES);
                return true;
            }catch (PackageManager.NameNotFoundException e){
                return false;
            }
        }
     
        //弹出对话框
        void show(String info){
            Activity activity = this.cordova.getActivity();
            Toast toast = Toast.makeText(activity,info,Toast.LENGTH_SHORT);
            toast.show();
        }
    }


要继承CordovaPlugin,还要实现execute方法,action是用来判断需要进行什么操作是从js文件传过来的

 

 

5、完善plugin.xml内容

 

    <?xml version='1.0' encoding='utf-8'?>
    <plugin id="com.lby.plugin" version="1.0.0" xmlns="http://apache.org/cordova/ns/plugins/1.0" xmlns:android="http://schemas.android.com/apk/res/android">
        <!--插件的名称-->
        <name>uninstallPlugin</name>
        <!--描述信息-->
        <description>卸载插件</description>
        <js-module name="uninstallPlugin" src="www/uninstallPlugin.js">
            <clobbers target="cordova.plugins.uninstallPlugin" />
        </js-module>
     
        <!--platform:支持的平台-->
        <platform name="android">
        <!--插件的配置信息,build的时候会添加到res/xml/config.xml 文件中-->
            <config-file parent="/*" target="res/xml/config.xml">
                <feature name="UninstallPlugin">
                    <param name="android-package" value="com.your.plugin.UninstallPlugin"/>
                </feature>
            </config-file>
            <!-- 可以定义自己的一些权限信息,build后会添加到主配置文件中 -->
            <config-file target="AndroidManifest.xml" parent="/*">
                <uses-permission android:name="android.permission.ACCESS_WIFI_STATE"/>
            </config-file>
             <source-file src="src/android/UninstallPlugin.java" target-dir="src/com/your/plugin"/>
        </platform>
    </plugin>


自己根据情况改。

 

6、完善www目录下的js文件

 

    var exec = require('cordova/exec');
     
    var uninstallPlugin ={
        showInfo:function(info,success,error){
            exec(success, error, "UninstallPlugin", "showInfo", [info]);
        },
        uninstallApp:function(success,error){
            exec(success, error, "UninstallPlugin", "uninstallApp", []);
        }
    }
     
    module.exports = uninstallPlugin;


大概这样

 

7、生成package.json文件

上面的就大概完成了插件的创建,要安装插件需要有package.json文件

首先从命令行进入插件目录

输入命令 :npm init

按照前面括号的写就行了

 

生成之后进行最后一步,把插件配置到android项目中
第四步 把插件配置到项目中

先在命令行进入android目录下

输入命令:cordova plugin add  插件的目录地址

例子: cordova plugin add E:\AS\uninstallPlugin

完成后就可以用了。
第五步 使用

在android studio中找到assets下的cordova_plugin.js里面是你所有插件的信息,clobbers的内容就是你在外面js里调用时用的名字

 

 

注:cordova的html不支持内联

        

在android studio生成的文件都在哪上面标注出来了。

 

相关文章

公司前端界面用的是vue,我要嵌入到Android中生成App第一步:...
Q:我用cordova开发项目,想在app内跳转外部链接,安装了cord...
我正在使用https://github.com/arnesson/cordova-plugin-fir...
一、Cordova的基础点在混合式应用中,我们通过现有的Cordova...
cordova自定义插件注意:存放自定义cordova插件目录不能有空...
一、问题VueAPP中有一个文件下载功能,用了各种方法来实现下...