Cordova初体验-优快云博客

本文链接：https://blog.youkuaiyun.com/ProgramMonkey_z/article/details/77047232

本文介绍了Cordova框架的基础使用方法，包括环境搭建、页面切换、添加联系人等功能，并演示了自定义插件的过程。此外，还介绍了如何使用Ionic框架改善Cordova应用的界面。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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官网上的图
在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