Cordova初探
最近研究hybrid应用了解到可以使用cordova这个框架,所以就简单尝试了一下使用cordova实现一个简单的Android应用。由于网上资料确实很少,所以记录一下自己的学习经历。
概述
与以往做原生Android不同,使用cordova开发app其实就是写HTML+CSS+JS。基于这点Apache组织将原生访问设备相关的API封装成了插件,插件分为两部分一部分是原生Android代码,还有一部分就是js代码,编写者只需要调用js代码就可以访问系统设备,不用熟悉原生Android接口就可以编写移动端应用。但是如果你需要一些特别的功能,这时插件可能就不能完全满足你的要求了,所以你就需要自定义插件。
1.环境搭建
与原生Android不同,cordova应用需要使用node.js的一个依赖库cordova来创建cordova应用,然后将这个应用导入到我们的AndroidStudio中,具体可以看这篇博文http://blog.youkuaiyun.com/jia516967927/article/details/51517226
下载nodejs以后会附带一个npm,它可以下载nodejs平台的各种库,但是用它下载速度极慢,所以可以用国内的一个镜像站来代替,现在比较常用的就是淘宝的
npm install -g cnpm --registry=https://registry.npm.taobao.org
2.编写应用
在启动应用的时候加载的是MainActivity,这个Activity是继承自CordovaActivity的,它在根视图上添加了一个webview控件,在执行onCreate方法中调用loadurl会到我的config.xml文件中加载我所配置的 url<content src="index.html" />
,然后解析执行我的html,Android生命周期与js事件的关系可以参考下图
在cordova中提倡的是单页模式,所谓的单页模式就是只用一个activity,其他页面都是通过webview请求服务器获取不同的页面数据,值得注意的的是在cordova的html中不允许内联脚本文件
下面我们尝试使用Cordova完成一些功能
1.使用cordova完成页面切换功能
index.html
<html>
<head>
<link type="text/css" rel="stylesheet" href="css/themes/icon.css"/>
<link type="text/css" rel="stylesheet" href="css/themes/default/easyui.css"/>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.easyui.min.js"></script>
<script type="text/javascript" src="js/locale/easyui-lang-zh_CN.js"></script>
</head>
<body>
<a id="next" href="javascript:void(0);"></a>
<a id="addContact" href="javascript:void(0);"></a>
<a id="browser" href="javascript:void(0);"></a>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
</body>
</html>
index.js
$("#next").bind("click", function(){
location.href = "http://192.168.10.108:8080/cordovaDemo/hello/HelloAction";
});
这样我们就可以实现页面的切换了,但是需要在config.xml中加上几句话让它不打开系统自带的浏览器,是不是感觉很简单呢~
2.使用官方提供的插件添加联系人
在此之前我们需要为项目添加插件cordova plugin add cordova-plugin-contacts
var myContact = navigator.contacts.create({"displayName": "张三"});
var success = function() {
alert("联系人已保存")
};
var error = function (){
alert("保存失败:" + message);
};
myContact.save(success, error);
这短短的几行代码,就可以将联系人信息保存到电话簿中。
3.自定义插件
①编写自定义插件需要继承CordovaPlugin这个类。
②在config.xml中注册该插件
③用js代码调用该插件
MyPlugin.java
public class MyPlugin extends CordovaPlugin {
private static final String CLICK_EVENT = "plugins";
@Override
public boolean execute(String action, JSONArray args, CallbackContext callbackContext) throws JSONException {
if (action.equals(CLICK_EVENT)){
Intent intent = new Intent(Intent.ACTION_VIEW);
intent.setData(Uri.parse("http://www.baidu.com"));
cordova.getActivity().startActivity(intent);
callbackContext.success();
return true;
}else{
callbackContext.error("事件不匹配");
return false;
}
}
index.js
var errorCallback = function(message){
alert(message);
};
var successCallback = function(){
alert("success")
};
cordova.exec(successCallback, errorCallback, "MyPlugin", "plugins", []);
config.xml
<feature name="MyPlugin">
<param name="android-package" value="com.example.cordova.MyPlugin" />
</feature>
运行效果
通过以上三个事例我们初步了解了cordova的使用,但是这个界面未免也太丑了吧,如何才能做到和原生应用一样呢?
可以使用ionic+cordova进行开发ionic是一个专为移动平台打造的UI框架,基于Angular JS ,它可以为cordova应用提供界面支持,让他看上去与原生应用非常相似。但是对于设备功能的访问还是要依靠cordova这个桥梁。
安装ionic
npm install -g ionic
官方demo的效果
有木有感觉与原生应用很相似了呢~~~~