码迷,mamicode.com
首页 > 其他好文 > 详细

cordova 插件开发

时间:2017-06-13 20:37:01      阅读:269      评论:0      收藏:0      [点我收藏+]

标签:文件夹   aar   end   属性   pac   port   text   div   osi   

 公司现在用的ionic开发一些APP.中间涉及到自定义一些cordova 插件. 所以这里记录一下.这里主要参照一下这个  Android Cordova 插件开发之自定义插件生成安装包

1.搭建一个插件框架,这里使用的是plugman  安装那些就不说了.具体的 文档链接在这里

  1.1搭建目录

 plugman create --name DialogPlugin  --plugin_id cordova-plugin-dialog  --plugin_version 0.0.1

   1.2添加平台代码,这里主要是安卓.

 plugman platform add --platform_name android

   完成之后的目录结构如下:

  DialogPlugin

     —src

      —android

        CustomDialog.java

    —www

      dialog.js

    plugin.xml

 

2. 添加代码

  2.1 添加Java代码,CustomDialog.java 

public class CustomDialog extends CordovaPlugin{
    @Override
    public boolean execute(String action, CordovaArgs args, final CallbackContext callbackContext) throws JSONException {
        if("show".equals(action)){
            AlertDialog.Builder builder = new AlertDialog.Builder(cordova.getActivity());
            builder.setTitle("提示");
            builder.setMessage(args.getString(0));
            builder.setPositiveButton("确定", new DialogInterface.OnClickListener() {
                @Override
                public void onClick(DialogInterface dialog, int which) {
                    dialog.dismiss();
                    callbackContext.success("点击了确定");
                }
            });
            builder.setNegativeButton("取消", new DialogInterface.OnClickListener() {
                @Override
                public void onClick(DialogInterface dialog, int which) {
                    dialog.dismiss();
                    callbackContext.error("点击了取消");
                }
            });
            builder.create().show();
            return true;
        }
        return super.execute(action, args, callbackContext);
    }

}

  

  2.2 添加js代码,

  

  var exec = require( "cordova/exec" );
  module.exports = {
      show: function( content ) {
          exec(
              function( message ) {
                  console.log( message );
              },
              function( errorMessage ) {
                  console.log( errorMessage );
              },
              "CustomDialog",
              "show", [ content ] );
      }
  }

  2.3 修改plugin.xml

<?xml version="1.0" encoding="UTF-8"?>
<!-- 插件的Id,安装后注册的Id为此id加js-moudle的name属性,即cordova_plugins.js里的id属性 -->
<plugin xmlns="http://apache.org/cordova/ns/plugins/1.0"
    id="cordova-plugin-dialog" version="0.0.1">
    <!-- 插件名称 -->
    <name>DialogPlugin</name>
    <!-- 插件描述 -->
    <description>Description</description>
    <!-- js文件的地址,安装后路径为:plugins/插件Id/src属性值 -->
    <js-module name="CustomDialog" src="www/dialog.js">
    <!-- 跟asserts/cordova_plugins.js中填clobbers的值一样 -->
        <clobbers target="alertDialog"/>
    </js-module>
    <!-- android -->
    <platform name="android">
        <config-file parent="/*" target="res/xml/config.xml">
        <!-- config-file中包含的这段会原封不动的插入到config.xml文件中 -->
            <feature name="CustomDialog">
                <param name="android-package" value="org.apache.cordova.dialog.CustomDialog"/>
            </feature>
        </config-file>
        <!-- 本地代码,有多个文件就写多个source-file,src对应本项目,target对应安装后的目录 -->
        <source-file src="src/android/CustomDialog.java" target-dir="src/org/apache/cordova/dialog"/>
    </platform>
    <!-- 其他平台的代码 -->
</plugin>

 3.添加package.json 文件,在cordova7.0版本以上需要这个文件.

  3.1 使用命令

plugman createpackagejson #文件夹位置

 这样插件就编写完成了.

 最后目录结构

技术分享

 

4.编写cordova项目测试.具体文档位置

  4.1 创建一个cordova项目

cordova create hello com.example.hello HelloWorld

  这里可能会报错,解决办法使用Yarn 安装.

sudo npm install -g yarn
yarn install -g cordova

  这样就可以了.

  4.2 添加平台

cordova platform add android  

  4.2 添加插件,就是刚才我们写的插件,这里使用本地路径添加.

cordova plugins add <插件包路径>

  4.3 使用插件,index.js文件中使用.

   alertDialog.show("install dialog plugin success!!");

  4.4 运行cordova程序.

cordova run android

  这样插件就编写完成并使用了.

    

 

cordova 插件开发

标签:文件夹   aar   end   属性   pac   port   text   div   osi   

原文地址:http://www.cnblogs.com/yt-007/p/7003097.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!