写在前面
如今，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接口 > 原生接口 > 回调函数
网友评论