寫在前面

如今旨剥，HyBridApp開發(fā)的框架有很多芒涡，本文將闡述如何在Mac平臺(tái)下泽篮，使用 Appache Cordova 框架構(gòu)建Android混合應(yīng)用坊秸。

需要的工具

cordova-android(下載鏈接)

用于混合應(yīng)用的創(chuàng)建、運(yùn)行等选脊。

Android Studio(下載鏈接)

應(yīng)用編輯環(huán)境杭抠。

plugman(下載鏈接)

用于管理項(xiàng)目中的插件。安裝恳啥、卸載等偏灿。

創(chuàng)建混合應(yīng)用

命令行創(chuàng)建應(yīng)用

命令格式：create 應(yīng)用名 包名

create HybridAndroidApp cn.sample.hybridandroidapp

應(yīng)用創(chuàng)建成功輸出：

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

項(xiàng)目目錄結(jié)構(gòu)圖：

在項(xiàng)目目錄下命令行下載所需插件

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項(xiàng)目不存在plugins目錄，會(huì)自動(dòng)在下載插件時(shí)自動(dòng)新建）钝的。同時(shí)菩混，在src目錄下忿墅，也會(huì)自動(dòng)生成插件對(duì)應(yīng)的包及Java文件。

將項(xiàng)目導(dǎo)入Android Studio并成功運(yùn)行

調(diào)用Android原生API

Cordova插件

Cordova插件是一個(gè)引入到Cordova項(xiàng)目里的一個(gè)包(目錄)沮峡，它為Cordova webview與運(yùn)行平臺(tái)創(chuàng)建了一個(gè)連接疚脐，使得它們可以進(jìn)行通信。

自定義插件

插件目錄結(jié)構(gòu)圖

plugin.xml 文件內(nèi)容解析

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

    <!--
          id：用于唯一標(biāo)識(shí)插件邢疙，Android一般用插件所在java包名表示棍弄，例：cordova-aplugin-toast;
              這個(gè)id會(huì)生成插件目錄(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>

    <!-- 一般就這個(gè) -->
    <license>Apache 2.0</license>
    <!-- 一般就這個(gè) -->
    <keywords>cordova,device</keywords>

    <!-- 公共JS接口引用呼畸，各個(gè)平臺(tái)都需要引入，為cordova-plugin-device下的接口 -->
    <js-module src="www/device.js" name="device">
        <clobbers target="device" />
    </js-module>

    <!-- 平臺(tái)名(android颁虐、ios蛮原、windows、osx等)另绩，如果插件適用于多個(gè)平臺(tái)儒陨，那么有多少個(gè)平臺(tái)就需要多少個(gè)<platform>標(biāo)簽-->
    <platform name="">
        <!-- CordovaProject/res/xml/config.xml文件中會(huì)加入以下信息，讓平臺(tái)知道這個(gè)插件的存在 -->
        <!-- 固定值 -->
        <config-file target="config.xml" parent="/*">
            <!-- 插件名 -->
            <feature name="">
                <!--
                     name：格式為：平臺(tái)名-package,例如：android-package笋籽、ios-package蹦漠、wp-package等
                     value：插件全類名(Android)
                -->
                <param name="" value=""/>
                <!-- param標(biāo)簽可有多個(gè)，例如：<param name="onload" value="true"/>(啟動(dòng)應(yīng)用時(shí)加載這個(gè)插件)等 -->

            </feature>
        </config-file>

        <!-- 源文件引入 -->
        <!-- android
             src：java文件在當(dāng)前插件目錄中的路徑车海，例：src/android/HybridBridge.java
             target-dir：Cordova項(xiàng)目中引入路徑笛园，即放在項(xiàng)目中src下的哪個(gè)包中。例：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文件官方介紹點(diǎn)這里

編寫js接口（需要node.js 知識(shí)）

cordova.exec 方法參數(shù)說明

cordova.exec(
// 調(diào)用成功的回調(diào)函數(shù)
function(winParam) {  }, 
// 調(diào)用失敗的回調(diào)函數(shù) 
function(error){ },
// 服務(wù)名,Android平臺(tái)對(duì)應(yīng)類名  
"ToastPlugin", 
// 類中方法名 
"show", 
// 方法需要的參數(shù)侍芝，以數(shù)組形式傳遞
["firstArgument", "secondArgument", 42, false]
);

簡單js接口示例

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

編寫對(duì)應(yīng)平臺(tái)本地接口（與平臺(tái)相關(guān)）

Android平臺(tái)接口編寫示例

 // 直接在項(xiàng)目中對(duì)應(yīng)目錄下編寫這個(gè)接口研铆，這樣可以自動(dòng)導(dǎo)包。
 // 編寫好后復(fù)制到存放插件的對(duì)應(yīng)目錄即可州叠，可參見自定義插件目錄
    pulbic class ToastPlugin{
        
        // action:需要執(zhí)行的操作棵红，區(qū)分不同事件
        // args:需要的參數(shù)
        // back:回調(diào)對(duì)象
        @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:平臺(tái)
--plugin:插件路徑、網(wǎng)絡(luò)地址留量、插件id都可以。
--project:cordova項(xiàng)目路徑哟冬。
例：

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:平臺(tái)楼熄。
--plugin:需要卸載的插件id。
--project:cordova項(xiàng)目路徑浩峡。
例：

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

Web端編寫

Web 文件存放目錄

項(xiàng)目/aseets

編寫Html頁面對(duì)應(yīng)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() {
            // 為指定元素添加監(jiān)聽 
            // 例：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>

調(diào)用原生接口執(zhí)行順序

js點(diǎn)擊函數(shù) > js接口 > 原生接口 > 回調(diào)函數(shù)