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

ゞ浴缸里的玫瑰 2023-06-01 03:28 54阅读 0赞

基于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>
        
        <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

转载于:https://www.cnblogs.com/Jeely/p/11320155.html