如何在android studio中cordova的混合开发

Posted DarJeely

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何在android studio中cordova的混合开发相关的知识,希望对你有一定的参考价值。

基于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
1
完成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(0).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的混合开发的主要内容,如果未能解决你的问题,请参考以下文章

Visual Studio 2013 更新 4 cordova,如何导出 Android apk 文件发布到 PlayStore

在 Android Studio 中显示 Cordova“console.log”条目

Ionic cordova - 在 Android Studio 中构建项目

Cordova/Phonegap Android 目标:未安装 [已安装 Android Studio]

将 Cordova 项目导入 Android Studio

配置cordova的android开发环境(无android studio)