cordova与android通信_Cordova 构建 Android 混合应用

写在前面

如今，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 文件内容解析

id=""

version="">

Cordova Device Plugin

Apache 2.0

cordova,device

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 --project --plugin [--plugins_dir ] [--www ] [--variable = [--variable = ...]]

--platform:平台

--plugin:插件路径、网络地址、插件id都可以。

--project:cordova项目路径。

例：

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

plugman 卸载插件

plugman uninstall --platform --project --plugin [--www ] [--plugins_dir ]

--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 页面

title

// your html body

调用原生接口执行顺序

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