写在前面
如今，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 [email protected]
项目目录结构图：
在项目目录下命令行下载所需插件
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 文件内容解析
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接口 > 原生接口 > 回调函数