UCML 原生Android中嵌入Cordova Webview
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的更多相关文章
- 如何在原生工程中引入Cordova工程-for iOS 【转】
http://blog.csdn.net/e20914053/article/details/50170487 如今混合开发方兴未艾,有的项目可能一开始是原生开发的,后期需要加入混合开发,如将Cord ...
- Android中监听webview监听是否加载完成
之前写过一篇捕获Phoengap的webview事件的方法,主要是在实现了CordovaInterface的Activity中, 在onMessage中根据第一个参数的message name来判断 ...
- Android中webview和js之间的交互(转)
http://www.cnblogs.com/leizhenzi/archive/2011/06/29/2093636.html 1.android中利用webview调用网页上的js代码. Andr ...
- android 中webview调用js
1.android中利用webview调用网页上的js代码. Android 中可以通过webview来实现和js的交互,在程序中调用js代码,只需要将webview控件的支持js的属性设置为true ...
- Android中Native和H5交互
1.概述 时至今日,H5的跨平台性越发凸显优势,一套代码适配android.ios,既能减少开发成本,又便于更新与维护.但是native的性能体验也确实更佳,尤其体现在复杂界面和频繁变化的界面上.事实 ...
- Android H5混合开发(3):原生Android项目里嵌入Cordova
前言 如果安卓项目已经存在了,那么如何使用Cordova做混合开发? 方案1(适用于插件会持续增加或变化的项目): 新建Cordova项目并添加Android平台,把我们的安卓项目导入Android平 ...
- 原生Android项目里嵌入Cordova
Android H5混合开发():原生Android项目里嵌入Cordova 如果安卓项目已经存在了,那么如何使用Cordova做混合开发? 方案1(适用于插件会持续增加或变化的项目): 新建Cord ...
- Android安全开发之WebView中的地雷
Android安全开发之WebView中的地雷 0X01 About WebView 在Android开发中,经常会使用WebView来实现WEB页面的展示,在Activiry中启动自己的浏览器,或者 ...
- android中基于HTML模板的方式嵌入SWF
继上一篇 利用webview实现在andorid中嵌入swf 这篇继续说说通过html模板的方式来嵌入SWF,这样做的好处最直观的就是可以把html,swf和android代码串起来,交互操作很方便( ...
随机推荐
- 20141211--C# 构造函数
namespace fengzhuang { class Class2 { private string _Name; private string _Code; public string _Sex ...
- <JAVA - 大作业(1)文本编辑器 >
<JAVA - 大作业(1)文本编辑器 > 背景 JAVA上机大作业:qq / 代码评价系统 第一次上机主题是练习JAVA自带的GUI图形化编程 目的:实现一个跟window10记事本界面 ...
- HDU3951_Coin Game
Coin Game Problem Description 一堆n个硬币围成一圈,两个人轮流拿走连续k个硬币,拿走最后一堆的人获胜 问你第一个人获胜还是第二个 思路: 这是NIM游戏改编版本 但是道理 ...
- BZOJ 1779. [Usaco2010 Hol]Cowwar 奶牛战争
传送门 考虑构建网络流模型 把一个流量看成一只奶牛的攻击过程,那么答案就是最大流 因为每只奶牛只能操作一波,所以构造分层图,一层相当于一步 第一层就是初始状态,从 $S$ 向所有 $J$ 奶牛连一条流 ...
- 如何多个router 进行合并?
有时间可能有多个人开发,如果在共用router, 势必会造成合并冲突,可以分开多个router.js ,然后进行合并 // router0.jsconst studyRouter = [ { path ...
- Django版本更新(升级)到指定版本的命令
- Nginx有哪些作用?
Nginx有哪些作用? http协议代理 搭建虚拟主机 服务的反向代理 在反向代理中配置集群的负载均衡 什么是正向代理? 正向代理,意思是一个位于客户端和原始服务器(origin server)之 ...
- 数据库索引原理,及MySQL索引类型(转)
在数据库表中,对字段建立索引可以大大提高查询速度.假如我们创建了一个 mytable表: CREATE TABLE mytable( ID INT NOT NULL, username ) NOT N ...
- js 输入整数
1.我用 /^\+?[1-9][0-9]*$/ 貌似不对(小数也可以输入) 2.输入整数 n = /^[1-9]\d*$/; . -]\d*$/; //判断字符串是否为数字 if (!value) ...
- laravel 跨域解决方案
我们在用 laravel 进行开发的时候,特别是前后端完全分离的时候,由于前端项目运行在自己机器的指定端口(也可能是其他人的机器) , 例如 localhost:8000 , 而 laravel 程序 ...