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. websocket 和 http的区别

    相同点: 都是基于tcp实现的,都要经过三次握手.四次挥手. 如图: 不同点: websocket 经历过连接,就可以全双工通信,不需要一直连接,降低了网络资源消耗. http 每次通讯都要连接,客户 ...

  2. (子文章)Spring Boot搭建两个微服务模块

    目录 1. 创建工程和user-service模块 1.1 创建空工程 1.2 在空工程里新建Module 2. 配置文件 2.1 pom.xml 2.2 application.yml 3. 代码 ...

  3. Java学习之多线程(线程安全问题及线程同步)

    一.线程安全问题产生前提:1.多线程操作共享数据2.线程任务中有多条代码 class Ticket implements Runnable { //2.共享数据 private int num = 1 ...

  4. std::sort的详细用法

    #include <algorithm> #include <functional> #include <array> #include <iostream& ...

  5. 利用select单线程点对点聊天

    select的优点与使用方法 select用单线程的方法遍历所有待读写的I/O接口, 当有接口可用时就会返回. select可设置电脑阻塞或非阻塞. 特别注意: 每次select前都要重新初始化集合和 ...

  6. c#拆分字符串英文和数字(包括国外所以文字)

    先创建一个类: /// <summary> /// 字符串分析 /// </summary> interface IStringAna { /// <summary> ...

  7. 转载:LESS基本用法

    转载出处:https://blog.csdn.net/qq_38209578/article/details/80566860 转载出处:https://blog.csdn.net/weixin_44 ...

  8. tar.xz 解压

    解压tar.xz文件:先 xz -d xxx.tar.xz 将 xxx.tar.xz解压成 xxx.tar 然后,再用 tar xvf xxx.tar来解包. xz -d Python-3.7.1.t ...

  9. LeetCode Array Easy 414. Third Maximum Number

    Description Given a non-empty array of integers, return the third maximum number in this array. If i ...

  10. 第6篇如何访问pod

        一.通过 Service 访问 Pod: 我们不应该期望 Kubernetes Pod 是健壮的,而是要假设 Pod 中的容器很可能因为各种原因发生故障而死掉.Deployment 等 con ...