原生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 ...
随机推荐
- 用DECODE进行排序
DECODE用法: 现定义一table名为output,其中定义两个column分别为monthid(var型)和sale(number型),若sale值=1000时翻译为D,=2000时翻译为C,= ...
- 【Angular】No component factory found for ×××.
报错现象: 用modal打开某个组件页面时报错 报错:No component factory found for UpdateAuthWindowComponent. Did you add it ...
- 测开之路二十九:Flask基础之jinja2模板
中文文档:http://docs.jinkan.org/docs/jinja2/ 与静态资源一样,Flask默认的模板目录名为templates,如果有需要的话和static一样,要在初始化的时候声明 ...
- js对象传到后台ACTION使用
需的包 <script type="text/javascript" src="s"></script>gson-1.2.3.jar谷歌 ...
- 模拟用户登录含注册——python第8天
print('欢迎登录尚雅梦想python学习系统'.center(30)) print('******' * 8) flag = True while flag: order = input(''' ...
- BPT(Business Process Testing)
- jQuery仿Android锁屏图案应用插件
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- python学习第三天-元组、列表及字典
元组 # 元组() 关键字:tuple# 元组的值一旦确定,不可更改,包括增.删.改都不行# 1.元组只有一个数据时,加逗号在后面,不然就不是元组类型的数据tuple_1 = ("hello ...
- Feign基础教程
https://blog.csdn.net/u010862794/article/details/73649616 简介 Feign使得 Java HTTP 客户端编写更方便.Feign 灵感来源于R ...
- Electron-vue实战(二)— 请求Mock数据渲染页面
Electron-vue实战(二)— 请求Mock数据渲染页面 作者:狐狸家的鱼 本文链接 GitHub:sueRimn 一.环境搭建 1.安装Mock.js 如果仅仅用作脱离后台的模拟数据,就安装在 ...