Android+Cordova混合开发以及Cordova自定义插

2017-08-11  本文已影响452人  飞渡浮舟

请注明出处:http://blog.csdn.net/qq_23179075/article/details/77104276

Android+Cordova混合开发以及Cordova自定义插件


[TOC]

美女镇楼

这里写图片描述

一、AndroidStudio中集成Cordova项目

这里就直接跳过Cordova和NodeJs的安装

1.创建Cordova项目

  • 命令:cordova create [项目名] [包名]
  • 例子:cordova create Test com.sie.test.android
  • 演示:
Paste_Image.png
  • 创建成功目录结构:
Paste_Image.png

2.项目中添加Android平台

  • 命令:cordova platform add [平台名]
  • 例子:cordova platform add android
  • 演示:
Paste_Image.png
  • 创建成功目录结构(Test/platforms):
Paste_Image.png
  • (Test/platforms/android)
Paste_Image.png

3.AndroidStudio中导入Cordova项目

  • 打开AndroidStuido
Paste_Image.png
  • 选择platforms/android文件夹
Paste_Image.png
  • 打开完成的目录结构
Paste_Image.png
  • 集成完成run一下,看看效果:
Paste_Image.png
  • OK 在AS中完成Cordova项目的集成

二、自定义Cordova中的Android插件

1.安装plugman,Cordova需要用这个来创建插件

  • 命令: npm install -g plugman

2.plugman安装完之后就可以创建一个插件了cordova plugin

  • 命令:plugman create --name [插件名] --plugin_id [插件ID] --plugin_version [插件版本号]
  • 例子:plugman create --name toast-plugin --plugin_id toast-plugin --plugin_version 1.0.0
  • **演示:(随便找个目录) **
Paste_Image.png
  • 创建完成后目录下就看到这个文件夹:
Paste_Image.png
  • 生成的插件的目录如下:
Paste_Image.png
  • 一个规范的Android插件的话,一般src目录下新建android目录,然后在android目录下新建类
  • 目录如下:
Paste_Image.png

3.创建完成后需要对plugin.xml进行配置

 <?xml version='1.0' encoding='utf-8'?>
<plugin id="toast-plugin" version="1.0.0" xmlns="http://apache.org/cordova/ns/plugins/1.0" xmlns:android="http://schemas.android.com/apk/res/android">
    <name>toast-plugin</name>
    <js-module name="toast-plugin" src="www/toast-plugin.js">
        <clobbers target="cordova.plugins.toast-plugin" />
    </js-module>
</plugin>

<?xml version='1.0' encoding='utf-8'?>
<plugin id="toast-plugin" version="1.0.0" xmlns="http://apache.org/cordova/ns/plugins/1.0" xmlns:android="http://schemas.android.com/apk/res/android">
    <name>toast-plugin</name>
    <js-module name="MyToast" src="www/toast-plugin.js">
        <clobbers target="MyToast" />
    </js-module>

    <!--添加我们自己的平台  -->
    <platform name="android">  <!-- 平台类型 -->
        <config-file target="res/xml/config.xml" parent="/*">  
            <feature name="MyToast">  <!-- JS调用时的前缀名字 -->
                <param name="android-package" value="org.apache.cordova.toast.MyToast"/> <!-- .java类名全路径 --> 
            </feature>  
        </config-file>  
        <source-file src="src/android/MyToast.java" target-dir="src/org/apache/cordova/toast" />  
        <!-- src:java源文件的路径, target-dir:插件安装好后,源文件的位置,要和上面的包名对应 -->
    </platform> 
</plugin>

4.编写Android原生功能类 MyToast.java文件

package org.apache.cordova.toast;

import android.widget.Toast;

import org.apache.cordova.CallbackContext;
import org.apache.cordova.CordovaArgs;
import org.apache.cordova.CordovaPlugin;
import org.json.JSONArray;
import org.json.JSONException;

/**
 * 时 间: 2017/8/12
 * 作 者: 郑亮
 * Q  Q : 1023007219
 */

public class MyToast extends CordovaPlugin {
    
    @Override
    public boolean execute(String action, String rawArgs, CallbackContext callbackContext) throws JSONException {
        return super.execute(action, rawArgs, callbackContext);
    }

    @Override
    public boolean execute(String action, JSONArray args, CallbackContext callbackContext) throws JSONException {
        return super.execute(action, args, callbackContext);
    }

    @Override
    public boolean execute(String action, CordovaArgs args, CallbackContext callbackContext) throws JSONException {
        //showToast 是你在JS中调用的方法名;
        if (action.equals("showToast")){
            //这里可以实现一些你的原生逻辑功能
            Toast.makeText(cordova.getActivity(), args.getString(0), Toast.LENGTH_SHORT).show();
            return true;
        }
        return false;
    }
}

5.编写toast-plugin.js文件

var exec = require('cordova/exec');
/**
 * MyToast :是plugin.xml中配置的feature的nema
 * showToast: 是js中调用的方法名
 */
exports.showToast = function(arg0) {
    exec(null, null, "MyToast", "showToast", [arg0]);
};

6.通过npm创建Mudule

Paste_Image.png Paste_Image.png
{
  "name": "toast-plugin",
  "version": "1.0.0",
  "description": "这是一个Cordova的一个Andoird插件",
  "cordova": {
    "id": "cordova-plugin-mytoast",
    "platforms": [
      "android"
    ]
  },
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "郑亮",
  "license": "ISC"
}

7.项目中添加自定义插件

Paste_Image.png Paste_Image.png

8.完结:自定义插件的使用

MyToast.showToast('你好!我是JS中调用的代码');

请注明出处:http://blog.csdn.net/qq_23179075/article/details/77104276

上一篇 下一篇

猜你喜欢

热点阅读