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. Python Django 编写一个简易的后台管理工具4-添加admin模版

    导入admin后台模版 可以在网上任意搜索模版,我这里也提供一个地址github 拷贝admin后台的html文件至项目的templates文件夹 创建static文件夹,将admin后台的js,im ...

  2. 如何录制视频生成GIF动态图?

    前言 在分享文章时有些知识不好讲清,就打算用gif图来展示,可是在网上找了几个录视频的工具都要会员才可以生成gif动态图,很是郁闷,不过苦苦寻找后,发现LICEcap很好用,可以很方便的生成gif动态 ...

  3. appium常见问题06_如何解决uiaotomator定位工具报错

    在使用uiaotomator工具定位元素过程中,经常会弹出报错,截图失败,导致无法定位元素,当遇到该问题时,解决办法如下: 方法一:拔掉手机usb连接,重新连接手机 方法二:adb杀掉手机服务,重起服 ...

  4. jQuery基础教程之is()方法和has() 方法

    is()方法 —— 用于筛选 语法: jQueryObject.is( expr )返回值: is()函数的返回值为Boolean类型.true或者false.只要其中至少有一个元素符合给定的表达式就 ...

  5. 最长回文子串 —— Manacher (马拉车) 算法

    最长回文子串 回文串就是原串和反转字符串相同的字符串.比如 aba,acca.前一个是奇数长度的回文串,后一个是偶数长度的回文串. 最长回文子串就是一个字符串的所有子串中,是回文串且长度最长的子串. ...

  6. cita 源码研究

    适用环境 vim + YouCompleteMe 使用 github 源,不能使用 ustc 源 git clone --depth 1 --recusive https://github.com/k ...

  7. Python 学习笔记14 类 - 使用类和实例

    当我们熟悉和掌握了怎么样创建类和实例以后,我们编程中的大多数工作都讲关注在类的简历和实例对象使用,修改和维护上. 结合实例我们来进一步的学习类和实例的使用: 我们新建一个汽车的类: #-*- codi ...

  8. vue 中router.go;router.push和router.replace的区别

    vue 中router.go:router.push和router.replace的区别:https://blog.csdn.net/div_ma/article/details/79467165 t ...

  9. IT面试技巧(1)

    声明:以下面试技巧仅作参考,更多的时候还是要真实得表达自我,要保持一定的职业素养. 1.请你自我介绍一下你自己? 回答提示:一般人回答这个问题过于平常,只说姓名.年龄.爱好.工作经验,这些在简历上都有 ...

  10. Apache之默认配置文件解释

    一.默认配置文件 # 定义apache运行的目录,即程序所在的位置 ServerRoot "/usr/local/apache2" # 定义Apache服务监听的端口 Listen ...