原生Android项目里嵌入Cordova
Android H5混合开发():原生Android项目里嵌入Cordova 如果安卓项目已经存在了,那么如何使用Cordova做混合开发? 方案1(适用于插件会持续增加或变化的项目):
新建Cordova项目并添加Android平台,把我们的安卓项目导入Android平台(我们的安卓项目需要做目录结构、配置等很多内容调整),后续开发中,可通过命令在Codova项目中统一快速添加插件,进行原生与H5通信。 方案2(适用于插件较稳定的项目):
新建Cordova项目并添加Android平台,添加相关插件,将Android平台下H5代码、插件相关的内容导入到我们的项目中(我们的安卓项目目录结构、配置信息等变化较小)。后续开发中,如果新增、编辑插件,则无法直接通过命令在我们的项目中维护插件,需要在新建的Cordova项目中维护好,然后手动复制过来相关的文件。 本次讲解,我们使用第二种方案吧。实现也很简单,大致过程如下:
.准备安卓项目
.将Cordova项目的Cordovalib导入安卓项目,并在gradle中添加依赖
.将Cordova项目的H5端代码(即/WWW/)拷贝到 /安卓项目/src/assets/下
.将Cordova项目的config.xml拷贝到 /安卓项目/res/xml/下
.将Cordova项目的于H5端约定的插件.java代码拷贝到 /安卓项目/src/对应包名下/(我们主要此处写代码)
.将Cordova项目的WhitelistPlugin拷贝到 /安卓项目/src/下 注意,本次讲解:
.我们新建一个项目mynativeapp作为已存在的安卓项目;
.我们直接使用《Android H5混合开发():自定义Cordova插件》中的Demo作为Cordova项目; .准备安卓项目
在/TestCordova/mynativeapp/目录下,使用AndroidStudio创建一个普通的安卓项目,取名:mynativeapp,如下图: 新建的安卓项目
.将Cordova项目的Cordovalib导入安卓项目,并在gradle中添加依赖
一般方案:
使用cordova命令新建一个混合项目,添加android平台,里面包含Cordovalib。然后在我们的安卓项目中导入即可。 此处,我们直接导入上一节课 /Cordova项目/android平台下的Cordovalib:
导入后的mynativeapp项目目录结构和gradle
.将Cordova项目的H5端代码(即/WWW/)拷贝到 /安卓项目/src/assets/下
注意:因为咱们这里只是做Demo,实际上并没有找H5端的人员写这块的代码。在上一节课,咱们在Cordova项目的android平台中,已经写了个测试的H5代码,那么,就直接使用这个吧,如下图: H5的代码 复制到/mynativeapp/src/assets/下
复制过来的H5的代码
.将Cordova项目的config.xml拷贝到 /安卓项目/res/xml/下
我们将Cordova项目/res/xml/config.xml文件,拷贝到/mynativeapp/res/xml/下 Cordova项目/res/xml/config.xml文件
拷贝到/mynativeapp/res/xml/下
.将Cordova项目的于H5端约定的插件.java代码拷贝到 /安卓项目/src/对应包名下/
正常开发时,我们主要此处写代码。
在上节课,我们的自定义插件的代码已经有了,所以直接复制过来就可以了。 Cordova项目的于H5端约定的插件.java代码
自定义的插件代码拷贝到 /安卓项目/src/对应包名下/
.将Cordova项目的WhitelistPlugin(插件白名单)拷贝到 /安卓项目/src/下
Cordova项目的WhitelistPlugin
拷贝到 /安卓项目/src/下
准备工作完毕,开始测试
至此,安卓项目中所需的Cordova依赖、H5代码、插件相关信息都手动导入了。接下来我们测试一下H5的功能吧。
.新建类TestCordovaActivity,继承CordovaActivity,加载index.html package com.ccc.ddd;
import android.os.Bundle;
import org.apache.cordova.CordovaActivity; /**
* @author xc
* @date 2018/9/25
* @desc 测试H5的页面
*/
public class TestCordovaActivity extends CordovaActivity {
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState); // enable Cordova apps to be started in the background
Bundle extras = getIntent().getExtras();
if (extras != null
&& extras.getBoolean("cdvStartInBackground", false)) {
moveTaskToBack(true);
} // Set by <content src="index.html" /> in config.xml
// 加载H5首页
loadUrl(launchUrl);
}
}
.MainActivity添加按钮,点击跳转至TestCordovaActivity页面 package com.ccc.ddd;
import android.content.Intent;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button; public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Button button = findViewById(R.id.button);
button.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Intent intent = new Intent(MainActivity.this,
TestCordovaActivity.class);
MainActivity.this.startActivity(intent);
}
});
}
}
编译安卓项目,运行到手机 MainActivity.jpg TestCordovaActivity.jpg
总结
本章介绍了在已有安卓项目中如何使用Cordova,没有太多技术点。
如果有不明白的地方,建议去官网多查查资料。
[https://cordova.apache.org/docs/en/latest/) Cordova的命令、插件的命令等只是方便我们快速管理维护项目和插件的工具。我们可以使用,但是不能太过依赖,要活学活用。 源码已上传至网盘:
https://pan.baidu.com/s/1THPUbfCgRQHZGLWy7_Zkww 第一篇:Android H5混合开发():构建Cordova 项目
https://www.jianshu.com/p/058a0dd7f809 第二篇:Android H5混合开发():自定义Cordova插件
https://www.jianshu.com/p/8fcbf06a4c3a 第三篇:Android H5混合开发():原生Android项目里嵌入Cordova
https://www.jianshu.com/p/e306ae0f1f03 第四篇:Android H5混合开发():构建Cordova Jar包
https://www.jianshu.com/p/447d41a1299d
原生Android项目里嵌入Cordova的更多相关文章
- Android H5混合开发(3):原生Android项目里嵌入Cordova
前言 如果安卓项目已经存在了,那么如何使用Cordova做混合开发? 方案1(适用于插件会持续增加或变化的项目): 新建Cordova项目并添加Android平台,把我们的安卓项目导入Android平 ...
- 如何在原生Android项目里嵌入Cordova
背景: 这段时间在维护一个Cordova混合项目,以前稍微接触过Cordova,也写过简单的纯纯的Cordova的Demo,但是没有尝试过混合原生的Cordova. 在接到项目后比较了一下项目架构和C ...
- 【React Native开发】React Native移植原生Android项目(4)
),React Native技术交流4群(458982758),请不要反复加群!欢迎各位大牛,React Native技术爱好者加入交流!同一时候博客左側欢迎微信扫描关注订阅号,移动技术干货,精彩文章 ...
- Phonegap Android 项目使用Cordova
要在已经创建好的Android项目里,使用Cordova. 1. 首先在Android Studio中创建Android项目 2. 创建cordova项目 cordova crate test com ...
- React Native移植原生Android
(一)前言 之前已经写过了有关React Native移植原生Android项目的文章,不过因为RN版本更新的原因吧,跟着以前的文章可能会出现一些问题,对于初学者来讲还是会有很多疑难的困惑的,而且官方 ...
- C#-Xamarin的Android项目开发(一)——创建项目
创建项目 使用Xamarin开发安卓项目,首先需要安装VS2017以上版本.因为VS2017以上的版本,可以直接创建Xamarin项目. 另外用Xamarin开发安卓项目,还需要使用Intel的CPU ...
- UCML 原生Android中嵌入Cordova Webview
Android实现在当前进程打开网页可以将Cordova中的WebView嵌入Android项目中,实现简单,不需要自己实现,所以掌握如何嵌入WebView对项目快速开发很有帮助 官方也有这方面的教程 ...
- Cordova开发App入门之创建android项目
Apache Cordova是一个开源的移动开发框架.允许使用标准的web技术-HTML5,CSS3和JavaScript做跨平台开发. 应用在每个平台的具体执行被封装了起来,并依靠符合标准的API绑 ...
- web嵌入到原生的app里需要注意的事项
1.https://www.cnblogs.com/shimily/articles/7943370.html 2.https://www.cnblogs.com/stoneniqiu/p/60771 ...
随机推荐
- HTML 列表中的dl,dt,dd,ul,li,ol区别
1.无序列表 无序列表是一个项目的列表,此列项目使用粗体圆点(典型的小黑圆圈)进行标记. 无序列表始于 <ul> 标签.每个列表项始于 <li>. 2.有序列表 同样,有序列表 ...
- 前端模块化开发的价值(seaJs)
随着互联网的飞速发展,前端开发越来越复杂.本文将从实际项目中遇到的问题出发,讲述模块化能解决哪些问题,以及如何使用 Sea.js 进行前端的模块化开发. 恼人的命名冲突 我们从一个简单的习惯出发.我做 ...
- 转 linux 服务器内存占用统计
linux 服务器内存占用统计 原文: https://www.cnblogs.com/eaglediao/p/6641811.html 当前内存占用率的计算,是根据top命令显示的Mem.used ...
- Scrapy框架: 通用爬虫之CSVFeedSpider
步骤01: 创建项目 scrapy startproject csvfeedspider 步骤02: 使用csvfeed模版 scrapy genspider -t csvfeed csvdata g ...
- BZOJ 4657 (网络流)
题面 Nick最近在玩一款很好玩的游戏,游戏规则是这样的: 有一个n*m的地图,地图上的每一个位置要么是空地,要么是炮塔,要么是一些BETA狗,Nick需要操纵炮塔攻击BETA狗们. 攻击方法是:对于 ...
- 53-python基础-python3-列表-列表解析
列表解析 将for循环和创建新元素的代码合并成一行,并自动附加新元素. 实例:使用列表解析创建平方数列表. 首先指定一个描述性的列表名,如squares : 然后,指定一个左方括号,并定义一个表达式, ...
- UVA 11355 Cool Points( 极角计算 )
We have a circle of radius R and several line segments situated within the circumference of this cir ...
- UVALive 4992 Jungle Outpost(半平面交判存)
Jungle Outpost Time limit: 15.000 seconds Description There is a military base lost deep in the jung ...
- Php 十六进制短浮点数转十进制,带符号位
/** * 十六进制浮点型转为十进制 * @param String $strHex 十六进制浮点数 * @return 十进制 */ public static function hexToDecF ...
- Nuget--基础连接已经关闭
1.Nuget---基础连接已经关闭: 未能为 SSL/TLS 安全通道建立信任关系 修改一下 Package Source 改为 http://packages.nuget.org 2.Nuget- ...