写在前面

如今，HyBridApp开发的框架有很多，本文将阐述如何在Mac平台下，使用 Appache Cordova 框架构建Android混合应用。

需要的工具

cordova-android(下载链接)

用于混合应用的创建、运行等。

Android Studio(下载链接)

应用编辑环境。

plugman(下载链接)

用于管理项目中的插件。安装、卸载等。

创建混合应用

命令行创建应用

命令格式：create 应用名 包名

create HybridAndroidApp cn.sample.hybridandroidapp

应用创建成功输出：

Creating Cordova project for the Android platform:
Path: HybridAndroidApp
Package: cn.sample.hybridandroidapp
Name: Hello_Cordova
Activity: MainActivity
Android target: android-23
Android project created with cordova-android@5.2.0-dev

项目目录结构图：

在项目目录下命令行下载所需插件

plugman install --platform android --project . --plugin cordova-plugin-whitelist
plugman install --platform android --project . --plugin cordova-plugin-device
plugman install --platform android --project . --plugin nl.x-services.plugins.toast

下载好的插件以文件夹方式放在cordova/plugins/目录下（新建的Cordova项目不存在plugins目录，会自动在下载插件时自动新建）。同时，在src目录下，也会自动生成插件对应的包及Java文件。

将项目导入Android Studio并成功运行

调用Android原生API

Cordova插件

Cordova插件是一个引入到Cordova项目里的一个包(目录)，它为Cordova webview与运行平台创建了一个连接，使得它们可以进行通信。

自定义插件

插件目录结构图

plugin.xml 文件内容解析

    <?xml version="1.0" encoding="UTF-8"?>

    <!--
          id：用于唯一标识插件，Android一般用插件所在java包名表示，例：cordova-aplugin-toast;
              这个id会生成插件目录(CordovaProject/cordova/plugins/cordova-aplugin-toast)。
     version：自定义。
    -->
    <plugin xmlns="http://apache.org/cordova/ns/plugins/1.0"
        id=""
          version="">

    <!-- 插件名 -->
    <name></name>

    <!-- 插件描述 -->
    <description>Cordova Device Plugin</description>

    <!-- 一般就这个 -->
    <license>Apache 2.0</license>
    <!-- 一般就这个 -->
    <keywords>cordova,device</keywords>

    <!-- 公共JS接口引用，各个平台都需要引入，为cordova-plugin-device下的接口 -->
    <js-module src="www/device.js" name="device">
        <clobbers target="device" />
    </js-module>

    <!-- 平台名(android、ios、windows、osx等)，如果插件适用于多个平台，那么有多少个平台就需要多少个<platform>标签-->
    <platform name="">
        <!-- CordovaProject/res/xml/config.xml文件中会加入以下信息，让平台知道这个插件的存在 -->
        <!-- 固定值 -->
        <config-file target="config.xml" parent="/*">
            <!-- 插件名 -->
            <feature name="">
                <!--
                     name：格式为：平台名-package,例如：android-package、ios-package、wp-package等
                     value：插件全类名(Android)
                -->
                <param name="" value=""/>
                <!-- param标签可有多个，例如：<param name="onload" value="true"/>(启动应用时加载这个插件)等 -->

            </feature>
        </config-file>

        <!-- 源文件引入 -->
        <!-- android
             src：java文件在当前插件目录中的路径，例：src/android/HybridBridge.java
             target-dir：Cordova项目中引入路径，即放在项目中src下的哪个包中。例：src/cn/sample/hybrid
         -->
        <source-file src="" target-dir=""/>

        <!-- ios
            <header-file src="src/ios/CDVDevice.h" />
            <source-file src="src/ios/CDVDevice.m" />
        -->

    </platform>
    </plugin>

plugin.xml文件官方介绍点这里

编写js接口（需要node.js 知识）

cordova.exec 方法参数说明

cordova.exec(
// 调用成功的回调函数
function(winParam) {  }, 
// 调用失败的回调函数 
function(error){ },
// 服务名,Android平台对应类名  
"ToastPlugin", 
// 类中方法名 
"show", 
// 方法需要的参数，以数组形式传递
["firstArgument", "secondArgument", 42, false]
);

简单js接口示例

var ToastPlugin{
show:function(showCont,successCallback,failCallback){ 
     cordova.exec(successCallback,fialCallback,"ToastPlugin","show",[showCont]); } 
} 
module.exports = ToastPlugin;

编写对应平台本地接口（与平台相关）

Android平台接口编写示例

 // 直接在项目中对应目录下编写这个接口，这样可以自动导包。
 // 编写好后复制到存放插件的对应目录即可，可参见自定义插件目录
    pulbic class ToastPlugin{
        
        // action:需要执行的操作，区分不同事件
        // args:需要的参数
        // back:回调对象
        @override
        public boolean execute(String action,JSONArray args,CallbackContext back) throws JSONException{
            
            if (args == null || args.length() < 1 || args.get(0) == null){
                
                back.error("fail");
                return false;
                
            };

            Activity aty = cordova.getActivity();
            Toast.makeText(aty,args.get(0).toString(),Toast.LENGTH_LONG).show();
            back.success("success!");
            return true;
        
        }
        
    
    }

插件管理

plugman 安装插件

plugman install --platform <ios|amazon-fireos|android|blackberry10|wp8> --project <directory> --plugin <name|url|path> [--plugins_dir <directory>] [--www <directory>] [--variable <name>=<value> [--variable <name>=<value> ...]]

--platform:平台
--plugin:插件路径、网络地址、插件id都可以。
--project:cordova项目路径。
例：

plugman install --platform android --plugin /Users/sharp/DevTools/Cordova-Android/cordova-custom-plugin/ToastPlugin --project .

plugman 卸载插件

plugman uninstall --platform <ios|amazon-fireos|android|blackberry10|wp8> --project <directory> --plugin <id> [--www <directory>] [--plugins_dir <directory>]

--platform:平台。
--plugin:需要卸载的插件id。
--project:cordova项目路径。
例：

plugman uninstall --platform android --plugin cordova-aplugin-toast --project .

Web端编写

Web 文件存放目录

项目/aseets

编写Html页面对应js文件

    var app = {
        
        // app default function start
        // Application Constructor  
        initialize: function() {
            this.bindEvents();
        },
        
        // Bind Event Listeners
        //
        // Bind any events that are required on startup. Common events are:
        // 'load', 'deviceready', 'offline', and 'online'.
        bindEvents: function() {
            document.addEventListener('deviceready', this.onDeviceReady, false);
        },
        
        // deviceready Event Handler
        //
        // The scope of 'this' is the event. In order to call the 'receivedEvent'
        // function, we must explicitly call 'app.receivedEvent(...);'
        onDeviceReady: function() {
            // 为指定元素添加监听 
            // 例：document.getElementById("your id").addEventListener("click", app.showToast);
            app.receivedEvent('deviceready');
        },
        
        // Update DOM on a Received Event
        receivedEvent: function(id) {
            var parentElement = document.getElementById(id);
            var listeningElement = parentElement.querySelector('.listening');
            var receivedElement = parentElement.querySelector('.received');

            listeningElement.setAttribute('style', 'display:none;');
            receivedElement.setAttribute('style', 'display:block;');

            console.log('Received Event: ' + id);
        },
        // app default function end
        
        // your function start here

    }

    app.initialize();

Html 页面

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>title</title>
    
    <!-- PhoneGap Libray-->
    <script type="text/javascript" src="cordova.js"></script>
    <!-- Your js file-->
    </head>
    
    <body>
        // your html body
    </body>
    
    </html>

调用原生接口执行顺序

js点击函数 > js接口 > 原生接口 > 回调函数