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的更多相关文章

  1. Android H5混合开发(3):原生Android项目里嵌入Cordova

    前言 如果安卓项目已经存在了,那么如何使用Cordova做混合开发? 方案1(适用于插件会持续增加或变化的项目): 新建Cordova项目并添加Android平台,把我们的安卓项目导入Android平 ...

  2. 如何在原生Android项目里嵌入Cordova

    背景: 这段时间在维护一个Cordova混合项目,以前稍微接触过Cordova,也写过简单的纯纯的Cordova的Demo,但是没有尝试过混合原生的Cordova. 在接到项目后比较了一下项目架构和C ...

  3. 【React Native开发】React Native移植原生Android项目(4)

    ),React Native技术交流4群(458982758),请不要反复加群!欢迎各位大牛,React Native技术爱好者加入交流!同一时候博客左側欢迎微信扫描关注订阅号,移动技术干货,精彩文章 ...

  4. Phonegap Android 项目使用Cordova

    要在已经创建好的Android项目里,使用Cordova. 1. 首先在Android Studio中创建Android项目 2. 创建cordova项目 cordova crate test com ...

  5. React Native移植原生Android

    (一)前言 之前已经写过了有关React Native移植原生Android项目的文章,不过因为RN版本更新的原因吧,跟着以前的文章可能会出现一些问题,对于初学者来讲还是会有很多疑难的困惑的,而且官方 ...

  6. C#-Xamarin的Android项目开发(一)——创建项目

    创建项目 使用Xamarin开发安卓项目,首先需要安装VS2017以上版本.因为VS2017以上的版本,可以直接创建Xamarin项目. 另外用Xamarin开发安卓项目,还需要使用Intel的CPU ...

  7. UCML 原生Android中嵌入Cordova Webview

    Android实现在当前进程打开网页可以将Cordova中的WebView嵌入Android项目中,实现简单,不需要自己实现,所以掌握如何嵌入WebView对项目快速开发很有帮助 官方也有这方面的教程 ...

  8. Cordova开发App入门之创建android项目

    Apache Cordova是一个开源的移动开发框架.允许使用标准的web技术-HTML5,CSS3和JavaScript做跨平台开发. 应用在每个平台的具体执行被封装了起来,并依靠符合标准的API绑 ...

  9. web嵌入到原生的app里需要注意的事项

    1.https://www.cnblogs.com/shimily/articles/7943370.html 2.https://www.cnblogs.com/stoneniqiu/p/60771 ...

随机推荐

  1. zabbix配置-模板

    1.配置=>模板=>创建模板=>输入模板名称和群组 2.配置=>模板=>找到刚刚创建的模板=>点击应用集(applications)=>创建应用集=>输 ...

  2. appium常见问题02_android内嵌H5页(webview)如何定位

    现在大多数app都是由原生页面和内嵌H5(即webview)组成,app原生页面直接定位即可,那内嵌H5页面要如何定位呢. 相信大多数人用appium做自动化时都有遇到这个问题,小编总结了下工作中该问 ...

  3. USACO 6.3 章节 你对搜索和剪枝一无所知QAQ

    emmm........很久很久以前 把6.2过了 所以emmmmmm 直接跳过 ,从6.1到6.3吧 Fence Rails 题目大意 N<=50个数A1,A2... 1023个数,每个数数值 ...

  4. Java解释器模式`

    解释器模式提供了一种评估计算语言语法或表达式的方法. 这种类型的模式属于行为模式. 这种模式涉及实现一个表达式接口,它告诉解释一个指定的上下文. 此模式用于SQL解析,符号处理引擎等. 实现示例 我们 ...

  5. python打开文件失败,报错'gbk' codec can't decode byte 0xbf in position 2: illegal multibyte sequence

    python3.7,python3.6都存在的问题: 读取的文件编码是utf-8 第1行是空行.#开头都可能会报这个错误: E:\count_packet>python string_count ...

  6. poj3468 A Simple Problem with Integers (树状数组做法)

    题目传送门 A Simple Problem with Integers Time Limit: 5000MS   Memory Limit: 131072K Total Submissions: 1 ...

  7. Windows开发,关于通过写代码加载PDB的那些事

    最近,接到一个活,要写一个程序,用来批量分析一堆dll和对应的PDB, 其实工作很简单,就是根据一堆偏移,通过PDB文件,找到对应dll里面对应位置的明文符号, 简单的需求,实现起来,通常都很麻烦, ...

  8. C# 编程--数组

    数组 可以帮我我们一次声明存储多个相同类型的变量.用来解决同一类大量数据在内存存储和运算的功能特点:连续.同一类数据数组定义==>赋值==>取值    定义:        int[] n ...

  9. elasticsearch Mapping 定义索引

    Mapping is the process of defining how a document should be mapped to the Search Engine, including i ...

  10. 2019-1-28-WPF-高性能笔

    title author date CreateTime categories WPF 高性能笔 lindexi 2019-1-28 14:21:5 +0800 2018-2-13 17:23:3 + ...