基于Android Studio 中Cordova的开发

cordova简介

Cordova的前身是PhoneGap 官网： (http://cordova.io)

Cordova应是运行在客户端本地应用容器的web应用。因此，运行在Cordova容器中的Html5应用的结构和传统的基于web服务器的有所不同。传统的web应用中服务器端做了大部分工作，比如按照用户请求传回生成的内容。而Cordova这种容器中的应用本身包括了所需要的静态页面，用户请求一般由js代码响应并与服务器交互，这样与服务器交互的内容会比较少。并且由于html5本身的特性（如本地存储）或容器的API，容器的应用可以脱离服务器运行。

cordova安装

先安装JDK

下载地址：（http://www.oracle.com/technetwork/java/javase/downloads/index.html）

安装SDK

下载地址：（http://developer.android.com/sdk/index.html）

CLI（command-line interface，命令行界面）的安装

CLI是用JavaScript写的，并且是用Node.js作为运行时执行引擎。所以需要先安装Node.js（http://nodejs.org/download/），在安装过程中，CLI要获取一些GitHub的代码，所以要安装Git（https://git-scm.com/downloads）；

当Node.js和Git都安装好后，在Git中命令行中输入：

npm install -g cordova

完成cordova的安装。

完成了cordova安装的基本配置，可以去了解一下CLI的常用命令，网上有很多（https://blog.csdn.net/guoscy/article/details/79202794）。通过命令创建一个android工程，添加android平台，添加WhitelistPlugin白名单插件，至此生成的android工程中就有了我们可移植到android studio中的一些核心文件。注意用Cordova CLI工具新建一个项目（不要使用 cordova build 命令进行编译，不然导入android studio中失败）

可以根据自己的需要添加cordova提供的丰富系统插件（用命令行添加很容易），也可以自己去写自定义插件。

cordova集成到android studio

将这个 工程集成到android studio中最关键的是CordovaLib 、www、（platform_www、cordova ）、res下的中的配置文件config.xml；

CordovaLib以Moudle的形式导入工程，并依赖于主工程；

www放在工程目录assets文件夹下；

platform_www、cordova是主要用于CordovaCLI命令行类的，主要用于build后的作用；（导不到导入AS都可以）

我们自定义插件主要在www、和工程src下进行编写；

大致的结构图



现在我们就可以在工程下建一个文件夹，专门管理我们自定义的插件，进行开发。

cordova下自定义插件

以定义一个Toast的插件为例

在src下创建ToastPlugin.java的文件执行android原生的调用

    /**

     * 显示土司插件

     * @author yuhailong

     *

     */

public class ToastPlugin extends CordovaPlugin {

     @Override

    public boolean execute(String action, JSONArray args,

                           CallbackContext callbackContext) throws JSONException {

        //前端回调的方法名

        if ("showToast".equals(action)) {

             return executeShowToast(args, callbackContext);

        } else {

            callbackContext.error("发生异常，请检查API使用是否正确");

            return false;

        }

     }

    /**

     * 显示toast的原生方法

     */

    private void executeShowToast() {

        try {

             CordovaArgs cordovaArgs = new CordovaArgs(args);

             String text = cordovaArgs.getJSONObject().getString("text");

             android.widget.Toast.makeText(cordova.getActivity(), text,Toast.LENGTH_LONG).show();

             callbackContext.success();

             return true;

        } catch (Exception e) {

            e.printStackTrace();

            callbackContext.error("显示toast异常");

            return false;

        }

    }

}

在config.xml中配置插件路径

 <feature name="ToastPlugin">

        <param

            name="android-package"

            value="com.example.test.plugins.ToastPlugin" />

    </feature>

在asserts/www/plugins/目录下插件自己的插件js文件

如：asserts/www/platform/android/plugins/cordova-plugin-toast/toast.js

cordova.define( "com.example.test.plugins.ToastPlugin" , function(require, exports, module) {

        var exec = require('cordova/exec');

        /**

         * Provides access to notifications on the device.

         */

        module.exports = {

                /**

                 * Causes the device to beep.

                 * On Android, the default notification ringtone is played "count" times.

                 *

                 * @param {Integer} type       The Toast type.

                */

        showToast:function(successCallback,errorCallback,content){

           exec(successCallback, errorCallback, "ToastPlugin", "showToast", [content]);

        },

        };

    });

添加土司插件js配置信息，配置调用的方法名

在assets/www/platform/android/cordova_plugins.js文件中添加如下信息：

,{

        "file" : "plugins/cordova-plugin-toast/toast.js",

        "id" : "com.example.test.plugins.ToastPlugin",

        "clobbers" : ["navigator.webtoast"]//定义调用的方法

    }

前端插件中方法代码调用（本地的调试）

在index.html文件中

<html>

<head>

    <!--

    Customize this policy to fit your own app's needs. For more guidance, see:

        https://github.com/apache/cordova-plugin-whitelist/blob/master/README.md#content-security-policy

    Some notes:

        * gap: is required only on iOS (when using UIWebView) and is needed for JS->native communication

        * https://ssl.gstatic.com is required only on Android and is needed for TalkBack to function properly

        * Disables use of inline scripts in order to mitigate risk of XSS vulnerabilities. To change this:

            * Enable inline JS: add 'unsafe-inline' to default-src

    -->

    <meta http-equiv="Content-Security-Policy"

          content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-  *">

    <meta http-equiv="Content-type" content="text/html; charset=utf-8">

    <meta name="format-detection" content="telephone=no">

    <meta name="msapplication-tap-highlight" content="no">

    <meta name="viewport"

          content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">

    <link rel="stylesheet" type="text/css" href="css/index.css">

    <title>Hello World</title>

</head>

<body>

<div class="app">

    <h1>Apache Cordova</h1>

    <div id="deviceready" class="blink">

        <p class="event listening">Connecting to Device</p>

        <p class="event received">Device is Ready</p>

        <button id="myBtnOne" >Toast</button>

    </div>

</div>

<script type= "text/javascript" src="cordova.js"></script>

<script type= "text/javascript" src="js/index.js"></script>

<script type= "text/javascript" src="js/custom.js"></script>

</body>

</html>

类似在index.js文件夹下创建一个custom.js的文件，将js代码写在里面，Toast这里要注意的是弹框只能 通过id的查找了进行编辑；

custom.js的文件如下：

function showToast(){

    navigator.webtoast.showToast(function(result){

              alert("success:"+result);

          },function(err){

              alert("error:"+err);

          },{

              text:'你好，我是 Toast~',

          });

}

document.getElementById("myBtnOne" ).addEventListener("click", showToast);

结束

整个cordova在android studio中的导入和自定义插件的开发流程，大致如上。具体的详情可以参照cordova的官方给的文档和网上的一下资料。

个人理解cordova相比于RN还是要容易上手些，cordova的核心还是一个H5，类似原生是个浏览器的壳；RN是通过js映射原生的组件。所以感觉交互上RN是要比cordova要好的，对于初学者要学的更多。当然两者都有其优势，要想深入其核心都是要下一点功夫的。

---------------------

版权声明：本文为CSDN博主「那一年的梧桐雨」的原创文章，遵循CC 4.0 by-sa版权协议，转载请附上原文出处链接及本声明。

原文链接：https://blog.csdn.net/liugang921118/article/details/82345435

如何在android studio中cordova的混合开发的更多相关文章

  1. 如何在Android Studio中指定NDK位置？

    如何在Android Studio中指定NDK位置? 问题描述 NDK已经手工下载解包在本地: D:\Portable\android-ndk-r13b 每次创建支持C++项目时,都提示NDK没配置, ...

  2. 如何在Android Studio中添加注释模板信息？

    如何在Android Studio中添加注释模板信息? 在开发程序的时候,我们一般都会给文件自动添加上一些关于文件的注释信息,比如开发者的名字,开发的时间,开发者的联系方式等等.那么在android ...

  3. [Android Tips] 30.如何在 Android Studio 中一次性格式化所有代码

    在目录上面右击,有 Reformat Code Ctrl + Alt + L 参考 如何在IntelliJ IDEA或Android Studio中一次性格式化所有代码?

  4. 如何在Android Studio中使用Gradle发布项目至Jcenter仓库

    简述 目前非常流行将开源库上传至Jcenter仓库中,使用起来非常方便且易于维护,特别是在Android Studio环境中,只需几步配置就可以轻松实现上传和发布. Library的转换和引用 博主的 ...

  5. 如何在Android studio中同时打开多个工程？ (转载)

    最近学习Android Studio,想同时打开两个Project.但是点击File->Open之后,原有的Project被关闭掉了.怎么在新的窗口中打开Project呢? 解决: 点击Help ...

  6. 菜鸟水平如何在Android Studio中添加uiautomator测试框架

    1.启动AS,弹出创建Android Studio项目 2.选择 "Start a new Android Studio project",输入 application name ...

  7. 如何在Android Studio中导入JNI生成的.so库

    由于在原来的ADT的Eclipse环境中,用ndk_build工具生成了相应的各个.so库文件之后,eclipse工具就会自动把这些库导入到apk中.而Android Studio目前为止(0.86版 ...

  8. 如何在Android studio中同时打开多个工程？

    最近学习Android Studio,想同时打开两个Project.但是点击File->Open之后,原有的Project被关闭掉了.怎么在新的窗口中打开Project呢? 解决: 点击Help ...

  9. 如何在Android Studio中添加RecyclerView-v7支持包

    1.打开SDK Manager,在Extras树下找到Android Support Library,下载好支持包.RecyclerView在v7-21版本就出来了.我这里不用更新了,说明是最新的,怎 ...

随机推荐

  1. Apache JMeter

    https://en.wikipedia.org/wiki/Apache_JMeter Apache JMeter 是 Apache 的一个项目,它是一个负载测试工具可以用于进行各种服务器的性能测试分 ...

  2. jmeter添加自定义扩展函数之if判断

    1,打开eclipse,新建maven工程,在pom中引用jmeter核心jar包,具体请看---https://www.cnblogs.com/guanyf/p/10863033.html---,这 ...

  3. Oracle 简单统计示例

    有数据如下: eg1:现在需要统计所有男性人员数量,所有女性人员数量,sclassno=10000的男性人员的总年龄,年龄大于20的女性人员数量 ----sign( number )/*If numb ...

  4. 洛谷 P1972 [SDOI2009]HH的项链——树状数组

    先上一波题目 https://www.luogu.org/problem/P1972 这道题是询问区间内不同数的个数 明显不是正常的数据结构能够维护的 首先考虑 因为对于若干个询问的区间[l,r],如 ...

  5. luoguP3258 [JLOI2014]松鼠的新家 题解(树上差分)

    P3258 [JLOI2014]松鼠的新家  题目 树上差分:树上差分总结 #include<iostream> #include<cstdlib> #include<c ...

  6. canvas 踩坑记录

    一.绘制一个带有多张图片和文字的canvas.要求将一张矩形的图片,放置进去显示为圆角矩形的图片 解决方案,先把图片处理成圆角矩形的样子,再放进去就可以了 绘制圆角矩形图片的解决方案 效果如下图 &l ...

  7. Mac os x安装IDEAL及配置JDK和Maven

    此文章是在已安装好IDEAL前提下进行配置jdk和maven的操作文档. 1. 下载并配置JDK及Maven Mac下载并配置JDK方法: 详见Mac安装JDK和JMeter5-安装JDK Mac下载 ...

  8. 十、hibernate的延迟加载和抓取策略

    延迟加载:控制sql语句发送时机 抓取策略:控制sql语句格式,子查询.连接查询.普通sql 延迟加载 延迟加载(lazy),也叫做懒加载:执行到该行代码时,不发送sql进行查询,只有在真正使用到这个 ...

  9. js常用扩展方法

    在日常的开发过程中,经常会碰到javaScript原生对象方法不够用的情况,所以经常会对javaScript原生方法进行扩展.下面就是在实际工作时,经常使用的一些方法,做一下记录,有需要的可以拿去. ...

  10. 力扣——remove element（删除元素） python实现

    题目描述: 中文: 给定一个数组 nums 和一个值 val,你需要原地移除所有数值等于 val 的元素,返回移除后数组的新长度. 不要使用额外的数组空间,你必须在原地修改输入数组并在使用 O(1) ...