随笔- 3538 文章- 1 评论- 67 阅读- 398万

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生成的文件都在哪上面标注出来了。