Android实现在当前进程打开网页可以将Cordova中的WebView嵌入Android项目中,实现简单,不需要自己实现,所以掌握如何嵌入WebView对项目快速开发很有帮助
官方也有这方面的教程操作,但最新版本的cordova android(4.0.)对其代码库做了大的改动。这种变化,大多是一种设计模式,使得上面描述的方法不能正常工作。
本文将展示如何与cordova Android的新变化合作,嵌入cordova webview在本机Android应用程序。
创建Cordova安卓项目
cordova create test_cordova com.example.hello HelloWorld
cordova platform add android
cordova plugin add nl.x-services.plugins.toast
cordova plugin add org.apache.cordova.device
cordova build 上面第三行和第四行是将其他的第三方插件也嵌入安卓原生工程使用
创建Android Native项目
public class MainActivity extends Activity { @Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
} public void startCordovaActivity(View view) {
Intent intent = new Intent(this, TestCordovaActivity.class);
startActivity(intent);
} public void startCordovaActivityWithLayout(View view) {
Intent intent = new Intent(this, TestCordovaWithLayoutActivity.class);
startActivity(intent);
} } startCordovaActivity 将转移到一个新活动,其布局是以程序方式创建的cordova webview。
startCordovaActivity 将转移到一个新的活动,其布局使用xml布局文件定义并嵌入cordova webview。 TestCordovaActivity
public class TestCordovaActivity extends CordovaActivity { public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
super.init();
// Load your application
launchUrl = "file:///android_asset/www/index.html";
// launchUrl = "file:///android_asset/www/index2.html";
loadUrl(launchUrl);
}
} 不需要xml布局,加载的是index.html网页
TestCordovaWithLayoutActivity
public class TestCordovaWithLayoutActivity extends CordovaActivity { /** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_test_cordova_with_layout);
super.init();
// Load your application
// launchUrl = "file:///android_asset/www/index.html"
launchUrl = "file:///android_asset/www/index2.html";
loadUrl(launchUrl);
} @Override
protected CordovaWebView makeWebView() {
SystemWebView webView = (SystemWebView)findViewById(R.id.cordovaWebView);
return new CordovaWebViewImpl(new SystemWebViewEngine(webView));
} @Override
protected void createViews() {
//Why are we setting a constant as the ID? This should be investigated
// appView.getView().setId(100);
// appView.getView().setLayoutParams(new FrameLayout.LayoutParams(
// ViewGroup.LayoutParams.MATCH_PARENT,
// ViewGroup.LayoutParams.MATCH_PARENT));
//
// setContentView(appView.getView()); if (preferences.contains("BackgroundColor")) {
int backgroundColor = preferences.getInteger("BackgroundColor", Color.BLACK);
// Background of activity:
appView.getView().setBackgroundColor(backgroundColor);
} appView.getView().requestFocusFromTouch();
} } public class Main2Activity extends Activity implements CordovaInterface{
private SystemWebView cordova_webview;
private String TAG = "CORDOVA_ACTIVITY";
private final ExecutorService threadPool = Executors.newCachedThreadPool();
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main2);
cordova_webview = (SystemWebView) findViewById(R.id.cordova_web_view);
//从4.x开始CordovaWebView不再是View的子类,用SystemWebView代替
//下面这行代码非常关键,如果没有这行,的、diveceready就没有执行,显灰色状态
cordova_webview.getSettings().setJavaScriptEnabled(true);
// Config.init(this);
String url = "file:///android_asset/www/index.html";
cordova_webview.loadUrl(url);
} @Override
public void startActivityForResult(CordovaPlugin cordovaPlugin, Intent intent, int i) {
Log.d(TAG, "setActivityResultCallback is unimplemented");
} @Override
public void setActivityResultCallback(CordovaPlugin cordovaPlugin) {
Log.d(TAG, "startActivityForResult is unimplemented");
} @Override
public Activity getActivity() {
return this;
} @Override
public Object onMessage(String s, Object o) {
Log.d(TAG, s);
if (s.equalsIgnoreCase("exit")) {
super.finish();
}
return null;
} @Override
public ExecutorService getThreadPool() {
return threadPool;
}
} 使用setContentView显式设置布局xml。需要重写两个方法: makeWebView: 它使用R.id.cordovaWebView,在layout xml文件中定义
createViews : 我们重写它只是因为它将默认使用setContentView。但是我们想使用我们的xml布局,所以需要它。 activity_test_cordova_with_layout.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context="com.example.jimmy.embeddedcordovawebviewdemo.TestCordovaWithLayoutActivity"> <TextView
android:layout_width="match_parent"
android:layout_height="100dp"
android:background="#FF0000"
android:textColor="#FFFFFF"
android:gravity="center"
android:text="This is native text view"
/> <org.apache.cordova.engine.SystemWebView
android:id="@+id/cordovaWebView"
android:layout_width="match_parent"
android:layout_height="match_parent"
/> </LinearLayout> 为了向后兼容,我们使用cordova库中的org.apache.cordova.engine.SystemWebView,直到4..0之前也是可以使用org.apache.cordova.CordovaWebView
将Cordova Android项目复制到本机Android应用程序
拷贝jar包
去Apache官方网站下载最新的cordova Android Packet,然后创建jar包。官方网站
下载好官方压缩文件cordova-android-xxx.zip,解压缩,通过ant工具导航到 /framework目录下,执行ant jar命令,如果提示
build fali, you need to create the file'local.properties' by running 'android update project -p .'命令,在cmd窗口执行如上命令之后再次执行ant jar
将会在当前目录生成cordova-4.0..jar
拷贝jar包到项目中,在build.gradle中添加依赖
compile files('libs/cordova-4.0.0.jar') 拷贝www目录
目录结构如下
platforms/android/assets/www -> src/main/assets/www
拷贝插件
注意:拷贝platforms/android/src/目录结构下的所有文件,而不是plugins/下的所有文件。因为在运行cordova build命令时,cordova将复制plugins/文件夹下的插件到目录platforms/android/src/下,并执行一些操作。
拷贝config.xml
注意:不要拷贝更目录下的config.xml,要拷贝的是platforms下的config.xml
目录结构如下
platforms/android/res/xml/config.xml -> src/main/res/xml/
整个工程的目录结构如下图所示: 若工程点击事件报错:
- ::24.708 -/com.intbird.soft.cordoca I/chromium﹕ [INFO:CONSOLE()] “Refused to execute inline event handler because it violates the following Content Security Policy directive: “default-src ‘self’ data: gap: https://ssl.gstatic.com ‘unsafe-eval’”. Note that ‘script-src’ was not explicitly set, so ‘default-src’ is used as a fallback. “, source: file:///android_asset/www/index.html (41)
直接注释掉 index.html meta 第一行,重新运行
<html>
<head>
<!-- <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *">
-->
<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">
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script type="text/javascript" charset="utf-8" src="js/index.js"></script>
<title>Hello World</title> </head>
<body onload="onPageLoad()">
<input type="button" onclick="btnStartActivity('web')" value="使用webView" class="button"/><br/>
<input type="button" onclick="btnStartActivity('camera')" value="使用相机" class="button"/><br/>
<input type="button" onclick="btnStartActivity('')" value="未处理" class="button"/>
</body>
</html> 参考文献: http://cordova.apache.org/docs/en/5.0.0/guide_platforms_android_webview.md.html
http://richardgilmour.co.uk/2013/03/03/embedding-a-cordova-webview-in-a-native-android-app/
https://github.com/Adobe-Marketing-Cloud-Apps/app-sample-android-phonegap/wiki/Embed-Webview-in-Android-Fragment 作者:samychen
链接:https://www.jianshu.com/p/6be7ba97ad8a
来源:简书
简书著作权归作者所有,任何形式的转载都请联系作者获得授权并注明出处。

UCML 原生Android中嵌入Cordova Webview的更多相关文章

  1. 如何在原生工程中引入Cordova工程-for iOS 【转】

    http://blog.csdn.net/e20914053/article/details/50170487 如今混合开发方兴未艾,有的项目可能一开始是原生开发的,后期需要加入混合开发,如将Cord ...

  2. Android中监听webview监听是否加载完成

    之前写过一篇捕获Phoengap的webview事件的方法,主要是在实现了CordovaInterface的Activity中,  在onMessage中根据第一个参数的message name来判断 ...

  3. Android中webview和js之间的交互(转)

    http://www.cnblogs.com/leizhenzi/archive/2011/06/29/2093636.html 1.android中利用webview调用网页上的js代码. Andr ...

  4. android 中webview调用js

    1.android中利用webview调用网页上的js代码. Android 中可以通过webview来实现和js的交互,在程序中调用js代码,只需要将webview控件的支持js的属性设置为true ...

  5. Android中Native和H5交互

    1.概述 时至今日,H5的跨平台性越发凸显优势,一套代码适配android.ios,既能减少开发成本,又便于更新与维护.但是native的性能体验也确实更佳,尤其体现在复杂界面和频繁变化的界面上.事实 ...

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

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

  7. 原生Android项目里嵌入Cordova

    Android H5混合开发():原生Android项目里嵌入Cordova 如果安卓项目已经存在了,那么如何使用Cordova做混合开发? 方案1(适用于插件会持续增加或变化的项目): 新建Cord ...

  8. Android安全开发之WebView中的地雷

    Android安全开发之WebView中的地雷 0X01 About WebView 在Android开发中,经常会使用WebView来实现WEB页面的展示,在Activiry中启动自己的浏览器,或者 ...

  9. android中基于HTML模板的方式嵌入SWF

    继上一篇 利用webview实现在andorid中嵌入swf 这篇继续说说通过html模板的方式来嵌入SWF,这样做的好处最直观的就是可以把html,swf和android代码串起来,交互操作很方便( ...

随机推荐

  1. .net 运行原理

    刚学习那会,感觉.net运行原理是很复杂的,也去了解过相关的东西,但是很晦涩,难于理解.感觉有些难了,也就放弃了解了.今天回头想想,也是当时有些毛躁了,不管怎么说,时至今日是有些明白运行原理. 从头开 ...

  2. 记录MNIST实现与理解

    之前半个月的时间几乎都在看理论书籍,最近两天开始撸代码,一个跟Hello World同级别的教程例子就出来了,那就是MNIST.实现代码应该很多地方都有: #!/usr/bin/env python ...

  3. 通过export方式导出,在导入时要加{ },export default则不需要

    怎么就是记不住呢?? 通过export方式导出,在导入时要加{ },export default则不需要

  4. GHCi Prelude学习

    参考:http://www.cse.unsw.edu.au/~en1000/haskell/inbuilt.html http://www.cse.unsw.edu.au/~en1000/haskel ...

  5. 关于toString()的一些事情

    Java上输出一个数组的时候,不可以直接输出 System.out.println(arr); 直接输出数据的名称会输出数组的内存地址.换句话说,他的输出是: getClass().getName() ...

  6. Bentley二次开发中的,沿曲线构造拉伸实体问题

    引用文件:Bentley.Interop.MicroStationDGN 本人开发过程中遇到问题: 创建多个线段及弧线,通过自动创建复杂链获得,沿曲线构造拉伸实体的Path参数,拉伸曲线路径首尾特别近 ...

  7. 分布式服务防雪崩熔断器,Hystrix理论+实战。

    Hystrix是什么? hystrix对应的中文名字是"豪猪",豪猪周身长满了刺,能保护自己不受天敌的伤害,代表了一种防御机制,这与hystrix本身的功能不谋而合,因此Netfl ...

  8. websocket 服务搭建

    链接过程 前端 1.CREATED WEBSOCKE 2.ONOPEN 3.ONMESSAGE 服务端 1.收到request 2.给客户端发送消息,生成id //msg { type: " ...

  9. 48.Course Schedule(课程安排)

    Level:   Medium 题目描述: There are a total of n courses you have to take, labeled from 0 to n-1. Some c ...

  10. SQL数据库— <3>高级查询、常用函数 --摘录网络

    SQL Server T-SQL高级查询 高级查询在数据库中用得是最频繁的,也是应用最广泛的. Ø 基本常用查询 --select select * from student; --all 查询所有 ...