zoukankan      html  css  js  c++  java
  • cordova开发自己定义插件

    以下是自己定义cordova插件的基本入门。做插件的小白可以參考一下哈,兴许会更新插件的进阶博客,希望大家可以共同学习共同进步


    1.环境搭建

    cordova插件开发前须要安装一些软件和配置环境

    1.1 node.js环境搭建

    到node.js官网(https://nodejs.org/)下载安装就好。只是訪问node.js须要翻墙,在dos窗体输入npm,能显演示样例如以下信息就说明node.js成功安装

    1.2 cordova和ionic 的安装

    在窗体输入以下命令全局安装cordova和ionic

    安装cordova (cordova版本号建议安装6.3.1)

    npm install -g cordova@6.3.1

    安装ionic

    npm install -g ionic

    注:安装cordova和ionic时一次不一定会成功,须要多试几次,假设能翻墙的童鞋们能翻墙就更好了

    1.3 android  sdk的下载

    到谷歌官网(https://developer.android.com/sdk/index.html)上下载android sdk。然后需配置以下几个环境变量


    到此插件的开发环境就搭建好了。


    2.创建第一个应用

    创建的命令是ionic start CoolApp tabs


    3.加入平台

    3.1 进入创建的项目文件夹 

    cd CoolApp

    3.2 查看已有的平台

    cordova platforms list

    3.3加入所须要的平台  

    cordova platform add android

    假设要指定安装android6.0的平台能够这样运行命令:cordova platform add android@6.0

    假设想移除已经加入的平台的话 cordova platform remove android 或者cordova platform rm android

    注:假设须要看具体的cordova的命令的话能够參考这篇博文http://wenzhixin.net.cn/2014/02/11/cordova_command_line


    4.将project导入androidStudio(在到了studio之前要确保加入了android平台)

    第一步:选择Import project(Eclipse ADT,Gradle,etc.)



    第二步:找到platform->android下的build.gradle点击ok,等studio编译一段时间就能导入成功了


    到此:插件的准备工作就已经做好了

    5.插件开发

    接下来是插件的详细开发过程

    5.1 pluman的安装

    npm install -g plugman

    5.2 plugman安装完之后就能够创建一个插件了,使用如以下命令

    plugman create --name <pluginName> --plugin_id <pluginID> --plugin_version <version> [--path <directory>] [--variableNAME=VALUE]

    參数:
    pluginName: 插件名字
    pluginID: 插件id, egg : coolPlugin 
    oversion: 版本号, egg : 0.0.1
    directory:一个绝对或相对路径的文件夹,该文件夹将创建插件项目
    variable NAME=VALUE: 额外的描写叙述,如作者信息和相关描写叙述

    egg : plugman create --name CoolPlugin --plugin_id coolPlugin --plugin_version 0.0.1 

    生成的插件的文件夹例如以下:

    可是遵循规范的话,一般在src文件夹下新建android文件夹,然后在android文件夹下新建ShowToast.java类(ShowToast.java此时是一个空文件),例如以下图


    HelloPlugin.js和plugin.xml的解释能够參考http://blog.csdn.net/itcatface/article/details/50520301。这边博文解释的很具体

    当中HelloPlugin.js和plugin.xml的相关配置例如以下


    在命令生成的插件下默认生成plugin.xml和CoolPlugin.js,以下分别打开查看:

    a. plugin.xml的配置

    打开plugin.xml你会看到例如以下已经生成的配置

    <?xml version='1.0' encoding='utf-8'?

    > <plugin id="coolPlugin" version="0.0.1" xmlns="http://apache.org/cordova/ns/plugins/1.0" xmlns:android="http://schemas.android.com/apk/res/android"> <name>CoolPlugin</name> <js-module name="CoolPlugin" src="www/CoolPlugin.js"> <clobbers target="cordova.plugins.CoolPlugin" /> </js-module> </plugin>

    首先解释一下里面的几个參数:

    id:  插件的id

    version: 插件的版本号

    name: 插件的名字
    clobbers: 这个是js代码调用原生代码的引用

    b.CoolPlugin.js的配置

    coolPlugin.js稍后再和完整的plugin.xml一起介绍

    var exec = require('cordova/exec');
    
    exports.coolMethod = function(arg0, success, error) {
        exec(success, error, "CoolPlugin", "coolMethod", [arg0]);
    };
    

    c.完整plugin.xml和CoolPlugin.js

    plugin.xml

    <?xml version='1.0' encoding='utf-8'?>
    <plugin id="coolPlugin" version="0.0.1" xmlns="http://apache.org/cordova/ns/plugins/1.0" xmlns:android="http://schemas.android.com/apk/res/android">
        <name>CoolPlugin</name>
        <js-module name="CoolPlugin" src="www/CoolPlugin.js">
            <clobbers target="cordova.plugins.CoolPlugin" />
        </js-module>
    
        <platform name="android">
            <source-file src="src/android/ShowToast.java" target-dir="src/com/hand/toast"/>
    
            <config-file target="res/xml/config.xml" parent="/*">
                <feature name="ShowToast">
                    <param name="android-package" value="com.hand.toast.ShowToast"/>
                </feature>
            </config-file>
        </platform>
    </plugin>
    

    CoolPlugin.js

    var exec = require('cordova/exec');
    
    exports.toast = function(arg0, success, error) {
        exec(success, error, "ShowToast", "toast", [arg0]);
    };

    看到plugin.xml在之前的基础上新加了<platform>节点

    当中feature相应着CoolPlugin.js中exec(success, error, "ShowToast", "toast", [arg0]);第3个參数,这个两处的參数必须一致,不然插件调用不起来,exports.toast和第4个參数也必须一致,这个是调用原生代码中的方法,后面会讲到。

    plugin.xml中的很多其它信息能够參考http://blog.csdn.net/u013598660/article/details/50065937

    6.3插件的安装

    我的插件所在的路径是F:handPluginCoolPlugin

    首先切换到最初创建的CoolApp文件夹  cd CoolApp

    运行插件安装命令 cordova plugin add F:handPluginCoolPlugin

    运行完之后你就发现插件已经安装上去了

    假设你想卸载插件的话,运行cordova plugin remove  你的plugin_id

    egg:cordova plugin remove  coolPlugin

    安装后的在项目中如图所看到的:



    补充ShowToast.java

    package com.hand.toast;
    
    import android.widget.Toast;
    
    import org.apache.cordova.CallbackContext;
    import org.apache.cordova.CordovaPlugin;
    import org.json.JSONArray;
    import org.json.JSONException;
    
    public class ShowToast extends CordovaPlugin{
      private CallbackContext mCallbackContext;
      @Override
      public boolean execute(String action, JSONArray args, CallbackContext callbackContext) throws JSONException {
        this.mCallbackContext = callbackContext;
        if("toast".equals(action)){
          String msg = args.getString(0);
          Toast.makeText(cordova.getActivity(),msg,Toast.LENGTH_SHORT).show();
          callbackContext.success("success");
          return true;
        }
        mCallbackContext.error("error");
        return false;
      }
    }
    
    if(“toast”.equals(action))中的toast相应中CoolPlugin.js中的exports.toast和exec方法的第4个參数

    完毕这个类后把完整的类拷贝到之前的插件中覆盖掉ShowToast.java,这样一个最简单的插件就算是完毕了,接下来測试一下我们的成果

    6.4插件的使用

        <Button onclick="cordova.plugins.CoolPlugin.toast('吐司',function(msg){
          alert(msg);
        },function(msg){
          alet(msg);
        })">打印吐司</Button>

    能够在assets->templates->的tab-dash.html中加入使用代码:

    例如以下:

    <ion-view view-title="Dashboard">
      <ion-content class="padding">
        <Button onclick="cordova.plugins.CoolPlugin.toast('吐司',function(msg){
          alert(msg);
        },function(msg){
          alet(msg);
        })">打印吐司</Button>
      </ion-content>
    </ion-view>
    
    最后附着效果图:



    项目源代码连接:http://download.csdn.net/detail/cool_fuwei/9722834

    插件下载地址:http://download.csdn.net/detail/cool_fuwei/9722847

  • 相关阅读:
    sublime3 常用插件
    sublime3 常用快捷键
    博客园--头部昵称特效展示代码
    自定义jquery公用方法切换当前tab栏
    mysql计数器表的设计
    xargs命令
    java 常用命令
    python3 安装pip3
    数据库的范式和反范式
    git常用命令
  • 原文地址:https://www.cnblogs.com/lytwajue/p/7258868.html
Copyright © 2011-2022 走看看