如何在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 完成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的混合开发的更多相关文章
- 如何在Android Studio中指定NDK位置？
如何在Android Studio中指定NDK位置? 问题描述 NDK已经手工下载解包在本地: D:\Portable\android-ndk-r13b 每次创建支持C++项目时,都提示NDK没配置, ...
- 如何在Android Studio中添加注释模板信息？
如何在Android Studio中添加注释模板信息? 在开发程序的时候,我们一般都会给文件自动添加上一些关于文件的注释信息,比如开发者的名字,开发的时间,开发者的联系方式等等.那么在android ...
- [Android Tips] 30.如何在 Android Studio 中一次性格式化所有代码
在目录上面右击,有 Reformat Code Ctrl + Alt + L 参考 如何在IntelliJ IDEA或Android Studio中一次性格式化所有代码?
- 如何在Android Studio中使用Gradle发布项目至Jcenter仓库
简述 目前非常流行将开源库上传至Jcenter仓库中,使用起来非常方便且易于维护,特别是在Android Studio环境中,只需几步配置就可以轻松实现上传和发布. Library的转换和引用 博主的 ...
- 如何在Android studio中同时打开多个工程？ (转载)
最近学习Android Studio,想同时打开两个Project.但是点击File->Open之后,原有的Project被关闭掉了.怎么在新的窗口中打开Project呢? 解决: 点击Help ...
- 菜鸟水平如何在Android Studio中添加uiautomator测试框架
1.启动AS,弹出创建Android Studio项目 2.选择 "Start a new Android Studio project",输入 application name ...
- 如何在Android Studio中导入JNI生成的.so库
由于在原来的ADT的Eclipse环境中,用ndk_build工具生成了相应的各个.so库文件之后,eclipse工具就会自动把这些库导入到apk中.而Android Studio目前为止(0.86版 ...
- 如何在Android studio中同时打开多个工程？
最近学习Android Studio,想同时打开两个Project.但是点击File->Open之后,原有的Project被关闭掉了.怎么在新的窗口中打开Project呢? 解决: 点击Help ...
- 如何在Android Studio中添加RecyclerView-v7支持包
1.打开SDK Manager,在Extras树下找到Android Support Library,下载好支持包.RecyclerView在v7-21版本就出来了.我这里不用更新了,说明是最新的,怎 ...
随机推荐
- zabbix部署agent
1.下载zabbix源 rpm -Uvh https://repo.zabbix.com/zabbix/4.2/rhel/7/x86_64/zabbix-release-4.2-2.el7.noarc ...
- git 忽略提交及已push过得文件忽略提交
在使用Git的过程中,我们喜欢有的文件比如日志,临时文件,编译的中间文件等不要提交到代码仓库,这时就要设置相应的忽略规则,来忽略这些文件的提交 Git 忽略文件提交的方法 这种方式通过在项目的某个文件 ...
- webstorm启动vue项目配置
使用命令窗口运行 1. npm run mock 2.npm run dev 每次都打开命令窗口比较麻烦,可以在webstorm内进行配置,从webstorm内启动 选中run下面的edit conf ...
- appium常见问题02_android内嵌H5页（webview）如何定位
现在大多数app都是由原生页面和内嵌H5(即webview)组成,app原生页面直接定位即可,那内嵌H5页面要如何定位呢. 相信大多数人用appium做自动化时都有遇到这个问题,小编总结了下工作中该问 ...
- haskell基本语法
定义新类型 data EmployeeInfo = Employee Int String String [String] deriving(Read, Show, Eq, Ord) Employee ...
- db2备份与恢复
备份数据库: 离线备份 1.连接至数据库: db2 connect to test user db2admin using db2admin 2.显示数据库应用状态 db2 list applicat ...
- 【转】IntelliJ IDEA 2016.1.3注册破解激活
http://blog.csdn.net/c1481118216/article/details/51773674
- Dagger2 探索记2——四大基本组件(二)
书接上文,先回顾以下前一章写的内容. 内容大概就是在Activity中用@Inject标记一个注入的类,然后在这个类的构造函数上也打个@Inject标记,然后使用@Component来连接两边,完成对 ...
- windows自动关机(任务计划程序 + exe文件)
需求:windows系统自动关机 的需求: 相关工具:win10系统中,使用windows自带的任务计划程序 和 windows自带的关机 exe文件 完成此需求 exe文件位置:C:\Windows ...
- linux 软件管理--yum工具及源码包
目录 linux 软件管理--yum工具及源码包 一.yum基本概述 二.yum源的配置 三.yum实践案例 四.yum全局配置文件 五.yum签名检查机制 五.制作本地yum仓库 六.构建企业级yu ...